Sunday, June 7, 2015

How To: SKLabelNode Border Outline Quick Hack

Hey guys.

Today I would like to share you a simple hack on SKLabelNode. Since it is a simple snippet, there will be no project to download.

I am making my latest game (FreakOut) and was in need of SKLabelNode with outline. There are some 3rd party codes but I just want a simple and quick hack for it. So I made up this method:




  

-(void)popMessage:(NSString *)str {

    CGFloat fSize = 30*_xMult;
    SKLabelNode *msgLabel = [SKLabelNode labelNodeWithFontNamed:kFontName];
    msgLabel.text = str;
    msgLabel.zPosition = 100;
    msgLabel.horizontalAlignmentMode = SKLabelHorizontalAlignmentModeCenter;
    msgLabel.fontSize = fSize;
    msgLabel.fontColor = [SKColor colorWithRed:1.0 green:0.3 blue:0.3 alpha:1.0];
    msgLabel.position = CGPointMake(_mySize.width/2.0, _mySize.height/2.0);
    [self addChild:msgLabel];
    
    SKAction *enlarge = [SKAction scaleTo:1.5 duration:0.8];
    SKAction *fadeOut = [SKAction fadeAlphaTo:0.5 duration:0.3];
    SKAction *remov = [SKAction removeFromParent];
    
    SKAction *doIt = [SKAction sequence:@[enlarge,fadeOut,remov]];
    
    [msgLabel runAction:doIt];

    // ourlines
    for (int i=1; i<=4; i++) {
        SKLabelNode *outline = [SKLabelNode labelNodeWithFontNamed:kFontName];
        outline.text = str;
        outline.horizontalAlignmentMode = SKLabelHorizontalAlignmentModeCenter;
        outline.fontSize = fSize;
        outline.fontColor = [SKColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0];
        if (i==1)  outline.position = CGPointMake(_mySize.width/2.0-2, _mySize.height/2.0+2);
        if (i==2)  outline.position = CGPointMake(_mySize.width/2.0+2, _mySize.height/2.0+2);
        if (i==3)  outline.position = CGPointMake(_mySize.width/2.0-2, _mySize.height/2.0-2);
        if (i==4)  outline.position = CGPointMake(_mySize.width/2.0+2, _mySize.height/2.0-2);
        [self addChild:outline];
        
        [outline runAction:doIt];
    }
 }

Ok. What I did was add another 4 SKLabelNode BEHIND the main label. Pretty crude but it works.
Positioning is important for each one.

The result:


Not bad eh? Feel free to use the code and improve upon it.

No comments:

Post a Comment