Embed icon beside a SKLabelNode

Question

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:

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 icon = SKSpriteNode()
    var coins = Int()
    var coinsLabel = SKLabelNode()

    var incrementButton = SKSpriteNode()

    //Setup
    func setupIcon(){

        //icon
        icon = SKSpriteNode(imageNamed: "icon")
        icon.position = CGPoint(x: self.frame.width / 1.45, y: self.frame.height / 1.075)
        icon.setScale(0.1)
    }
    func setupCoinsLabel(){

        //coinsLabel
        coinsLabel.position = CGPoint(x: self.frame.width / 150 - 300, y: 0)
        coinsLabel.setScale(12.5)
        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)
    }

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

        setupIcon()
        addChild(icon)

        setupCoinsLabel()
        icon.addChild(coinsLabel)

        setupIncrementButton()
        addChild(incrementButton)
    }

    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
                coinsLabel.position = CGPoint(x: self.frame.width / 150 - coinsLabel.frame.width, y: 0)
            }
        }
    }
}

Knight0fDragon · Accepted Answer · 2016-05-09T03:19:24.517

6

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)

        }

edited May 09 '16 at 03:19

answered May 09 '16 at 02:45

Knight0fDragon

16,609
2
23
44

When I try to add the icon without changing it's position, it will overlap `coinLabel`, but when I try to set icon's position besides coinLabel, it doesn't show up. I don't know why. I edited the post with the new code. – Luiz May 09 '16 at 03:04
don't set x position at self.width/2, set at label.width/2,and set your y at 0 – Knight0fDragon May 09 '16 at 03:06
it's now showing up, but when `coinsLabel` has more than 1 digit, it overlaps the icon. I edited the code. – Luiz May 09 '16 at 03:16
when you resize the label, you need to move the sprite, it is not automatic – Knight0fDragon May 09 '16 at 03:17
I'm trying to make the `icon`'s position locked and the `coinsLabel`'s position go to the left when it increases. So as you've added icon as a child of `coinsLabel`, I added the label as a child of `icon`, this way I could set a position to the icon and the label should move to the left when increased, but it isn't working. – Luiz May 09 '16 at 22:00
As a test, I tried to subtract the icon's width from half of the screen's width, so the label should be positioned to the left of the icon, since the icon is in the middle (it was a test. Later I'd try to move it to the superior right of the screen). I updated the code. – Luiz May 09 '16 at 22:01
I managed to make label be repositioned to the left when increased, but the distance between the label and the icon is also increasing. So if the label gets to 1000, for example, it has been moved so much to the left that won't be beside the icon anymore. Both the icon and the label are positioned at the superior right of the screen at the initial position. I updated the code =) – Luiz May 11 '16 at 00:43
This is not a hard problem, im not telling you the answer because then you wont learn – Knight0fDragon May 11 '16 at 00:51
I understand it. I'm gonna try to do it again =) – Luiz May 11 '16 at 00:53

Embed icon beside a SKLabelNode

1 Answers1