エフェクト

導入

エフェクトは特殊なアクションです. 不透明度や位置, 回転または拡大縮小倍率のような一般的なプロパティを編集する代わりに, エフェクトでは新しいプロパティ, グリッドプロパティを編集します.

グリッドプロパティは行列のようなもので, 正方形または長方形のラインで構成するネットワークです.

CCNodeオブジェクト(CCLayer, CCScene, CCSprite, etc.)をグリッドの中に描画する特殊なアクションがあり, グリッドの頂点を移動することでそれを変形することができるのです.

アクションに利用されるグリッドには, タイルドグリッドとノンタイルドグリッドの2種類があり, 前者は個々のタイルで構成されているのに対し, 後者が頂点で構成されていると言う違いがあります.

tiled_and_nontiled_grid.png

グリッドは2次元の行や列を持っていますが, グリッドの各頂点は3次元のx,y,z座標を持っています. そのため, 2Dまたは3Dのエフェクトを生成することができるのです.

グリッドのサイズを増やすことによって, エフェクトの質を高めることができますが, エフェクトの描画速度は低下します.

グリッドのサイズを(16,12)にした場合, 全てのデバイスにおいて高速ですが, あまりきれいには見えないでしょう. また, (32,24)にした場合, エフェクトはかなりきれいに見えますが, iPhone第一世代では高速に実行されないことでしょう.

どのように動作するのか

まず, スクリーンの各フレームは, テクスチャ(FBO)に描画されます.このテクスチャは頂点配列に変換され, この頂点配列, つまりグリッドは, グリッドエフェクトによって変換されます.そして, 変換された頂点配列は最後にスクリーンに描画されます.

動作の詳細については次の項目を参照してください:

例えば, 次の画像を描画するシーンまたはレイヤーを持っていた場合:

original_image.png

CCRipple3Dアクションを用いてこの画像を変換してみましょう.ワイヤーで示した右の画像から見て取れるように, 32×24の方形グリッドを使用しており, 全てのグリッドがノンタイルドグリッドであることが分かります.

effect_ripple3d.png effect_ripple3d_grid.png

CCFadeOutTRTilesアクションを用いてこの画像を変換してみましょう.ワイヤーで示した右の画像から見て取れるように, 16×12の方形グリッドを使用しており, 全てのグリッドがタイルドグリッドであることが分かります.

effect_fadeouttiles.png effect_fadeouttiles_grid.png

3Dアクション

名前に"3D"をサフィックスとして持つアクションは, グリッドのZ座標を変更して3次元の視覚エフェクトを生成するアクションであることを意味しています.

"3D"アクションを使用する場合には, おそらく, デプスバッファーを使用することでしょう. それを利用する簡単な方法を示します.

 
// 重要: 最初のシーンを実行する前に, 冒頭でこの関数を呼び出してください
// 24ビットのデプスバッファを生成します
// これらはOpenGLで考慮されるZオーダーを意味しています
[[CCDirector sharedDirector] setDepthBufferFormat:kDepthBuffer16];
 

そして, 特定の状況下で, RGBA8888ピクセルフォーマットを設定する必要があります. これにより, 透明性のあるエフェクトを持たせることができます.

 
// 重要: 最初のシーンを実行する前に, 冒頭でこの関数を呼び出してください
// 透明性のあるバッファを持たせるために, このピクセルフォーマットを使用します
[[CCDirector sharedDirector] setPixelFormat:kPixelFormatRGBA8888];
 

グリッドエフェクトのインデックス

CCGrid3DActionを利用するエフェクト:

CCTiledGrid3DActionを利用するエフェクト:

使用例

 
// Wavesアクションをsprite1で実行
id waves = [CCWaves actionWithWaves:5 amplitude:20 horizontal:YES vertical:NO grid:ccg(15,10) duration:5];
[sprite1 runAction: [CCRepeatForever actionWithAction: waves]];
 
// Shaky3Dアクションをsprite2で実行
id shaky = [CCShaky3D actionWithRange:4 shakeZ:NO grid:ccg(15,10) duration:5];
[sprite2 runAction: [CCRepeatForever actionWithAction: shaky]];
 

添付ファイル: filetiled_and_nontiled_grid.png 855件 [詳細] fileoriginal_image.png 819件 [詳細] fileeffect_ripple3d_grid.png 853件 [詳細] fileeffect_ripple3d.png 749件 [詳細] fileeffect_fadeouttiles.png 749件 [詳細] fileeffect_fadeouttiles_grid.png 908件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-01-01 (火) 02:13:06 (1727d)