cocos2dサンプル:ActionTestの内容(1)  2010年7月13日

cocos2dのサンプルを勉強がてら読みといていくメモです。テストコードのActionTestを読んでいってみます。全体の流れは他のテストと同じみたいなので個別の部分を読んでみます。

ActionTest.hを見る

  • CCLayerを継承したActionDemoクラスが宣言され、それを継承した形で幾つかのテスト用のクラスが用意されている。
  • ActionDemoクラスにはCCSprite型のメンバ変数が用意されていて、共通で利用するスプライトを保持する用になっている。
  • ActionDemoクラスにはcenterSpritesメソッドが宣言されていて(ActionTest.mを見るともう一つalignSpritesLeftメソッドもある)スプライトの一の初期化をテストにあわせて実施する内容が書かれている。

ざっと目を通すとこんな感じです。

ActionTest.mを見てゆく

ActionDemoクラス

initメソッド

initメソッドでは他のテスト同様にメインのLayerクラスとしてメニュー機能などを提供していますが、差分だけピックアップすると


CCTexture2D *tex = [ [CCTexture2D alloc] initWithImage: [UIImage imageWithContentsOfFile: [[CCConfiguration sharedConfiguration].loadingBundle pathForResource:@"grossini.png" ofType:nil] ] ];
grossini = [[CCSprite spriteWithTexture:tex] retain];
[tex release];

grossiniスプライトを例にしてCCTexture2Dでスプライトを宣言するサンプルになっています。ただ動かすだけであればspriteWithFileなどで宣言しても変わらないです。Texture2Dで出来る事はTexture2Dのテストプログラムがあるようなので、その時調べて整理したいと思います。

ここでは、CCTexture2Dのインスタンスを作って、CCSpriteを生成し、textureをreleaseしています。

iPhoneSDKでは、暗黙の了解で、alloc,initなどで始まるメソッドで生成されるインスタンスはautoreleaseがかかっていないので、このように明示的にretainしてreleaseするか、autorelease必要があります。

tamara = [[CCSprite spriteWithFile:@"grossinis_sister1.png"] retain];
kathia = [[CCSprite spriteWithFile:@"grossinis_sister2.png"] retain];

その他のスプライトも生成します。spriteWithfileは内部でautoreleaseしているのでreleaseする必要はありません。

[self addChild:grossini z:1];
[self addChild:tamara z:2];
[self addChild:kathia z:3];

それぞれのスプライトをレイヤにセットします。zはzindexで、重なりを示します。ここでは前面から順にkathia,tamara,grossiniの順で表示されています。

CGSize s = [[CCDirector sharedDirector] winSize];
[grossini setPosition: ccp(s.width/2, s.height/3)];
[tamara setPosition: ccp(s.width/2, 2*s.height/3)];
[kathia setPosition: ccp(s.width/2, s.height/2)];

画面のサイズを取得して、それぞれのスプライトの位置を指定しています。

alignSpritesLeftメソッド、centerSpritesメソッド

テストレイヤクラスから呼び出される位置の初期化メソッドのようです。

引数に「numberOfSprites」をとり、その値が1,2,3のいずれかによりスプライトの位置を調整しています。

if( numberOfSprites == 1 ) {
    tamara.visible = NO;
    kathia.visible = NO;
    [grossini setPosition:ccp(60, s.height/2)];
} else if( numberOfSprites == 2 ) {
    [kathia setPosition: ccp(60, s.height/3)];
    [tamara setPosition: ccp(60, 2*s.height/3)];
    grossini.visible = NO;
} else if( numberOfSprites == 3 ) {
    [grossini setPosition: ccp(60, s.height/2)];
    [tamara setPosition: ccp(60, 2*s.height/3)];
    [kathia setPosition: ccp(60, s.height/3)];
} else {
    CCLOG(@"ActionsTests: Invalid number of Sprites");
}

ActionManualクラス

アニメーションではなく固定でスプライトの表示を変更する例です。

initではなくonEnterメソッドで実装されています。onEnterはinitより後に実行されます。

それぞれの意味は、な見るとわかりそうですが

