如何可视化SpriteKit中SKRange的upperLimit范围？

Hey there! Let's get that movable range circle showing up correctly for your spaceship sprite. The issue you're running into is that your current makeCircularRange function only adds the movement constraint, but doesn't create a visual indicator for that range. Let's fix this step by step.

修改后的完整代码 #

Here's the updated code that adds a clear, colored circle to show the upper limit of your sprite's movement range:

import SpriteKit
import GameplayKit

class GameScene: SKScene {
    // 这些数组目前未使用，可根据后续需求保留或移除
    var ship1 = [2,1]
    var ship2 = [1,2]
    
    let jonahSpriteNode = SKSpriteNode(imageNamed: "jonah_spaceship")
    let georgeSpriteNode = SKSpriteNode(imageNamed: "george_spaceship")
    // 用于管理范围指示器的属性，避免重复添加节点
    var rangeIndicator: SKShapeNode?
    
    override func didMove(to view: SKView) {
        jonahSpriteNode.position = CGPoint(x: 30, y: frame.midY)
        jonahSpriteNode.size = CGSize(width: 100.0, height: 100.0)
        addChild(jonahSpriteNode)
        
        georgeSpriteNode.position = CGPoint(x: 628, y: frame.midY)
        georgeSpriteNode.size = CGSize(width: 100.0, height: 100.0)
        addChild(georgeSpriteNode)
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        for touch in touches{
            let touchLocation = touch.location(in: self)
            // 修正角度计算，让精灵正确朝向触摸点
            let angle = atan2(touchLocation.y - jonahSpriteNode.position.y, touchLocation.x - jonahSpriteNode.position.x)
            
            // 创建并显示移动范围圆圈
            makeCircularRange(to: jonahSpriteNode)
            
            let rotate = SKAction.rotate(toAngle: angle, duration: 1.0)
            let move = SKAction.move(to: touchLocation, duration: 2.5)
            let sequence = SKAction.sequence([rotate, move])
            
            jonahSpriteNode.run(sequence)
        }
    }
    
    func makeCircularRange(to node: SKNode) {
        // 移除旧的指示器，避免场景中堆积重复节点
        rangeIndicator?.removeFromParent()
        
        // 定义移动范围：以精灵当前位置为中心，半径0到400
        let range = SKRange(lowerLimit: 0, upperLimit: 400)
        // 创建距离约束，限制精灵到自身初始位置的距离（如果要以场景原点为中心，改为to: .zero）
        let constraint = SKConstraint.distance(range, to: node.position)
        node.constraints = [constraint]
        
        // 创建圆形路径作为范围指示器
        let circlePath = UIBezierPath(
            arcCenter: .zero,
            radius: 400,
            startAngle: 0,
            endAngle: CGFloat.pi * 2,
            clockwise: true
        )
        
        // 初始化形状节点并设置样式
        rangeIndicator = SKShapeNode(path: circlePath.cgPath)
        rangeIndicator?.strokeColor = .systemBlue // 设置你想要的线条颜色
        rangeIndicator?.lineWidth = 3.0 // 调整线条粗细
        rangeIndicator?.fillColor = .clear // 填充透明，只显示边框
        rangeIndicator?.alpha = 0.7 // 可选：添加透明度，避免遮挡精灵
        // 将指示器中心与约束的目标位置对齐
        rangeIndicator?.position = node.position
        
        // 添加到场景中
        addChild(rangeIndicator!)
    }
}

关键修改说明 #

• 范围指示器管理: 添加了rangeIndicator属性来跟踪可视化圆圈，每次调用makeCircularRange时先移除旧的指示器，避免场景中出现多个重复的圆圈。
• 正确创建可视化圆圈: 使用SKShapeNode和UIBezierPath绘制圆形，设置透明填充和清晰的线条，确保它只显示范围边框，不会遮挡你的精灵。
• 约束与可视化匹配: 将约束的目标设置为精灵的当前位置（node.position），同时把圆圈的中心也设为这个位置，这样显示的范围和实际的移动约束完全一致。如果你的需求是让精灵相对于场景原点移动，只需把to: node.position改为to: .zero，并把rangeIndicator?.position设为.zero即可。
• 角度计算修正: 调整了触摸角度的计算逻辑，让精灵正确朝向触摸点，避免旋转方向错误。

为什么之前的尝试出错？ #

大概率是因为没有正确管理节点的添加/移除，或者路径创建时圆心位置与约束目标不一致，导致显示的范围和实际约束不匹配。另外，如果直接创建节点而没有设置正确的填充/线条样式，可能会出现看不见或者遮挡精灵的问题。

内容的提问来源于stack exchange，提问作者Jonah Legg