How to fill out an SKLabelNode with a specific color through animation?

215 Views Asked by At

I've been searching the internet for a while now and I couldn't come up with any solution. I've created a SKLabelNode in my SpriteKit project which displays level numbers.

SKLabelNode:

    let levelLbl = SKLabelNode(fontNamed: "LEMON-Bold")
    levelLbl.text = "1"
    levelLbl.fontSize = 100
    levelLbl.fontColor = .grey
    levelLbl.zPosition = 2
    levelLbl.horizontalAlignmentMode = .center
    levelLbl.verticalAlignmentMode = .center
    levelLbl.position = CGPoint(x: frame.midX, y: frame.height * 0.75)
    addChild(levelLbl)

Screenshot: Screenshot of my label

I want to fill up the number of my label smoothly with white color from the bottom to the top with an animation so that after x seconds the label is completely white. I don't want the color to fade in but rather to be filled up similar to a cup of water.

It would be amazing if someone could help me out here!

This is how far I came by using a SKCropNode. My problem is I don't know why I don't see an animation:

 func labelAnimation() {
    let levelLbl = SKLabelNode(fontNamed: "LEMON-Bold")

    let blackRect = SKShapeNode(rectOf: CGSize(width: levelLbl.frame.width, height: levelLbl.frame.height))
    blackRect.fillColor = .grey
    blackRect.strokeColor = .grey
    blackRect.position = CGPoint(x: 0, y: levelLbl.frame.height / 2)

    let whiteRect = SKShapeNode(rectOf: CGSize(width: levelLbl.frame.width, height: levelLbl.frame.height))
    whiteRect.fillColor = .white
    whiteRect.strokeColor = .white
    whiteRect.position = CGPoint(x: 0, y: -levelLbl.frame.height / 2)

    //Level Node
    levelNode.position = CGPoint(x: 0, y: 0)
    levelNode.addChild(blackRect)
    levelNode.addChild(whiteRect)

    //Mask Node
    levelLbl.text = "\(levelNr)"
    levelLbl.fontSize = 100
    levelLbl.horizontalAlignmentMode = .center
    levelLbl.verticalAlignmentMode = .center

    //Crop Node
    cropNode.addChild(levelNode)
    cropNode.maskNode = levelLbl
    cropNode.position = CGPoint(x: frame.midX, y: frame.midY)
    cropNode.zPosition = 5
    addChild(cropNode)

    //action
    let movelevelNode = SKAction.move(to: CGPoint(x: 0, y: frame.height / 3), duration: 8)
    levelNode.run(movelevelNode)
}
0

There are 0 best solutions below