CODEWITHSUNDEEP
swiftbuttonsprite-kit
Jay23
Jay23

Reputation: 57

How to draw circles around a button if it is selected?

My scene looks like this: enter image description here

I'm using SpriteKit and I created this scene with four buttons.

If the user taps on one of them there should appear a black circle around the selected button (and stay there). And if the user selects another button the previous circle should disappear and the new button gets a circle.

Does anyone know how to do this?

Here is my code:

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 {
        }
    }
}

Upvotes: 0

Views: 257

Answers (1)

Ron Myschuk
Ron Myschuk

Reputation: 6061

there are several ways that you could achieve this. What I would do (and you should consider doing this any time you have 4 of the same object) is to subclass your buttons. That way you could add a property to your subclass that indicates whether or not the button isSelected and change it accordingly.

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)
    }
}

in your gameScene I would store the buttons in an array 

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 
        }
    }
}

Worth noting that I would handle the touches events inside of the Button class to truly encapsulate the functionality, but that is outside of the scope of this question

Also if you are using shapeNodes instead of SpriteNodes you can still use this method just add a black circle behind color circle

Upvotes: 1

Related Questions