cocos2dでアクションを使う – イージング効果をつける.
前回、cocos2dでアクションを使う方法を解説しました。
今回はもう少しアクションをかっこ良く見せる、イージングについて解説しようと思います。
CCMoveToやCCScaleByといったアクションは開始から終わりまで一定の変化量で実行されます。したがって、このまま使うとあまり自然なアクションになりません。
cocos2dではより自然な動きを作るためにアクションにイージング効果をつけることができます。
実際にCCMoveByにイーズイン効果をつけてみましょう。イーズインとは最初が緩やかで、後になるほど早くなる効果です。
-(id) init
{
if( (self=[super init]) )
{
CGSize wSize = [[CCDirector sharedDirector] winSize];
CCSprite* circle1 = [CCSprite spriteWithFile:@"bb_pic01.png"];
circle1.position = ccp(0, wSize.height / 2);
[self addChild:circle1];
CCMoveBy* moveBy = [CCMoveBy actionWithDuration:5 position:ccp(300, 0)];
CCEaseIn* easeIn = [CCEaseIn actionWithAction:moveBy rate:5];
[circle1 runAction:easeIn];
}
return self;
}
12行目でCCEaseInオブジェクトを作り、’actionWithAction’でmoveByにイージングを適応しています。’rate’は動作の緩急を設定するパラメータです。1が一定速度で数値を高くするほど、最初がゆっくりで、最後が早い動作になります。
例えばこれをCCEaseOutにするとInの逆で、アクションの初めが早く、最後になるにつれゆっくりになります。また、CCEaseInOutはアクションの真ん中が最も早くなるポイントになります。
これらのイージング効果にもアクションと同様に様々なバリエーションが用意されており、クラス名は”CCEase…”で始まります。これらのバリエーションも大きく分けるとイージングタイプとバウンスタイプに分けられます。
イージングタイプ
- CCEaseIn、CCEaseOut、CCEaseInOut
- CCEaseExponentialIn、CCEaseExponentialOut、CCEaseExponentialInOut
- CCEaseSineIn、CCEaseSineOut、CCEaseSineInOut
これらはそれぞれ、加速の度合いが違います。EaseIn系はパラメータで設定できますが、ExponentialとSine系は変化の割合が決まっており、Exponentialのほうが緩急の差が大きいです。
バウンスタイプ
- CCEaseElasticIn、CCEaseElasticOut、CCEaseElasticInOut
- CCEaseBounceIn、CCEaseBounceOut、CCEaseBounceInOut
- CCEaseBackIn、CCEaseBackOut、CCEaseBackInOut
バウンスタイプは始点や終点にバウンドするような効果をつけます。例えばCCMoveToにElasticIn効果をつけた場合、始点の位置から前に行ったり後ろに行ったりという伸縮動作を少し行なってから、勢い良く移動します。
これがBounceInの場合は、後ろに行く動作はせず、前へのジャンプを何度か行い、勢い良く移動します。
最後のBackInの場合は後ろに助走をつけるように少し下がり、その後勢い良く移動します。
どれも少しずつ動作は違いますが躍動感のあるアクションを付けることが可能です。
cocos2dではこのようにオブジェクトに適した効果をつけることで、より自然なアクションを実現できるようになっています。
今回はここまで。次回はアクションの応用編です。
