【Cocos2d-x】３次元的表現でアニメーション再生してみよう

今回のエンジニアブログを担当する大原です。
Cocos2d-xでゲームを作っている中で、もっと３次元的なアニメーションをさせたいと思うことはありませんか。
そんなときに活躍するCCGrid3DActionクラスを紹介したいと思います。

[2D設定で可能なアニメーション]

3次元的に波を立たせる

/**  
 * CCWaves3D::create(time,GridSize,count,stroke)  
 * time = アニメーション時間  
 * GridSize = (X方向の分割数、Y方向の分割数)  
 * count = 振幅回数  
 * stroke = 振幅幅  
 */
m_blogSprite->runAction(
    CCWaves3D::create(3.0f, CCSizeMake(1, 25), 10, 100)
);

どちらかの方向のみ揺らしたい場合、GridSizeのX、Yどちらかに1を指定することで固定することができます。

2次元的に波を立たせる

CCWaves3Dとの違いは、奥行きの波が無いことです。

/**  
 * CCWaves::create(time,GridSize,count,stroke,xflg,yflg)  
 * time = アニメーション時間  
 * GridSize = (X方向の分割数、Y方向の分割数)  
 * count = 振幅回数  
 * stroke = 振幅幅  
 * xflg = 縦の揺らぎを設定する  
 * yflg = 横の揺らぎを設定する  
 */
m_blogSprite->runAction(
    CCWaves::create(2.0f, CCSizeMake(25, 25), 5, 50, true, true)
);

３次元的に反転させる

/**  
 * CCFlipX3D::create(time)  
 * time = アニメーション時間  
 */
m_blogSprite->runAction(
    CCFlipX3D::create(3.0f)
);

CCFlipXとの違いはアニメーションして反転するかしないかの違いです。

ポリゴン単位でシェイクする

/**  
 * CCShaky3D::create(time,GridSize,count,zShake)  
 * time = アニメーション時間  
 * GridSize = (X方向の分割数、Y方向の分割数)  
 * count = シェイク回数  
 * zShake = Z軸のシェイク有無  
 */
m_blogSprite->runAction(
    CCShaky3D::create(2.0f, CCSizeMake(25, 25), 30, true)
);

液体を揺らすアニメーション

/**  
 * CCLiquid::create(time,GridSize,count,stroke)  
 * time = アニメーション時間  
 * GridSize = (X方向の分割数、Y方向の分割数)  
 * count = 振幅回数  
 * stroke = 振幅幅  
 */
m_blogSprite->runAction(
    CCLiquid::create(2.0f, CCSizeMake(25, 25), 3, 50)
);

左右にねじれるアニメーション

/**  
 * CCTwirl::create(time,GridSize,point,count,strokeRate)  
 * time = アニメーション時間  
 * GridSize = (X方向の分割数、Y方向の分割数)  
 * point = 絶対座標(X,Y)  
 * count = ねじれ回数  
 * strokeRate = 回転レート  
 */
m_blogSprite->runAction(
    CCTwirl::create(2.0f, CCSizeMake(100, 100), ccp(320,240), 2, 1)
);

ねじれ回数を指定すると回転レート最大値まで回転した後逆回転します。

右下から左上にページをめくる

/**  
 * CCPageTurn3D::create(time,GridSize)  
 * time = アニメーション時間  
 * GridSize = (X方向の分割数、Y方向の分割数)  
 */
m_blogSprite->runAction(
    CCPageTurn3D::create(2.0f, CCSizeMake(100, 100))
);

右下から左上にページをめくる方向のパターンしかないです。

[3D設定が必須なアニメーション]

以下二つは、設定を変更することで、アニメーション可能になります。

    //3Dアニメーションを再生する  
    CCDirector::sharedDirector()->setProjection(kCCDirectorProjection3D);

レンズで拡大させる

/**  
 * CCLens3D::create(time,GridSize,point,radius)  
 * time = アニメーション時間  
 * GridSize = (X方向の分割数,Y方向の分割数)  
 * point = 絶対座標(X,Y)  
 * radius = 半径  
 */
m_blogSprite->runAction(
    CCLens3D::create(3.0f, CCSizeMake(100, 100), ccp(100,100), 50)
);

pointで指定した座標を中心に拡大した見た目になります。

波紋を広げる

/**  
 * CCRipple3D::create(time,GridSize,point,radius,count,stroke)  
 * time = アニメーション時間  
 * GridSize = (X方向の分割数,Y方向の分割数)  
 * point = 絶対座標(X,Y)  
 * radius = 半径  
 * count = 振幅回数  
 * stroke = 振幅幅  
 */
m_blogSprite->runAction(
    CCRipple3D::create(3.0f, CCSizeMake(100, 100), ccp(100,100), 50, 20, 25)
);

pointを中心に波紋が広がるアニメーションを行います。

アニメーションを終わらせたときに、アニメーション途中の状態で止まってしまうと思います。
元の状態に戻したい場合、以下の設定をすれば、大丈夫です。

//グリッド情報の破棄  
m_blogSprite->setGrid(NULL);

上記のアクションを使うことで、演出に更なる幅を持たせられると思います。
単一のアクションでは、使えることが限定されますが、組み合わせることで面白いことができそうなきがしませんか。