【iPhoneアプリ】「cocos2d for iPhone」でゲームアプリを作ってみる(CCActionで色々な動きを表現)

Bookmark this on Livedoor Clip
LINEで送る

今回もcocos2dの記事です。(多分4回目)
CCActionクラスの派生クラスを使ったいくつかのActionを紹介してみます。
本来ならたくさんコードを書かなければいけないような動きも、
cocos2dなら簡単に表現できます!(^ω^)





CCActionクラスとその派生クラス


cocos2dにはオブジェクトを動かす(アクションさせる)為の
CCActionクラスとその派生クラスがたくさん用意されています。

クラス名アクション内容
CCRotateTo指定した角度になるまで回転させる
CCRotateBy現在の角度+指定した角度になるまで回転させる
CCMoveTo指定した座標まで移動させる
CCMoveBy現在の座標+指定した座標まで移動させる
CCScaleTo指定した大きさに変える
CCScaleBy現在の大きさ×指定した大きさに変える
CCBlink点滅させる
CCFadeInフェードインさせる
CCFadeOutフェードアウトさせる
CCFadeInフェードインさせる
CCFadeOutフェードアウトさせる

他にもありますが、とりあえず一例です。
上記のクラスは全てCCActionクラスを基底クラスに持っています。

アクションを実行させたり停止させる時は以下のメソッドを利用します。

メソッド名内容
runAction:(アクション)アクションを適用する
stopAction:(アクション)アクションを停止する
stopAllActions全てのアクションを停止する
フレームワークを使わないで実装するとしたらとても面倒な処理が数行で書けてしまいます。
賢いな、さすがcocos2dかしこい(^ω^)

今回は
  • CCRotateTo
  • CCRotateBy
  • CCMoveTo
  • CCMoveBy
  • CCFadeIn
  • CCFadeOut
この6種類のアクションを紹介してみます。

CCRotateTo、CCRotateByで回転させる


回転に関するアクションです。
CCRotateToは角度になるまで回転、
CCRotateByは現在の角度+指定した角度になるまで回転してくれます。

回転が終わった時にもう一度アクションを実行した場合、
rotateByは再び動き出しますが、
rotateToは指定された角度になっているので動きません。

どちらも回転する時間と角度を指定するだけで使えます。
1// 1秒かけて現在の角度+180°の角度になるまで回転
2CCRotateBy *rotateBy = [CCRotateBy actionWithDuration:1 angle:180];
3[アクション対象 runAction:rotateBy];
4 
5// 1秒かけて180°の角度になるまで回転
6CCRotateBy *rotateTo = [CCRotateTo actionWithDuration:1 angle:180];
7[アクション対象 runAction:rotateTo];



CCMoveTo、CCRotateByで移動させる


移動に関するアクションです。

大体CCRotateの時と同じです。
CCMoveToは指定した座標まで移動、
CCMoveBy は現在の座標+指定した座標まで移動します。

移動する時間と、座標を指定して使います。
1// 1秒かけてx=現在のx座標+100,y= 現在のy座標+100に移動
2CCMoveBy *moveBy = [CCMoveBy actionWithDuration:1 position:ccp( 100, 100 )]; 
3[アクション対象 runAction:moveBy];
4 
5// 1秒かけてx=100,y=100の座標に移動
6CCMoveBy *moveTo = [CCMoveTo actionWithDuration:1 position:ccp( 100, 100 )];
7[アクション対象 runAction:moveTo];



CCFadeIn、CCFadeOutでフェードイン、フェードアウト


フェードイン、フェードアウトに関するアクションです。
じんわりと消えたり現れたりします。

変化する時間を指定するだけです。
1CCFadeIn *fadeIn = [CCFadeIn actionWithDuration:1]; // 1秒かけてフェードイン
2[アクション対象 runAction:fadeIn];
3 
4CCMoveBy *fadeOut = [CCFadeOut actionWithDuration:1]; // 1秒かけてフェードアウト
5[アクション対象 runAction:fadeOut];



サンプルプログラム


-GitHub
github.com/ouka-tenshi/iOS-Sample/tree/master/Cocos2dCCActionSample

上で説明したアクションを使った簡単なサンプルです。
各メニューを押したらCCSpriteが動くだけです。

デフォルトのテンプレートプロジェクトから
HelloWorldLayer.mとHelloWorldLayer.hを修正しています。
修正箇所はinitメソッドと、メニューを押された時のメソッドを追加しています。

・HelloWorldLayer.h
1// HelloWorldLayer
2@interface HelloWorldLayer : CCLayer <GKAchievementViewControllerDelegate, GKLeaderboardViewControllerDelegate>
3{
4    CCSprite *tenko;
5}


