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

Question

My scene looks like this:
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 {
}
}
}

Answer 1

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