tamara.scaleX = 2.5f;
tamara.scaleY = -1.0f;
tamara.position = ccp(100,70);
tamara.opacity = 128;
  • scaleX: 横方向の拡大
  • scaleY: 縦方向の拡大
  • position: 表示位置の変更
  • opacity: 透過率の変更
grossini.rotation = 120;
grossini.position = ccp(s.width/2, s.height/2);
grossini.color = ccc3( 255,0,0);
  • rotation: 回転
  • color: 色

※ccc3はccColor3B構造体を返すメソッドです。

kathia.position = ccp(s.width-100, s.height/2);
kathia.color = ccBLUE;

※ccBLUEの他に、カラー用の定数は以下が定義されていました。

  • ccWHITE={255,255,255}
  • ccYELLOW={255,255,0}
  • ccBLUE={0,0,255}
  • ccGREEN={0,255,0}
  • ccRED={255,0,0}
  • ccMAGENTA={255,0,255}
  • ccBLACK={0,0,0}
  • ccORANGE={255,127,0}
  • ccGRAY={166,166,166}

原色系なので、テキスト等の色付けに利用といった感じかもしれません。アプリの色調などを利用するのに、予め

static const ccColor3B ccHogehoge={?,?,?};

等をヘッダファイルなどで定義して色を一気に変更できるようにしてもいいかもしれません。

ActionMoveクラス

スプライトを移動させるアニメーションのテストです。


id actionTo = [CCMoveTo actionWithDuration: 2 position:ccp(s.width-40, s.height-40)];

2秒間で画面の右下40pxへ移動するアクションを定義


id actionBy = [CCMoveBy actionWithDuration:2  position: ccp(80,80)];

2秒間で画面右上80pxの速度で移動するアクションを定義


id actionByBack = [actionBy reverse];

actionByの逆向きのアクションを定義する。

※アクションの逆向きの移動は[アクション reverse]の形で定義できる。


[tamara runAction: actionTo];
 [grossini runAction: [CCSequence actions:actionBy, actionByBack, nil]];
 [kathia runAction:[ CCMoveTo actionWithDuration:1 position:ccp(40,40)]];

定義したアクションをそれぞれのスプライトへセットする。

アクションシーケンスをセットする際にアクションの最後は「nil」を指定する。

ActionRotateクラス

スプライトを回転させるテスト。

id actionTo = [CCRotateTo actionWithDuration: 2 angle:45];

2秒かけて45度へ回転するアクション

id actionTo2 = [CCRotateTo actionWithDuration: 2 angle:-45];

2秒かけて−45度へ回転するアクション


id actionTo0 = [CCRotateTo actionWithDuration:2  angle:0];

2秒かけて0度へ回転するアクション

[tamara runAction: [CCSequence actions:actionTo, actionTo0, nil]];

tamaraスプライト45度へ回転し0度へ回転するアクションをセットする。

id actionBy = [CCRotateBy actionWithDuration:2  angle: 360];

2秒かけて1回転するアクション

id actionByBack = [actionBy reverse];

actionByの逆(2秒かけて逆回転で1回転するアクション)

[grossini runAction: [CCSequence actions:actionBy, actionByBack, nil]];

アクションをgrossiniスプライトへセット

[kathia runAction: [CCSequence actions:actionTo2, [[actionTo0 copy] autorelease], nil]];

kathiaスプライトへアクションをセット

※actionTo0を再利用するために、コピーして利用している。コピーされたオブジェクトはautoreleaseがかかっていないため、autoreleaseを記載している。

ActionScaleクラス

スプライトのサイズを変化させるアニメーションのテスト

id actionTo = [CCScaleTo actionWithDuration: 2 scale:0.5f];

2秒かけて0.5倍のサイズへ変化するアニメーション

id actionBy = [CCScaleBy actionWithDuration:2  scale: 2];

2病かけて2倍のサイズへ変化するアニメーション

id actionBy2 = [CCScaleBy actionWithDuration:2 scaleX:0.25f scaleY:4.5f];

2秒かけて横0.25倍、縦4.5倍へ変化するアニメーション

id actionByBack = [actionBy reverse];

actionByの逆(2秒かけて元のサイズに戻る)のアニメーション

