筋肉とエンジニアリングで すべてを解決するブログ

筋トレ、JavaScript、Ruby で世界を変えてやります。

Cocos2d-x の基礎的な用語集

f:id:ma3tk:20150113234944j:plain

わからん！

何がどういう意味なのかがさっぱりわからなくて Cocos2d-x を触った最初の何日間かは少しつらかった記憶があります。

Sprite? Sprite Sheet? Animation? Effect? ...etc

雰囲気ではわかるんだけど、具体的に何を指すのかよくわからなかったので、もう一度自分で調べ直すとともにまとめてみました。

Node と アンカーポイント

Node(ノード)とは、各要素の基本となるもので、これ(もしくはノードを継承したクラス)で親子関係を作っていきます。

以下のサイトが詳しいです。

http://brbranch.jp/blog/201312/cocos2d-x/convert_to_node_space/

簡単にいえば、

Node は親のノードの位置とアンカーポイントで、描画する位置を決めています。

アンカーポイントとは、セットした画像のどの位置を起点に大きくしたりするかなどに使われます。

ポジションとアンカーポイントの関係は Cocos Studio を使って描画される位置を確認すると理解が早くなります。

Node と Scene と Layer と Sprite

Node は上述したとおり、基本的な親クラスとなっていて、非常に重要なものです。

Scene とは、1画面分の要素のことです(大雑把に言えばｗ)。Scene では画面を切り替えることと、親ノードとして存在し要素を追加していくのが大きな役割になっています。

Layer は PhotoShop 等の画像加工ソフトでお馴染みな方も多いと思いますが、通常のノードに加え、タッチの処理等が必要な時に利用したり、ある程度大きなまとまりとして存在します。例えば、背景レイヤー、影レイヤー、建物レイヤー、空レイヤー、UIレイヤーのように。

Sprite も Node から派生していて、 Node に加えて画像を読み込んで表示したり自由に変形させたりするメソッドが加わっています。

Scene1 - Layer1 - Sprite1
       |        L Sprite2
       L Layer2 - Sprite3

Scene2 - Layer3 - Sprite4
       L Layer4 - Sprite5
                L Sprite6

のようなツリー構造にしていきます。

Sprite Animation

スプライトアニメーションとは、簡単にいえば、スプライトによるパラパラアニメーションです。(そのまんまｗｗｗ)

画像を切り替えることで動くアニメーションですね。

Sprite Sheet

まず大きな前提として、スプライトの読み込みは ファイルの Input/Output の一種であるため、非常に処理が重いということは知っておく必要があります。

一枚画像を読み込むだけならまだしも、スプライトアニメーションを作るとなると何枚もの画像を読み込むことになります。

プログラミング、特にゲームプログラミングでは基本のようですが、この画像を読み込む処理を軽くさせるための工夫として、一枚の大きな画像としてまとめ、それを読み込み、利用したい画像の位置を指定して利用します。

この 1 つにまとめた画像を Sprite Sheet と言います。

スマートフォンデバイスの関係上、2048 * 2048 のサイズに収める工夫をすることでそこそこ新し目のデバイスでも動作するようになります。

Animation

スプライトを切り替えてアニメーションにするというモノ以外に端的にアニメーションというと、時間とともに画像を動かしたり、大きさを変えたり、回転したり、透明にしたり、特定の動きを実行する機能も Cocos2d-x に含まれています。

おおまかに分けると、自分でどう変化させるかを記述させる CallFunc と物理的な動き(CallFunc 以外)をさせる機能 がありますので、これについては別途書きたいと思います。

ゲームの肝ともいえる部分なので、きちんと理解しておくことが望ましいかと思います。

Effect

スプライトアニメーションとそこまで変わらないようなイメージですが、エフェクトというと、ワンポイントアニメーションのようなものですね。

メインのスプライトに対して表現を加える事で見た目の安っぽさを解消してくれたり、ユーザに爽快感やわかりやすさ等をプラスしてくれます。

既存の売れているゲーム等を見ると、ユーザにとっては見えたのか見えないのかわからないレベルの内容も多数含まれていたりします。

0.1 秒、0.01秒 の動きに拘れるかどうかが すごい！とか面白い！という感想をもらえるかどうかの判断基準になりえるので非常に大切な部分です。

