あなたは今 Sprite
オブジェクト、 Label
オブジェクト、 Action
オブジェクトをゲームで使用しており、その使い方も上達しているでしょう。
前回の章で説明した基本的な Node
タイプの他にも、Cocos2d-x では特殊な機能を実装する際の手助けとなるより高度なNode
タイプが用意されています。
もしかして、あなたはタイルベースのゲームを作りたくないですか? もしくは 2D横スクロールですか?
それともゲームにパーティクルエフェクトを追加したいですか?
Cocos2d-x にはこれらの目的を実現するための Node
オブジェクトがあります!
TileMaps とはtilesで構成されたmapsです。
各tile は独立した振る舞いをすることができます。
TileMaps はTML
と呼ばれる XMLベースの map 形式に保存されます。
TMX
は元々tile-based maps 向けに設計されましたが、様々な種類のオブジェクトをサポートしているためより一般的なレベルのゲームに合っていました
TMX
オブジェクトを作成するのは簡単です:
// reading in a tiled map.
auto map = TMXTiledMap::create("TileMap.tmx");
addChild(map, 0, 99); // with a tag of '99'
Tile-based maps は、z-orderが決められた多くのレイヤーを持つことができます。 レイヤーの名前を指定して特定のレイヤーにアクセスすることができます。:
// how to get a specific layer
auto map = TMXTiledMap::create("TileMap.tmx");
auto layer = map->getLayer("Layer0");
auto tile = layer->getTileAt(Vec2(1, 63));
各tile は重複のない位置情報とIDを持っています。これを使って特定のタイルをとても簡単に抽出することができます。IDを使って任意のタイルにアクセスすることができます:
// to obtain a specific tiles id
unsigned int gid = layer->getTileGIDAt(Vec2(0, 63));
tiled-map の例を配置しました:
tiled-mapはどうやって作成すればよいのでしょうか? tiled-mapを作成するためのツールはたくさんあります。 Tiledは人気のあるツールです。 これは活発に開発されており、素晴らしいユーザーコミュニティがあります。 上記のスクリーンショットは実際の Tiled のプロジェクト画面です。
おそらくあなたのゲームでは燃える炎や呪文詠唱や爆発といったエフェクトが必要になるでしょう。 そういった複雑なエフェクトはどのように作成すれば良いのでしょうか? そもそも作成できるのでしょうか? はい、作成できます。 パーティクルシステムを使います。 パーティクルシステムという言葉は、非常に小さなスプライトやグラフィックオブジェクトを大量に使用して、特定の 不規則な現象をシミュレートするためのコンピューターグラフィックス技術の事を指します。これは従来型の描写技術では再現するのが非常に難しいものです。 いくつかの現実的な例としては、非常にカオスなシステム、自然現象、化学反応によって引き起こされる事象があります。 以下にいくつか パーティクルエフェクトの例を挙げます:
Even though you can always create particle effects by hand, massaging each property to your liking. パーティクルエフェクトを作成するためのサードパーティ製ツールはいくつかあります。 それらツールのうちいくつかを以下に記載します:
これらのツールは通常、ファイルを .plist
形式で出力します。これを Cocos2d-x で読み込み、作成したエフェクトをゲーム内で使用することができます。
他の全てのクラスと同じ様に、create()
メソッドを使って処理することができます。:
// create by plist file
auto particleSystem = ParticleSystem::create("SpinningPeas.plist");
パーティクルエフェクト をゲームに追加する準備はできましたか? 準備できていて欲しいです! カスタムのパーティクルエフェクトを作成する作業は大変ではありませんか? ゲーム開発の手間を省くため、使用可能な内蔵の particle effectsがいくつかあります。 以下の一覧を見てください:
-ParticleFire: ポイントパーティクルシステム。グラビティモードを使用。
-ParticleFireworks:ポイントパーティクルシステム。グラビティモードを使用。
-ParticleSun: ポイントパーティクルシステム。グラビティモードを使用。
-ParticleGalaxy: ポイントパーティクルシステム。グラビティモードを使用。
-ParticleFlower: ポイントパーティクルシステム。グラビティモードを使用。
-ParticleMeteor: ポイントパーティクルシステム。グラビティモードを使用。
-ParticleSpiral: ポイントパーティクルシステム。グラビティモードを使用。
-ParticleExplosion: ポイントパーティクルシステム。グラビティモードを使用。
-ParticleSmoke: ポイントパーティクルシステム。グラビティモードを使用。
-ParticleSnow: ポイントパーティクルシステム。グラビティモードを使用。
-ParticleRain: ポイントパーティクルシステム。グラビティモードを使用。
例として ParticleFireworks
を使用します。内蔵のエフェクトを簡単に使用することができます。:
auto emitter = ParticleFireworks::create();
addChild(emitter, 10);
結果は、以下のような パーティクルエフェクト になります:
しかし、パーティクルエフェクトがあなたが望む挙動と著しく異なっていた場合はどうすればよいのでしょうか? ええそうです、パーティクルエフェクトを手動で操作するのです! 上記と同じ花火を例にして、手動でプロパティを変更してさらにパーティクルエフェクトを操作してみましょう:
auto emitter = ParticleFireworks::create();
// set the duration
emitter->setDuration(ParticleSystem::DURATION_INFINITY);
// radius mode
emitter->setEmitterMode(ParticleSystem::Mode::RADIUS);
// radius mode: 100 pixels from center
emitter->setStartRadius(100);
emitter->setStartRadiusVar(0);
emitter->setEndRadius(ParticleSystem::START_RADIUS_EQUAL_TO_END_RADIUS);
emitter->setEndRadiusVar(0); // not used when start == end
addChild(emitter, 10);
パララックス
ノードとは、 パララックススクロールを再現するための特別な Node
です。
今なんて言ったんでしょう? パララ.. 何? Yes, parallax Simply put you can consider
a ParallaxNode
to be a special effect that makes it appear that the position
or direction of an object appears to differ when viewed from different positions.
日常生活での簡単な例を挙げるとすると、カメラのビューファインダーとレンズを通して見るようなものです。
多くのゲームではこの機能を使用していると考えてよいです。スーパーマリオブラザーズはその古典的な例です。
ParallaxNode
オブジェクトは、 Sequence
を使って動かしたり、マウスやタッチや加速度センサーやキーボードのイベントを使って手動で動かしたりできます。
パララックスノードは通常のノードより少し複雑です。なぜでしょうか?
それは、パララックスノードが機能するためには複数のノードを使う必要があるためです。
ParallaxNode
は、それ自身のみでは機能することができません。
ParallaxNode
を機能させるためには、少なくとも他に二つのNode
オブジェクトが必要です。
これまでと同じ様に純正Cocos2d-xの形式で、 ParallaxNode
は簡単に作成できます:
// create ParallaxNode
auto paraNode = ParallaxNode::create();
複数のNode
オブジェクトが必要ですから、それらの追加も簡単にできます。:
// create ParallaxNode
auto paraNode = ParallaxNode::create();
// background image is moved at a ratio of 0.4x, 0.5y
paraNode->addChild(background, -1, Vec2(0.4f,0.5f), Vec2::ZERO);
// tiles are moved at a ratio of 2.2x, 1.0y
paraNode->addChild(middle_layer, 1, Vec2(2.2f,1.0f), Vec2(0,-200) );
// top image is moved at a ratio of 3.0x, 2.5y
paraNode->addChild(top layer, 2, Vec2(3.0f,2.5f), Vec2(200,800) );
OK, looks and feels familiar, right? Notice a few items! Each Node
object that
was added is given a unique z-order so that they stack on top of each other.
また、addChild()命令に2つのVec2
型の引数が追加で設定されていることに注目してください。
これらは ratio と offsetです。
これらの引数は親Node
との速度比として考えることができます。
ParallaxNode
について言葉で説明するのは難しいので、プログラマーガイドサンプルのコード例を実行して動きを見てください!