How to add normal Buttons in a SpriteKit Game? - swift

Question

So I have made 2 games so far and I always used the touchesBegan function and SpriteNodes to create a Menu, like that:
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
for touch in touches {
let location = touch.location(in: self)
if (atPoint(location).name == "playButton"){
startGame()
}
}
}
But this way is pretty ugly because as soon as you touch the button it will call the according action to it and you can't cancel it. But with a normal UIButton it will only call the action after you take the finger off the button, and you can even cancle a button click by just moving your finger away from the button. And the problem is, I don't know how I can add a UIButton to my MenuScene.swift file and I also don't use the Storyboard because it's just confusing to me and I don't understand how the .sks, .swift and .Storyboard files are linked together, it just makes no sense to me. I mean the .sks and .storyboard files are both for buildung a GUI but in .sks you cant add a UIButton... but why??? Is there any convenient way to add a button?

Answer 1

I wouldn't use UIButton in my Spritekit code, you are better off to create your own Button class in Spritekit and use it. The sks file is not linked to a storyboard it is linked to any class that you designate (GameScene, MenuScene) it can even be linked to smaller objects that have their own class (ScoreHUD, Castle, etc).
Honestly you are just over thinking the button thing. Think about the touch events. touchesBegan fires when the object is clicked if you want it to fire on finger up call touchesEnded
Here is a very simple button class I wrote for this example, there are a lot of things more you could do with this, but this covers the basics. It decides if the button will click on down or up and will not click if you move your finger off the button. It uses protocols to pass the click event back to the parent (probably you scene)
you can also add this to an sks file by dragging a colorSprite/ or image onto the scene editor and making it a custom class of "Button" in the Custom Class Inspector.
the Button Class...
protocol ButtonDelegate: class {
func buttonClicked(button: Button)
}
class Button: SKSpriteNode {
enum TouchType: Int {
class down, up
}
weak var buttonDelegate: ButtonDelegate!
private var type: TouchType = .down
init(texture: SKTexture, type: TouchType) {
var size = texture.size()
super.init(texture: texture ,color: .clear, size: size)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
isPressed = true
if type == .down {
self.buttonDelegate.buttonClicked(button: self)
}
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
if let touch = touches.first as UITouch! {
let touchLocation = touch.location(in: parent!)
if !frame.contains(touchLocation) {
isPressed = false
}
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
guard isPressed else { return }
if type == .up {
self.buttonDelegate.buttonClicked(button: self)
}
isPressed = false
}
}
In your GameScene file
class GameScene: SKScene, Button {
private var someButton: Button!
private var anotherButton: Button!
func createButtons() {
someButton = Button(texture: SKTexture(imageNamed: "blueButton"), type: .down)
someButton.position = CGPoint(x: 100, y: 100)
someButton.Position = 1
someButton.name = "blueButton"
addChild(someButton)
anotherButton = Button(texture: SKTexture(imageNamed: "redButton"), type: .up)
anotherButton = CGPoint(x: 300, y: 100)
anotherButton = 1
anotherButton = "redButton"
addChild(anotherButton)
}
func buttonClicked(button: Button) {
print("button clicked named \(button.name!)")
}
}