前回は「cocos2d-html」の特徴や環境の構築についてご説明しました。
今回はサンプルプログラムがどのように動作しているのかについて解説します。
＜cocos2d-htmlの基本構造＞
「cocos2d-html」は、以下の構成となっています。
※サンプルプログラムも同様の構成
＜cocos2d-htmlのサンプルプログラム解説＞
サンプルプログラムは、以下のファイル構成となっています。
Cocos2d-html5-vX.X
|
|- HelloHTML5World
|
|- index.html
|- cocos2d.js
|- main.js
|- build.xml
|
|- res
|
|- src
|
|- myApp.js
|- resource.js
index.htmlを実行すると、最終的には「myApp.js」という「scene」が実行され、
その中でレイヤーとスプライトを設定し、画面に表示されます。
そこに至るまでの流れについて、簡潔に解説します。
■index.htmlの読み込み
index.htmlをテキストエディタで開きます。
本HTMLファイルでは、一番最後に「cocos2d.js」を読み込んでいることがわかります。
次に、「cocos2d.js」の内容を見てみます。
■cocos2d.jsの読み込み
cocos2d.jsをテキストエディタで開きます。
「cocos2d.js」では、cocos2d-htmlの基本設定を行います。
それぞれの項目について、以下の内容を設定します。
上記の設定値を元に「cocos2d-html」の初期化処理が行われます。
その後「cocos2d-html」のエンジン側から「main.js」の読み込み処理が要求されます。
■main.jsの読み込み
main.jsをテキストエディタで開きます。
main.jsの最後の行に以下の処理があります。
var myApp = new cocos2dApp(HelloWorldScene);
main.jsファイルが読み込まれると、本処理によってこのアプリの最初のシーンが生成されます。
生成されるシーンは「HelloWorldScene」を設定してありますが、[src]-[myApp.js]に定義されています。
新しくアプリを作成する場合は、この[myApp.js]を作り込んでいくことになります。
＜myApp.jsの解説（最初に表示されるシーン）＞
シーン・レイヤー・スプライトについては、全てクラス構造になっています。
myApp.jsでは、シーン・レイヤー・スプライトに関して基本的なサンプルプログラムが用意されていますが、
特にレイヤーの構造が重要ですので、要点を解説します。
・main.jsにて指定していたシーン「HelloWorldScene」が定義され、
cc.Sceneを継承した変数であることがわかります
また、シーン生成後の処理（onEnter）で、このシーン唯一のレイヤーである「Helloworld」を生成し、
シーンに紐付けしています
layer = new Helloworld(); ①レイヤーを生成
layer.init(); ②レイヤーの「init」メソッドを実行
this.addChild(layer); ③シーンにレイヤーを紐付け
・レイヤーには「cc.Layer」を継承した変数「Helloworld」を使用していることがわかります
・「HelloWorld」の「init」メソッドで画像やラベルを生成し、レイヤーに紐付けしています
・レイヤーには「init」メソッドの他にも、タッチ関連のイベント等が存在します
以上で「cocos2d-html」のサンプルプログラムに関する解説は終了です。
＜次回以降の更新について＞
次回はこのサンプルプログラムを、Androidプロジェクトに内包して表示する方法について解説を行います。