Sklabelnode Text with Two Different Fonts and Colour. How Is This Possible

SKLabelNode text with two different fonts and colour. How is this possible?

You cannot set two fonts to the same SKLabelNode instance. Instead you can write subclasses to create a custom node which contains multiple SKLabelNodes with different font sizes. For example, Your scoreLabel can be an instance of the following class.

class ScoreLabel : SKNode
{
    var label : SKLabelNode!
    var scoreLabel : SKLabelNode!

    var score : Int = 0 {
        didSet
        {
            scoreLabel.text = "\(score)"
        }
    }

    override init() {
        super.init()
        label = SKLabelNode(text: "Score : ")
        label.position = CGPointMake(0, 0)
        label.fontSize = 20
        addChild(label)

        scoreLabel = SKLabelNode(text: "\(0)")
        scoreLabel.position = CGPointMake(label.frame.size.width , 0)
        scoreLabel.fontSize = 25
        addChild(scoreLabel)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

}

Using ScoreLabel class

let scoreLabel = ScoreLabel()
scoreLabel.position = CGPointMake(100, 300)
scoreLabel.score = 10
self.addChild(scoreLabel)

The two labels in ScoreLabel acts as a single SKNode from the outside.
SKActions can be executed on the ScoreLabel and it will affect both the child label nodes. For instance

    scoreLabel.runAction(SKAction.scaleTo(2.0, duration: 2.0))

This will scale both labels together as a single unit.

Applying different colors to certain parts of SKLabelNode's text

As of iOS 11, SKLabelNode supports NSAttributedStrings, so ASAttributedLabelNode should no longer be necessary. Your code would look like:

NSMutableAttributedString * newString = [[NSMutableAttributedString alloc] initWithString:@"firstsecondthird"];
    [newString addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0,5)];
    [newString addAttribute:NSForegroundColorAttributeName value:[UIColor greenColor] range:NSMakeRange(5,6)];
    [newString addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(11,5)];

labelNode.attributedText = newString;

SKLabelNode upside down possible?

You can create a custom class to loop through each character in the string and create a separate SKLabelNode for each character.

class SKVerticalLabelNode : SKNode
{
    var fontName : String = "" {
        didSet {
            self.updateLabelProperties()
        }
    }

    var fontSize : CGFloat = 10.0 {
        didSet {
            self.updateLabelProperties()
        }
    }

    var fontColor : UIColor = UIColor.whiteColor() {
        didSet {
            self.updateLabelProperties()
        }
    }

    var text : String = "" {
        didSet {
           self.updateLabelProperties()
        }
    }

    func updateLabelProperties () {
        self.removeAllChildren()
        let length = countElements(text)
        var yPosition : CGFloat = 0
        for character in reverse(text) {
            let label = SKLabelNode(fontNamed: self.fontName)
            label.fontColor = self.fontColor
            label.fontSize = self.fontSize
            label.text = String(character)
            label.position = CGPointMake(0, yPosition)
            yPosition += label.frame.size.height
            addChild(label)
        }
    }
}

It can be used like this

let scoreLabel = SKVerticalLabelNode()
scoreLabel.fontName = "TrebuchetMS-Bold"
scoreLabel.text = "2500"
scoreLabel.fontSize = 30
scoreLabel.fontColor = UIColor.redColor()
scoreLabel.position = CGPoint(x:180, y:180)
addChild(scoreLabel)

What would be the best approach for outlining or dropshadowing a font?

This is most likely what you are doing, but it works and is simple.

- (SKLabelNode *) makeDropShadowString:(NSString *) myString
{
    int offSetX = 3;
    int offSetY = 3;

    SKLabelNode *completedString = [SKLabelNode labelNodeWithFontNamed:@"Arial"];
    completedString.fontSize = 30.0f;
    completedString.fontColor = [SKColor yellowColor];
    completedString.text = myString;

    SKLabelNode *dropShadow = [SKLabelNode labelNodeWithFontNamed:@"Arial"];
    dropShadow.fontSize = 30.0f;
    dropShadow.fontColor = [SKColor blackColor];
    dropShadow.text = myString;
    dropShadow.zPosition = completedString.zPosition - 1;
    dropShadow.position = CGPointMake(dropShadow.position.x - offSetX, dropShadow.position.y - offSetY);

    [completedString addChild:dropShadow];

    return completedString;
}

Will try and make outline one as well... but I have a feeling it'll be more tricky... there must be a way to use bitmap fonts .. ??? bmGlyph ...

---

Related Topics