Luiz Luiz - 7 months ago 35
Swift Question

Embed icon beside a SKLabelNode

I was wondering if there's any way to set an icon besides a SKLabelNode (since I need to use

SKAction
to move this label up) like this:

enter image description here

All I found about it was using UILabel (here) or a GitHub project (here), where I can't move or bounce (with SpriteKit-Spring) my label.



I was thinking in create a sprite node with the icon image and set it's position besides the
coinsLabel
, but since this label is used as a coin counter, it would get larger when increased; and the icon would be overlaid.





I made this example project below to make it easier to visualize (it doesn't have the icon, of course. It's only incrementing and moving
coinsLabel
by buttons).

If you want, you can download it here.

import SpriteKit

class GameScene: SKScene {

//Declaration
var coins = Int()
var coinsLabel = SKLabelNode()
var icon = SKSpriteNode()

var incrementButton = SKSpriteNode()
var moveUpButton = SKSpriteNode()

//Setup
func setupCoinLabel(){

//coinsLabel
coinsLabel.position = CGPoint(x: self.frame.width / 2, y: self.frame.height / 1.5)
coinsLabel.setScale(2.0)
coinsLabel.text = "0"
}
func setupIncrementButton(){

//incrementButton
incrementButton = SKSpriteNode(imageNamed: "incrementButton")
incrementButton.position = CGPoint(x: self.frame.width / 2, y: self.frame.height / 3.15)
incrementButton.setScale(2.0)
}
func setupMoveUpButton(){

//moveUpButton
moveUpButton = SKSpriteNode(imageNamed: "moveUpButton")
moveUpButton.position = CGPoint(x: self.frame.width / 2, y: self.frame.height / 5)
moveUpButton.setScale(2.0)
}
func setupIcon(){

//icon
icon = SKSpriteNode(imageNamed: "icon")
icon.position = CGPoint(x: coinsLabel.frame.width / 2, y: 0)
icon.setScale(0.1)
}

override func didMoveToView(view: SKView) {
/* Setup your scene here */

setupCoinLabel()
addChild(coinsLabel)

setupIcon()
coinsLabel.addChild(icon)

setupIncrementButton()
addChild(incrementButton)

setupMoveUpButton()
addChild(moveUpButton)
}

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
/* Called when a touch begins */

//When touch buttons/screen
for touch in touches{

let location = touch.locationInNode(self)
let node = nodeAtPoint(location)

//Increment
if node == incrementButton{

coins += 1
coinsLabel.text = NSString(format: "%i", coins) as String
}
//Move up effect
if node == moveUpButton{

self.coinsLabel.runAction(SKAction.moveTo(CGPoint(x: self.frame.width / 2, y: self.frame.height / 1), duration: 0.5))
}
}
}
}

Answer

Just make a SKSpriteNode and add it as a child to the SKLabelNode, you can always set the SKSpriteNode's position to be to the right of the SKLabel regardless of how many digits are in your label, so overlapping would never happen

//Increment   
        if node == incrementButton{

            coins += 1
            coinsLabel.text = NSString(format: "%i", coins) as String
            icon.position = CGPoint(x: coinsLabel.frame.width / 2, y: 0)

        }