クロスプラットフォーム対応ゲームフレームワーク「Cocos2d-x」のデータ構造と、画像の表示

トランプゲームを作成しながら学ぶ、速習「Cocos2d-x」 第2回

　「Cocos2d-x」は、クロスプラットフォーム開発に対応したオープンソースのゲームフレームワークです。2Dゲームに最適化されており、国内の著名なスマートフォンゲームでも数多く利用されています。本連載では、トランプゲームの作成手順を通して、Cocos2d-xおよびゲーム開発の基礎を紹介していきます。第2回は、「シーングラフ」と呼ばれるデータ構造と、画像の表示方法について解説します。

シーングラフ

　Cocos2d-xでは、データ構造にシーングラフ（Scene Graph）を採用しており、すべてのデータがツリー構造で管理されています。もっと簡単に説明すると、すべてのデータが親子関係を持っています。

　例えば、タイトル画面を例にしましょう。そのタイトル画面には、いろいろなオブジェクトを表示するためのレイヤーを1つ以上持っています。つまり、親となる画面が、子となるレイヤーを持っていることになります。そのレイヤー上に、キャラクターなどを表示するスプライトや、ラベル・ボタンなどのようなオブジェクトを表示します。キャラクターの表情を変更するために、顔のスプライトが用意されている場合は、スプライト上にスプライトを配置することもあります。

　このようにCocos2d-xでは、オブジェクト同士が必ず親子関係を持っています。

図1-1　シーングラフ

Cocos2d-xの重要なクラス

　Cocos2d-xでは、多くのクラスを利用します。ここでは、シーングラフを構成する上で重要なクラスについて紹介します。

Directorクラス

　Directorクラスは、ゲームを管理するクラスです。皆さんが良く利用する機能としては、図2-1に示すような画面遷移の管理です。タイトル画面からメニュー画面のような単純な画面遷移ですと、次の画面を表示した後、前の画面を破棄するといった処理は、開発者が気にすることなくDirectorクラスが対応してくれます。

　また、画面のスタック管理を行うこともできます。例えば図2-1のように、メニュー画面からハイスコア画面へ遷移しても、その後必ずメニュー画面へ遷移するのであれば、メニュー画面を破棄しない方が良いこともあります。このようなスタック管理も、このDirectorクラスでは簡単に利用することができます。

　その他、ゲームの描画に必要なOpenGL ESの初期化、デバッグ情報の表示制御、フレームレートの設定なども、Directorクラスで行うことができます。

　このように、Directorクラスは特別なクラスなので、1つしか存在してはいけません。そのため、シングルトンパターンとして実装されています。

図2-1　画面遷移の例

Nodeクラス

　Nodeクラスは、シーングラフを構成するための重要なクラスです。シーングラフを構成できるのは、Nodeクラスのサブクラスだけです。画面を示すSceneクラス、レイヤーを表すLayerクラス、画像を表示するSpriteクラスなどは、すべてNodeクラスのサブクラスとなっています。画面上に表示するためのクラスであるため、位置・スケール・角度・サイズなどの情報を持っています。

Sceneクラス

　Sceneクラスは、ゲームを構成する画面に相当します。ゲームの設計にもよりますが、図2-1の例だと最大で8つの画面を用意するでしょう。このように複数の画面が必要になりますが、同時に1つの画面だけがアクティブになることができます。

Layerクラス

　Layerクラスは、何も描かれていない透明なシートのようなものです。レイヤーの子として、背景画像・キャラクター画像・スタートボタン・点数ラベルなどを持つことになるでしょう。もちろん、レイヤーの子として、レイヤーを持つことも可能です。実際、複数の画面で利用される共通のオブジェクトは、1つのレイヤーとして用意されることがあります。

　また、色を持つレイヤーや、グラデーションを持つレイヤーなども用意されています。

Spriteクラス

　Cocos2d-xで言うところのSpriteクラスは、イメージファイル（png、jpgなど）から画像を読み込んで表示するものです。Spriteクラスは、Nodeクラスのサブクラスなので、位置・スケール・角度などの変更を行うことができます。後で利用する図2-2のトランプ画像もSpriteクラスを利用して表示します。また、これらを時間とともに変化させ、アニメーションを行うことも可能です。このアニメーションは、Actionクラスにより設定を行います。

図2-2　イメージファイルはSpriteクラスを利用して表示する

Actionクラス

　Spriteクラスの説明の中でActionクラスを紹介しましたが、実際にはNodeクラスのサブクラスであれば、Actionクラスを利用してアニメーションさせることができます。移動アクション・回転アクション・スケール変更アニメーションなど、数多くのアクションが標準で用意されています。パラパラマンガのような、コマアニメーションも可能です。