How to make text appear on button? -SpriteKit

Question

I am new to SpriteKit, and I am creating a game where I have designed the main menu with sketch and apply the image to spritekit as my background image. Everytime I put a label/text above the button images. It doesn't work properly. When they tap on play lets say, they will play and when they lose, and start over all of sudden the labels disappear.

Here is an image:

Here is my code

    //creating the start game programmatically. 
    let dw_startButton = SKSpriteNode()

    dw_startButton.name = "dw_startbutton"

    dw_startButton.position = CGPoint(x: self.frame.midX, y: self.frame.midY)
    self.addChild(dw_startButton)

    //Instructions Button
    let dw_selector = SKSpriteNode()
    dw_selector.name = "dw_selector"

    dw_selector.position = CGPoint(x: self.frame.midX, y: self.frame.midY)
    self.addChild(dw_selector)

    //Starting text
    let startText = SKLabelNode(text: "Play!")
    startText.fontColor = UIColor.white
    startText.position = CGPoint(x: 50, y: 50)
    startText.fontSize = 45
    startText.fontName = "Helvetica-Bold"
    startText.verticalAlignmentMode = SKLabelVerticalAlignmentMode(rawValue: 1)!
    startText.name = "dw_startbutton"
    dw_startButton.addChild(startText)

    //instructions text
    let startTexts = SKLabelNode(text: "Insturctions")
    startTexts.fontColor = UIColor.white
    startTexts.position = CGPoint(x: 0, y: 0)
    startTexts.fontSize = 20
    startTexts.fontName = "Helvetica-Bold"
    startTexts.verticalAlignmentMode = SKLabelVerticalAlignmentMode(rawValue: 1)!
    startTexts.name = "dw_selector"
    dw_selector.addChild(startTexts)

Ron Myschuk · Accepted Answer · 2017-02-11T22:53:05.250

0

You always need to add zPosition to your sprites and labels. Otherwise sometimes they will appear and other times they may appear behind the background

//creating the start game programmatically. 
let dw_startButton = SKSpriteNode()
dw_startButton.zPosition = 1
dw_startButton.name = "dw_startbutton"
dw_startButton.position = CGPoint(x: self.frame.midX, y: self.frame.midY)
self.addChild(dw_startButton)

//Instructions Button
let dw_selector = SKSpriteNode()
dw_selector.name = "dw_selector"
dw_selector.zPosition = 1
dw_selector.position = CGPoint(x: self.frame.midX, y: self.frame.midY)
self.addChild(dw_selector)

//Starting text
let startText = SKLabelNode(text: "Play!")
startText.fontColor = UIColor.white
startText.position = CGPoint(x: 50, y: 50)
startText.fontSize = 45
startText.fontName = "Helvetica-Bold"
startText.verticalAlignmentMode = SKLabelVerticalAlignmentMode(rawValue: 1)!
startText.name = "dw_startbutton"
startText.zPosition = 2
dw_startButton.addChild(startText)

//instructions text
let startTexts = SKLabelNode(text: "Insturctions")
startTexts.fontColor = UIColor.white
startTexts.position = CGPoint(x: 0, y: 0)
startTexts.fontSize = 20
startTexts.fontName = "Helvetica-Bold"
startTexts.verticalAlignmentMode = SKLabelVerticalAlignmentMode(rawValue: 1)!
startTexts.name = "dw_selector"
startTexts.zPosition = 2
dw_selector.addChild(startTexts)

//new button
let newButton = SKSpriteNode(imageNamed: "button_back")
newButton.zPosition = 1
newButton.name = "button1"
newButton.position = CGPoint(x: 100, y: 100)
self.addChild(newButton)

let buttonText = SKLabelNode(text: "Play")
buttonText.fontColor = .white
buttonText.fontSize = 20
buttonText.fontName = "Helvetica-Bold"
buttonText.verticalAlignmentMode = .center
buttonText.horizontalAlignmentMode = .center
buttonText.name = "dw_selector"
buttonText.zPosition = 2
newButton.addChild(buttonText)

edited Feb 11 '17 at 22:53

answered Feb 11 '17 at 22:26

Ron Myschuk

6,011
2
20
32

I've updated my answer with zPosition applied to your objects – Ron Myschuk Feb 11 '17 at 22:32
Thank you, Now I understand why I need zPosition – Feb 11 '17 at 22:33
your welcome. FYI if you're following some early examples of SpriteKit they may not have zPosition on their objects, It wasn't until iOS 8 that they made the zPosition required – Ron Myschuk Feb 11 '17 at 22:42
BTW do you know how to center the text on a button? if you look at my .position code you will see. – Feb 11 '17 at 22:44
First thing you can try, is to use... label.verticalAlignmentMode = .center label.horizontalAlignmentMode = .center – Ron Myschuk Feb 11 '17 at 22:47
however, what I would really recommend is that you separate out your button images from the background, and rather than making a blank SKSpriteNode for the button like you are doing I would add the button image. Then add the label to the button image. using the .center alignments and it should work – Ron Myschuk Feb 11 '17 at 22:49
Alright, I will try to do that way. Thanks for the hints. – Feb 11 '17 at 22:51
no probs, I added a small example at the bottom of my answer – Ron Myschuk Feb 11 '17 at 22:53
I certainly wouldn't want to overwhelm you with anything too advanced, but you may want to take a look at my answer here http://stackoverflow.com/questions/42026839/make-touch-area-for-sklabelnode-bigger-for-small-characters/42032549#42032549 In that case I sub-classed the "keys" which are essentially buttons. It makes for more reusable code – Ron Myschuk Feb 11 '17 at 22:57
1

I like advanced stuff. It just gets me to challenge myself. – Feb 11 '17 at 22:58
great attitude! feel free to up-vote my answers if they helped out ;) – Ron Myschuk Feb 11 '17 at 23:00
1

No problem! Anytime. :). I need to have 15 reputations to upvote apprently – Feb 11 '17 at 23:04

How to make text appear on button? -SpriteKit

1 Answers1