サイトのトップへ戻る

Cocos2d-x ドキュメント 日本語訳

サイト内検索

その他のノードの種類

あなたは今 Spriteオブジェクト、 Labelオブジェクト、 Action オブジェクトをゲームで使用しており、その使い方も上達しているでしょう。 前回の章で説明した基本的な Node タイプの他にも、Cocos2d-x では特殊な機能を実装する際の手助けとなるより高度なNode タイプが用意されています。 もしかして、あなたはタイルベースのゲームを作りたくないですか? もしくは 2D横スクロールですか? それともゲームにパーティクルエフェクトを追加したいですか? Cocos2d-x にはこれらの目的を実現するための Node オブジェクトがあります!



TileMap

TileMaps とはtilesで構成されたmapsです。 各tile は独立した振る舞いをすることができます。 TileMapsTMLと呼ばれる 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. パーティクルエフェクトを作成するためのサードパーティ製ツールはいくつかあります。 それらツールのうちいくつかを以下に記載します:

  1. Particle Designer: Macで動作する非常に強力なパーティクルエフェクトエディタ
  2. V-play particle editor: Cocos2d-x用のクロスプラットフォーム対応パーティクルエディタ
  3. Particle2dx: オンラインウェブ上のパーティクルデザイナー

これらのツールは通常、ファイルを .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);


Parallax

パララックス ノードとは、 パララックススクロールを再現するための特別な 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型の引数が追加で設定されていることに注目してください。 これらは ratiooffsetです。 これらの引数は親Nodeとの速度比として考えることができます。

ParallaxNodeについて言葉で説明するのは難しいので、プログラマーガイドサンプルのコード例を実行して動きを見てください!