・HelloWorldLayer.m
01// on "init" you need to initialize your instance
02-(id) init
03{
04    if( (self=[super init]) ) {
05 
06    // 画面サイズを取得
07    CGSize winSize = [[CCDirector sharedDirector] winSize];
08         
09        // Action対象のスプライト
10        tenko = [CCSprite spriteWithFile:@"tenshi.png"];
11        tenko.position = ccp( winSize.width/2 , winSize.height/2);
12        [self addChild:tenko];
13 
14         
15        // CCActionを実行させる用のメニューを作成
16        [CCMenuItemFont setFontName:@"AppleGothic"];
17        [CCMenuItemFont setFontSize:25];
18        CCMenuItemFont *menu1 = [CCMenuItemFont itemWithString:@"rotateBy"
19                                                        target:self
20                                                      selector:@selector(rotateByAction:)];
21        CCMenuItemFont *menu2 = [CCMenuItemFont itemWithString:@"rotateTo"
22                                                        target:self
23                                                      selector:@selector(rotateToAction:)];
24        CCMenuItemFont *menu3 = [CCMenuItemFont itemWithString:@"moveBy"
25                                                        target:self
26                                                      selector:@selector(moveByAction:)];
27        CCMenuItemFont *menu4 = [CCMenuItemFont itemWithString:@"moveTo"
28                                                        target:self
29                                                      selector:@selector(moveToAction:)];
30        CCMenuItemFont *menu5 = [CCMenuItemFont itemWithString:@"fadeIn"
31                                                        target:self
32                                                      selector:@selector(fadeInAction:)];
33        CCMenuItemFont *menu6 = [CCMenuItemFont itemWithString:@"fadeOut"
34                                                        target:self
35                                                      selector:@selector(fadeoutAction:)];
36        CCMenuItemFont *menu7 = [CCMenuItemFont itemWithString:@"stop"
37                                                        target:self
38                                                      selector:@selector(stopAction:)];
39 
40        CCMenu *menu = [CCMenu menuWithItems:menu1,menu2,menu3,menu4,menu5,menu6,menu7, nil];
41        [menu alignItemsVerticallyWithPadding:10];
42        menu.position = ccp( 100, winSize.height/2  );
43         
44        [self addChild:menu];
45 
46 
47    }
48    return self;
49}
50 
51-(void)rotateByAction:(id)sender{
52    CCRotateBy *rotateBy = [CCRotateBy actionWithDuration:1 angle:180];
53    [tenko runAction:rotateBy];
54}
55-(void)rotateToAction:(id)sender{
56    CCRotateBy *rotateTo = [CCRotateTo actionWithDuration:1 angle:180];
57    [tenko runAction:rotateTo];
58}
59-(void)moveByAction:(id)sender{
60    CCMoveBy *moveBy = [CCMoveBy actionWithDuration:1 position:ccp( 100, 0 )];
61    [tenko runAction:moveBy];
62}
63-(void)moveToAction:(id)sender{
64    CGSize winSize = [[CCDirector sharedDirector] winSize];
65    CCMoveBy *moveTo = [CCMoveTo actionWithDuration:1 position:ccp( winSize.width/2, winSize.height/2 )];
66    [tenko runAction:moveTo];
67}
68-(void)fadeInAction:(id)sender{
69    CCFadeIn *fadeIn = [CCFadeIn actionWithDuration:1];
70    [tenko runAction:fadeIn];
71}
72-(void)fadeoutAction:(id)sender{
73    CCMoveBy *fadeOut = [CCFadeOut actionWithDuration:1];
74    [tenko runAction:fadeOut];
75}
76-(void)stopAction:(id)sender{
77    // すべてのActionを停止
78    [tenko stopAllActions];
79}



【実行結果】
【iPhoneアプリ】「cocos2d for iPhone」でゲームアプリを作ってみる(CCActionで色々な動きを表現):サンプルプログラム




紹介しできなかった他のCCActionのクラスは

cocos2dでつくるiPhoneゲーム―自由で速い、ゲーム用フレームワークを使う! (I・O BOOKS)cocos2dでつくるiPhoneゲーム―自由で速い、ゲーム用フレームワークを使う! (I・O BOOKS)

この本に大体書いてあります。
初心者でもとってもわかりやすいのでおすすめです(`・ω・´)


次回はCCActionを管理?する
 ・CCSequence,
 ・CCSpawn,
 ・CCRepeat,
あたりを紹介します。


       |
       |
 : : :::::::,. -─´、て
::: :: :::Σco===、!,_       CCActionを使えば速度とか角度とかの計算を
: : :: :::::l´i(ノリハノリ)       しなくていいので楽ですね…物理も数学もいらない…
 : : :::::ルlリ⊃⊂ヽ
 : : ::::(( //xxxxヽ、─────────────────
    /~~~
  ./

Bookmark this on Livedoor Clip
LINEで送る

関連記事

【iPhoneアプリ】「cocos2d for iPhone」でゲームアプリを作ってみる(CCActionで色々な動きを表現)” への1件のコメント

  1. ピンバック: 【iPhoneアプリ】「cocos2d for iPhone」でゲームアプリを作ってみる(CCActionを複数使って複雑なアクションを作る) | 桜花満開/テンシホタル