[iOS 7] Sprite Kit の SKLabelNode で colorize してみた

[iOS 7] Sprite Kit の SKLabelNode で colorize してみた

Clock Icon2013.09.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

SKLabelNode で SKAction の colorizeWithColor を使うとうまく動いてくれません。。
そもそもこのアクションは、SKSpriteNode オブジェクトで実行できるアクションのようです。
(メソッドのDescriptionに書いてありました。)
そこで今回は少し無理矢理な方法を使い、SKLabelNode で colorizeWithColor を実現してみました。

実装

手順は以下です。
1. SKLabelNode から SKSpriteNode を生成する。
2. 1で生成した SKSpriteNode で colorize を実行する。
3. SKSpriteNode を削除して元のラベルを表示する。

ではやってみます。

#import "CMMyScene.h"

@implementation CMMyScene

-(id)initWithSize:(CGSize)size {
    if (self = [super initWithSize:size]) {
        [self addTestLabel];
    }
    return self;
}

- (void)addTestLabel
{
    // ラベルを生成します。
    SKLabelNode *testLbl = [SKLabelNode labelNodeWithFontNamed:@"Arial Bold"];
    testLbl.name = @"testLbl";
    testLbl.text = @"TEST";
    testLbl.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
    [self addChild:testLbl];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // ラベルを取得し、アクションを実行します。
    SKLabelNode *testLbl = (SKLabelNode *)[self childNodeWithName:@"testLbl"];
    [self runActionColorize:testLbl];
}

- (void)runActionColorize:(SKLabelNode *)labelNode
{
    // colorizeのためsprite化します。
    SKTexture *labelTexture = [self.view textureFromNode:labelNode];
    SKSpriteNode *spriteNode = [SKSpriteNode spriteNodeWithTexture:labelTexture
                                                              size:labelNode.frame.size];
    spriteNode.anchorPoint = CGPointZero;
    spriteNode.position = labelNode.frame.origin;
    [self addChild:spriteNode];
    
    // colorizeを実行します。
    SKAction *colorizeBlue =
    [SKAction sequence:
     @[
       [SKAction colorizeWithColor:[UIColor blueColor] colorBlendFactor:1 duration:0.25],
       [SKAction colorizeWithColorBlendFactor:0 duration:1],
       [SKAction removeFromParent] // 削除して元のラベルが見えるようにします。
       ]];
    [spriteNode runAction:colorizeBlue];
}

@end

これでサンプル完成です。画面をタッチしたときにアクションを実行します。
意外にもポジション指定で少し悩みました。。

動作確認

では動かしてみます。

ios7_spritekit_sklabelnode_colorize_01

ios7_spritekit_sklabelnode_colorize_02

はい。色が変わりました。
もっと簡単な方法がありそうな気がしましたが、調査不足とアイデア不足で、とりあえず思いついた方法で作ってみました。
その内、バージョンアップでしれっとできるようになってるかもしれませんが。。。

ではでは。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.