如果选中按钮，如何在按钮周围绘制圆圈？

Question

我的场景是这样的：

我正在使用SpriteKit，并使用四个按钮创建了这个场景。

如果用户点击其中一个按钮，所选按钮周围应该会出现一个黑色圆圈（并停留在那里）。如果用户选择另一个按钮，前一个圆圈应该会消失，而新按钮会变成一个圆圈。

有人知道怎么做吗？

这是我的代码：

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    for touch in touches{
        let locationUser = touch.location(in: self)
        if atPoint(locationUser) == blueButton {
        }
        if atPoint(locationUser) == purpleButton {
        }
        if atPoint(locationUser) == redButton {
        }
        if atPoint(locationUser) == orangeButton {
        }
    }
}

Answer 1

有几种方法可以实现这一目标。我会做的（当你有 4 个相同的对象时，你应该考虑这样做）是对你的按钮进行子类化。这样，您可以向子类添加一个属性，指示按钮是否为 isSelected 并相应地更改它。

class Button: SKSpriteNode {

    var isSelected = false {
        didSet {
            if isSelected {
                background.isHidden = false
            }
            else {
                background.isHidden = true
            }
        }
   }

    //you can design the init to better suit however you want to differentiate between your buttons
    init(color: String) {

        //create an image of a black circle that you want to use as your border that is slightly larger than your other images
        let texture = SKTexture(imageNamed: "blackCircle")

        super.init(texture: nil, color: .clear, size: texture.size())

        let background = SKSpriteNode(texture: texture)
        background.zPosition = 0
        addChild(background)

        //add your color image here based on passed in parameters
        //but make sure that the zPosition is higher than 0
        let buttonTexture = SKTexture(imageNamed: color)

        let button = SKSpriteNode(texture: buttonTexture)
        button.zPosition = 1
        addChild(button)
    }
}

在你的游戏场景中，我会将按钮存储在一个数组中

private var blueButton: Button!
private var purpleButton: Button!
private var redButton: Button!
private var orangeButton: Button!
private var buttons = [Button]()

//example of creating your new button
blueButton = Button(color: "blue")
blueButton.position = CGPoint(x: blah, y: blah)
blueButton.zPosition = 1
addChild(blueButton)
buttons.append(blueButton)

//previously selected Button so that you know which one to unselect
private var prevSelectedButton: Button!

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    for touch in touches{
        let locationUser = touch.location(in: self)

        //unhighlight the last selected button
        prevSelectedButton.isSelected = false

        if atPoint(locationUser) == blueButton {
            blueButton.isSelected = true
            prevSelectedButton = blueButton  
        }
        else if atPoint(locationUser) == purpleButton {
            purpleButton.isSelected = true
            prevSelectedButton = purpleButton  
        }
        else if atPoint(locationUser) == redButton {
            redButton.isSelected = true
            prevSelectedButton = redButton  
        }
        else if atPoint(locationUser) == orangeButton {
            orangeButton.isSelected = true
            prevSelectedButton = orangeButton 
        }
    }
}

值得注意的是，我将处理 Button 类中的触摸事件以真正封装功能，但这超出了本问题的范围

此外，如果您使用 shapeNodes 而不是 SpriteNodes，您仍然可以使用此方法，只需在颜色圆圈后面添加一个黑色圆圈