Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加

ダウンロード Trump_Back.png (21.9 KB)

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

目次

シーングラフ

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

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

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

図1-1 シーングラフ
図1-1 シーングラフ

Cocos2d-xの重要なクラス

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

Directorクラス

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

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

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

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

図2-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クラスを利用して表示する
図2-2 イメージファイルはSpriteクラスを利用して表示する

Actionクラス

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:トランプゲームを作成しながら学ぶ、速習「Cocos2d-x」
All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5