Search code examples
iosswiftsprite-kit2d-games

Replace numbers with custom made numbers SpriteKit


Im a bit lost and looking for a way to make my score numbers appear like flappy bird numbers. I have all the images ready for each number but do not know how to do this.

var scoreLabel: SKLabelNode!


 override init(size: CGSize){
    super.init(size: size)

    GameHandler.sharedInstance.score = 0


   scorelabelhud()
}

func scorelabelhud() {
    scoreLabel = SKLabelNode(fontNamed: "bubblefont.ttf")
    scoreLabel.fontSize = 80
    scoreLabel.fontColor = SKColor.blackColor()
    scoreLabel.position = CGPoint(x: self.size.width / 2, y: self.size.height-110)

    scoreLabel.text = "0"
    self.addChild(scoreLabel)
}

a busy cat ![two muppets][1]


Solution

  • First thing, you can't use SKLabelNode here. I mean, you can create your custom font and then use it, but obviously, you only have images for each number. So create your numbers atlas and name your textures like [email protected], [email protected]@2x.png.

    Then create a property called textures to store textures for each number. Next step would be to split a certain number to its digits. Means to split a number 230, into numbers 2,3 and 0. Later on, based on each digit, you create a SKSpriteNode with appropriate value and position it accordingly.

    Here is an example which can give you a starting point:

    import SpriteKit
    
    class GameScene: SKScene{
    
        var textures:[SKTexture] = []
    
        override func didMoveToView(view: SKView) {
    
            let atlas = SKTextureAtlas(named: "numbers")
    
            for i in 0...9 {textures.append(atlas.textureNamed("\(i)"))}
    
            createSprites(fromNumber: 230)
    
        }
    
        func createSprites(fromNumber number:Int){
    
            //Create an array of digits (of type Int)
            //flatMap will return an array containing the non-nil results of mapping
            let digits = String(number).characters.flatMap { Int(String($0)) }
    
            var i = 0
            for number in digits {
    
                if let sprite = createSprite(fromNumber: number) {
    
                    //Do your positioning stuff here. I just placed nodes at the center of the screen
                    sprite.position = CGPoint(x:frame.midX, y:frame.midY)
                    sprite.position.x += CGFloat(i++) * sprite.size.width
    
                    addChild(sprite)
                }
            }
        }
    
        func createSprite(fromNumber number:Int)->SKSpriteNode? {
            //Check if number is in allowed range ( 0 - 9 )
            guard 0...9 ~= number else { return nil}
    
            //You can setup your sprite here instead of just returning it
    
            return SKSpriteNode(texture: textures[number])
    
        }
    }
    

    I assumed that your scene has the same size as your view, so if that is the case, you can just copy/paste this code and run it to see how it works (it will make three separate SKSpriteNodes and number 230 will be formed).