[tamara runAction: actionTo];
[grossini runAction: [CCSequence actions:actionBy, actionByBack, nil]];
[kathia runAction: [CCSequence actions:actionBy2, [actionBy2 reverse], nil]];

それぞれのアニメーションをスプライトへセット

ActionJumpクラス

スプライトをジャンプしながら指定の位置へ移動させるアニメーションのテスト

id actionTo = [CCJumpTo actionWithDuration:2 position:ccp(300,300) height:50 jumps:4];

相対位置縦横300px先へ2秒間、4回、高さ50pxのジャンプで移動する。

id actionBy = [CCJumpBy actionWithDuration:2 position:ccp(300,0) height:50 jumps:4];

相対位置横300pxへ2秒間かかるスピードで、高さ50px、4回のジャンプで移動する。

id actionUp = [CCJumpBy actionWithDuration:2 position:ccp(0,0) height:80 jumps:4];

現在位置で、2秒間かかるスピードで、高さ50px、4回のジャンプをする。

[tamara runAction: actionTo];
[grossini runAction: [CCSequence actions:actionBy, actionByBack, nil]];

それぞれのアクションをスプライトへセットする。

[kathia runAction: [CCRepeatForever actionWithAction:actionUp]];

kathiaへactionUpを繰り返す形でセットする。(別で指定するまで実行し続ける)

ActionBezierクラス

ベジェ曲線を描いて移動するアニメーションのテスト

ccBezierConfig bezier;

ベジェ曲線を定義する方向点、終了の端点を保持する構造体を初期化

bezier.controlPoint_1 = ccp(0, s.height/2);
 bezier.controlPoint_2 = ccp(300, -s.height/2);
 bezier.endPosition = ccp(300,100);

2つの方向点、と終了の端点を定義

id bezierForward = [CCBezierBy actionWithDuration:3 bezier:bezier];

セットしたベジェ曲線を3秒で移動するアニメーションを定義

id bezierBack = [bezierForward reverse];

同じベジェ曲線を逆にたどるアニメーションを定義

id seq = [CCSequence actions: bezierForward, bezierBack, nil];

ベジェ曲線、逆向きベジェ曲線と連続で移動するアニメーションシーケンスを定義

id rep = [CCRepeatForever actionWithAction:seq];

設定したアニメーションシーケンスを永遠に実行するシーケンスを定義

[tamara setPosition:ccp(80,160)]; // tamaraの初期位置を設定
ccBezierConfig bezier2;   // ベジェ曲線定義用構造体初期化
bezier2.controlPoint_1 = ccp(100, s.height/2); // 方向点を定義
bezier2.controlPoint_2 = ccp(200, -s.height/2); // 方向点を定義
bezier2.endPosition = ccp(240,160); // 終了点を定義

// 定義したベジェ曲線を2秒間で実行するアニメーションシーケンスを定義
id bezierTo1 = [CCBezierTo actionWithDuration:2 bezier:bezier2];

[kathia setPosition:ccp(400,160)]; // スプライトkathiaの初期位置を設定

//定義してあるベジェ曲線を2秒間で実行するアニメーションシーケンスを定義
id bezierTo2 = [CCBezierTo actionWithDuration:2 bezier:bezier2];

// それぞれのアニメーションをスプライトへセット
[grossini runAction: rep];
[tamara runAction:bezierTo1];
[kathia runAction:bezierTo2];

ActionBlinkクラス

スプライトを点滅させるアニメーションのテスト

// 2秒間で10回点滅するアクションを定義
id action1 = [CCBlink actionWithDuration:2 blinks:10];
// 2秒間で5回点滅するアクションを定義
id action2 = [CCBlink actionWithDuration:2 blinks:5];
// 定義したアクションをスプライトへセット
[tamara runAction: action1];
[kathia runAction:action2];

ActionFadeクラス

Fadein、Fadeoutするアニメーションのテスト

// スプライトtamaraのopacityを0に初期化
tamara.opacity = 0;

// 1秒間でフェードインするアニメーションを定義
id action1 = [CCFadeIn actionWithDuration:1.0f];