Particle

パーティクルとは、非常に細かかったり複雑な動きをしている表現をする技術のことです。

雨とか風とかはじけ飛んだり爆発したりなどそういったものに向いていますが、超頑張れば通常のエフェクト(スプライトアニメーション)でも表現できます。

Particle Designer (https://71squared.com/particledesigner) や Particle2dx (http://particle2dx.com/) などを使って作成することが出来ます。

Texture Atlas

文字列を cocos2dx で扱う上で、そのままフォントを読み込んだりすると描画処理が重くなったりしますが、それを防ぐことが出来るものです。

似た例で言えば、 Sprite Sheet があります。フォントをビットマップデータにして、格納し画像のように扱うことができます。

詳しくはこちらをどうぞ

http://study-cocos2d-x.info/mozi/90/

Cocos2d-x における Parent と Childen と Z-Order

親子関係 と描画

Cocos2d-x で画面に何かを表示する際に、親子関係が重要になってきます。

サーバーサイドプログラミングに比べると、「ゲーム画面にモノを表示するが、どういった順序でどこにどうやって描画してあげるのか」というのが違う部分です。

この順序は、特に指定がなければ、親から子へ順に描画されるため、子要素であればあるほど手前に描画されます。これがまず一個目の原則。

Z-Order の基本 と描画

Cocos2d-x では基本的に「縦と横」で表現をします。しかし、3次元目である Z 軸も関係してきます。

親子関係以外に存在するのがこの Z-Order です。

具体的には、描画順序 Z-Order が高ければ高いほど後に描画されることになり、結果として上に表示されます。

これが基本的な Z-Order です。

Global Z-Order と Local Z-Order

Z-Order も具体的に分類すると 2種類存在します。

グローバルって言ってるのが、親子関係に依存しない描画順序です。ローカルって言ってるのが、その親に含まれる同列の子で誰が一番上なのかどうかという相対的な順序になります。

細かい内容になりますので、別ブログに解説はおまかせします！w

→ http://qiita.com/asuuma/items/b4b6c3e8c8d36a0c5106

オートバッチとドローコールとレンダーキュー

ちょっと前のバージョンまでは、画面上に個別にモノを置くと、個々に描画されていたっぽいです。

そうすると、無駄な描画処理が行われてしまうため動作が重くなってしまうのですが、v3.x から追加されたオートバッチ(auto batching)を使うことで、一回の描画にまとめることができ、プログラムとしての処理が減ります。

この描画処理を発行することを ドローコール(draw call) といい、ドローコールはなるべく増やさないようにする工夫が必要になってきます。

ドローコールについては詳しいことは以下のサイトに書いてあるので参照して欲しいです。

http://connect.jp.square-enix.com/wp-content/uploads/2014/10/SQEX_DevCon_hata.pdf

また、レンダーキューというのも存在し、簡単にいえば、オートバッチのために描画する処理をまとめてためておくためのキューです。

Parent と Children の関係にする(ちょっと反れますが)

描画の順序もありますが、親子関係を構築することで、 Cocos2d-x では自動的にメモリ管理もしてくれます。

C++ ではメモリ管理を自前でする必要があって大変なのですが、その部分をある程度吸収してくれます。

ユーザ入力関係

タップ、ピンチイン、ピンチアウト、スクロール、スワイプ、マルチタップ などなどがあります。

これらの 開始時、途中、終了時、キャンセル などのイベントが取れます。

基本的なレイヤーはタップとマルチタップくらいしか実装されてないのですが、 ScrollView を使ったレイヤーにすることでピンチイン・ピンチアウト・スクロール処理ができるようになったり、イベントリスナーにイベントを追加することで実装することが可能になります。

ロングタップ判定などの特殊な操作は自分で動きを書く必要があるので注意してください。(Cocos2d-x で実装してくれないかなと思ってるんですが…)

こんなところで

自分がこれだけある程度知っていたら開発の導入としてすごい楽だろうなーと思い書いてみました。

もっと他にもゲームプログラミングや Cocos2d-x でしか使わない用語等あると思いますが、一旦基礎的な部分としての紹介は以上とさせていただきます！

なにか変なところがありましたら突っ込んでいただけるとありがたいです。