cocos2d-js の開発を bower を使って開始する

ドキュメントルートをカレントディレクトリとする．

動作までの手順

bower init または bower.json を最低限下記のように記述しておく．名前はなんでもいい．

{
  "name": "MyApplication"
}

bower.json が生成されたら下記のように cocos2-js (cocos2d-html?) のパッケージを取ってくる．ここでは v2.2.3 を使う．

$ bower install --save cocos2d-html5#Cocos2d-html5-v2.2.3
bower cocos2d-html5#Cocos2d-html5-v2.2.3           cached git://github.com/cocos2d/cocos2d-html5.git#Cocos2d-html5-v2.2.3
bower cocos2d-html5#Cocos2d-html5-v2.2.3         validate Cocos2d-html5-v2.2.3 against git://github.com/cocos2d/cocos2d-html5.git#Cocos2d-html5-v2.2.3
bower cocos2d-html5#Cocos2d-html5-v2.2.3          install cocos2d-html5#Cocos2d-html5-v2.2.3

cocos2d-html5#Cocos2d-html5-v2.2.3 bower_components/cocos2d-html5

とりあえず動くことを確認するためにテンプレートをドキュメントルートに取ってくる．

$ cp -R bower_components/cocos2d-html5/template/* .

この時点で下記のようなディレクトリ構成になってるはず．

cocos2d-jsb.js は必要ないし build.xml も必要ない人にとっては必要ないので削除してても良い．

$ tree -L 1
.
├── bower_components
├── bower.json
├── build.xml
├── cocos2d.js
├── cocos2d-jsb.js
├── index.html
├── main.js
├── res
└── src

3 directories, 6 files

現在の自分の環境に合わせて下記のようにファイルを変更．

diff --git a/cocos2d.js b/cocos2d.js
index c2daa8d..344ebf6 100644
--- a/cocos2d.js
+++ b/cocos2d.js
@@ -35,7 +35,7 @@
         frameRate:60,
         renderMode:0,       //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
         tag:'gameCanvas', //the dom element to run cocos2d on
-        engineDir:'../cocos2d/',
+        engineDir:'bower_components/cocos2d-html5/cocos2d/',
         //SingleEngineFile:'',
         appFiles:[
             'src/resource.js',

ブラウザで見に行くと下記のように表示されているはず．

あとはいろいろ書き換えて自分のコードを書いてゆく．

以上．

js ファイルのロードについてメモ

bower_components/cocos2d-html5/cocos2d/jsLoader.js ではおおまかに下記のようにファイルをロードするようになっている．

• cocos2d-js のファイル群
• document.ccConfig.appFiles のファイル群
• main.js （決め打ち）

main.js は決め打ちなので最初に読み込む html ファイルと同じディレクトリに配置する必要があり，名前も変更できない．