// 定義したアニメーションを逆向きに実行するアニメーションを定義
id action1Back = [action1 reverse];

// 1秒間でフェードアウトするアニメーションを定義
id action2 = [CCFadeOut actionWithDuration:1.0f];

// 定義したアニメーションを逆向きに実行するアニメーションを定義
id action2Back = [action2 reverse];
// 定義したアニメーションをスプライトへ適用
[tamara runAction: [CCSequence actions: action1, action1Back, nil]];
[kathia runAction: [CCSequence actions: action2, action2Back, nil]];

ActionTintクラス

色合いを変化させるアニメーションのテスト

// 2秒で紫(赤と青を強くする)の色合いをつけるアニメーションを定義
id action1 = [CCTintTo actionWithDuration:2 red:255 green:0 blue:255];
// 2秒で指定した色を減色するアニメーションを定義
id action2 = [CCTintBy actionWithDuration:2 red:-127 green:-255 blue:-127];
// 定義したアニメーションを逆向きに実行するアニメーションを定義
id action2Back = [action2 reverse];

// 定義したアニメーションをスプライトへセット
[tamara runAction: action1];
[kathia runAction: [CCSequence actions: action2, action2Back, nil]];

ActionAnimateクラス

スプライトの画像を切り替えてアニメーションするテスト

// アニメーション定義クラスのインスタンス化
CCAnimation* animation = [CCAnimation animationWithName:@"dance"];

// 1〜15でループ
 for( int i=1;i<15;i++)
    // 予め用意したgrossini_dance_%02d.pngを各フレームとしてアニメーション画像登録
    [animation addFrameWithFilename: [NSString stringWithFormat:@"grossini_dance_%02d.png", i]];
// 3秒間で定義したアニメーションを実行するアクションを定義、実行後は最後のフレームで停止
id action = [CCAnimate actionWithDuration:3 animation:animation restoreOriginalFrame:NO];

// 逆向きに実行するアニメーションを定義
id action_back = [action reverse];
// 定義したアニメーションをスプライトへセット
[grossini runAction: [CCSequence actions: action, action_back, nil]];

ActionSequence、ActionSequence2クラス

複数のアニメーションを連続して実行するテスト

// 複数のアクションを連続したシーケンスとして定義
id action = [CCSequence actions:
   [CCPlace actionWithPosition:ccp(200,200)],
   [CCShow action],
   [CCMoveBy actionWithDuration:1 position:ccp(100,0)],
   [CCCallFunc actionWithTarget:self selector:@selector(callback1)],
   [CCCallFuncN actionWithTarget:self selector:@selector(callback2:)],
   [CCCallFuncND actionWithTarget:self selector:@selector(callback3:data:) data:(void*)0xbebabeba],
   nil];
// 定義したアクションをセット
[grossini runAction:action];

ActionSpawnクラス

複数のアクションを同時に実行するテスト

// ジャンプと回転を同時に実行するアクションをセット
id action = [CCSpawn actions:
 [CCJumpBy actionWithDuration:2 position:ccp(300,0) height:50 jumps:4],
 [CCRotateBy actionWithDuration: 2 angle: 720],nil];

 [grossini runAction:action];

ActionRepeatForeverクラス

アクションを永遠に繰り返すテスト


// 1秒間停止した後、repearForeverメソッドを呼び出すアクションを定義

id action = [CCSequence actions:
 [CCDelayTime actionWithDuration:1],
 [CCCallFuncN actionWithTarget:self selector:@selector(repeatForever:)],nil];
 // アクションをスプライトへセット
 [grossini runAction:action];

repeatForeverメソッド:

// 3秒で360度回転するアクションを永遠に実行するアクションを定義
[CCRepeatForever *repeat = [CCRepeatForever actionWithAction: [CCRotateBy actionWithDuration:1.0f angle:360]];

// スプライトへ定義したメソッドをセット
[sender runAction:repeat];

長いので続きは次回、、、

このエントリをはてなブックマークに登録 このエントリをBuzzurlにブックマーク Yahoo!ブックマークに登録 このエントリをlivedoorクリップに登録 Deliciousにブックマーク

コメントなし

コメントを投稿