Cocos2d-JS の開発環境を構築する
Cocos2d-JSとは一言で言うと『JavaScript バージョンの Cocos2d-x』です。直接 Cocos2d-x を扱うには C++ でコードを記述する必要がありますが、Cocos2d-JS を使えば大部分のコードは JavaScript で記述することが可能です。
ただし公式ページの記述とは裏腹に、Cocos2d-x のすべての機能が使えるわけではないので注意が必要です。ざっくり言うと、よく使う機能はちゃんとサポートされていますが、あまり使われない機能（例：シーン切り替え時の一部のトランジション）はサポートされてない部分が散見されます。
そうは言っても、スマートフォンだけでなくブラウザ上でも動作することと、事前コンパイルなしにすぐ動作を確認できることなどは大きな魅力です。
今回は Cocos2d-JS で開発を始めるための環境構築の手順についてまとめました。
- ダウンロード
- インストール＆設定
- 新規プロジェクト作成
- サンプルを実行
使用した環境
OS: Mac OS X 10.10.3
Cocos2d-JS: v3.6.1
ダウンロード
Cocos2d-JS の日本語公式ページから最新版（2015年6月4日 時点では v3.6.1) がダウンロードできます。
インストール＆設定
インストーラーは用意されていないので、ダウンロードした zip ファイルを適当な場所に解凍します。あとでパスを通すことになるのでディレクトリ構成の浅い部分に置くのがおすすめです。自分は /opt/cocos2d-js-v3.6.1 に置きました。
ターミナルを開き、パッケージに含まれている setup.py を実行すると、.bash_profile に以下の環境変数の設定が自動で追加されます。
- COCOS_CONSOLE_ROOT
- PATH
途中 NDK_ROOT と ANDROID_SDK_ROOT を尋ねられるのですが、とりあえずリターンを押しておけば Web アプリの開発は可能です。（Android アプリの開発をする場合は「Cocos2d-JS のサンプルを動かしてみる (Android編)」を参考に、設定してください。）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$ <strong>pwd</strong> <span style="color: #339966;">/opt/cocos2d-js-v3.6.1</span> $ <span style="color: #0000ff;"><strong>./setup.py</strong></span> <span style="color: #339966;">Setting up cocos2d-x... ->Check environment variable COCOS_CONSOLE_ROOT ->Find environment variable COCOS_CONSOLE_ROOT... ->COCOS_CONSOLE_ROOT not found-> Add COCOS_CONSOLE_ROOT environment variable... ->Added COCOS_CONSOLE_ROOT=/opt/cocos2d-js-v3.6.1/tools/cocos2d-console/bin ->Configuration for Android platform only, you can also skip and manually edit "/Users/hirota/.bash_profile" ->Check environment variable NDK_ROOT ->Find environment variable NDK_ROOT... ->NDK_ROOT not found ->Please enter the path of NDK_ROOT (or press Enter to skip):<span style="color: #0000ff;"><strong>(リターン)</strong></span> ->Check environment variable ANDROID_SDK_ROOT ->Find environment variable ANDROID_SDK_ROOT... ->ANDROID_SDK_ROOT not found ->Please enter the path of ANDROID_SDK_ROOT (or press Enter to skip):</span> |
|
1 |
<span style="color: #339966;"><span style="color: #0000ff;"><strong>(リターン)</strong></span></span> |
|
1 2 |
<span style="color: #339966;">->Check environment variable ANT_ROOT ->Find environment variable ANT_ROOT... ->ANT_ROOT not found ->Find command ant in system... ->Path "/opt/local/bin" was found -> Add ANT_ROOT environment variable... ->Added ANT_ROOT=/opt/local/bin A backup file "/Users/hirota/.bash_profile.backup4" is created for "/Users/hirota/.bash_profile". Please execute command: "source /Users/hirota/.bash_profile" to make added system variables take effect</span> $ |
これ以降、新たにターミナルを開けば cocos コマンドが使用できるようになっているはずです。
- ただし bash にしか対応していないので csh など他のシェルを使っている方は同等の設定を手動で行う必要があります。
- Python のバージョン 2.x が使えることが必要です。最近の OS X には標準で含まれているので特に準備は必要ありません。Python バージョン 3.x 系は未対応とのことなので注意してください。
- Android アプリをビルドするには別途必要な設定がありますが、後からでも設定できるので本記事では対象から外します。
新規プロジェクト作成
cocos はコマンドラインから Cocos2d-x/JS のプロジェクトを管理するツールです。ここではサブコマンド cocos new を使用して新規プロジェクトの雛形を作成します。
プロジェクトを作成したいディレクトリに移動し、以下のコマンドを実行します。(PROJECT_NAME は好きな名前に変更してください)
|
1 |
$ <span style="color: #0000ff;"><strong>cocos new -l js <em>PROJECT_NAME</em></strong></span> |
以下は /My/Test という場所に MyProject という名前のプロジェクトを作成した場合の例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$ <strong>pwd</strong> <span style="color: #339966;">/My/Test</span> $ <strong><span style="color: #0000ff;">cocos new -l js MyProject</span></strong> <span style="color: #339966;">Running command: new</span> <span style="color: #339966;">> Copy template into /My/Test/MyProject</span> <span style="color: #339966;">> Copying cocos2d-html5 files...</span> <span style="color: #339966;">> Copying files from cocos root directory...</span> <span style="color: #339966;">> Copying files from template directory...</span> <span style="color: #339966;">> Copying directory from cocos root directory...</span> <span style="color: #339966;">> Copying cocos2d-x files...</span> <span style="color: #339966;">> Rename project name from 'HelloJavascript' to 'MyProject'</span> <span style="color: #339966;">> Replace the project name from 'HelloJavascript' to 'MyProject'</span> <span style="color: #339966;">> Replace the project package name from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.MyProject'</span> <span style="color: #339966;">> Replace the mac bundle id from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.MyProject'</span> <span style="color: #339966;">> Replace the ios bundle id from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.MyProject'</span> $ |
サンプルを実行
Cocos2d-JS のプロジェクトは、ブラウザ、iOS、Android などの環境で実行することができます。ここでは一番簡単なブラウザ上での実行を試してみます。
ブラウザ上で実行するには、大きく分けて２つ方法があります。
- 稼働中のWebサーバー (Apache, MAMPなど) 上に、プロジェクトのファイルをコピーする
- cocos run コマンドを使用する (専用の Web サービスを起動します)
ここでは 2. の方法を使います。先ほど作成したプロジェクトのディレクトリに移動して、以下のコマンドを実行するだけです。
|
1 |
$ <strong><span style="color: #0000ff;">cocos run -p web</span></strong> |
以下は、実行結果の例です。
コマンドを実行すると内部でWebサーバーがポート8000を使用して起動します。それと同時にデフォルトのブラウザーが起動しページにアクセスします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$ <strong>cd MyProject</strong> $ <strong>pwd</strong> <span style="color: #339966;">/My/Test/MyProject</span> $ <span style="color: #0000ff;"><strong>cocos run -p web</strong></span> <span style="color: #339966;">Running command: compile</span> <span style="color: #339966;">Building mode: debug</span> <span style="color: #339966;">Running command: deploy</span> <span style="color: #339966;">Deploying mode: debug</span> <span style="color: #339966;">Running command: run</span> <span style="color: #339966;">starting application</span> <span style="color: #339966;">Try start server on 127.0.0.1:8000</span> <span style="color: #339966;">Serving HTTP on 127.0.0.1, port 8000 ...</span> <span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET / HTTP/1.1" 200 -</span> <span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /res/loading.js HTTP/1.1" 200 -</span> <span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/CCBoot.js HTTP/1.1" 200 -</span> <span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /main.js HTTP/1.1" 200 -</span> <span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /project.json HTTP/1.1" 200 -</span> <span style="color: #339966;">127.0.0.1 - - [05/Jun/2015 00:42:23] "GET /frameworks/cocos2d-html5/moduleConfig.json HTTP/1.1" 200 - : : </span> |
うまくいけば自動的に立ち上がったブラウザ上にHello World のシーンが実行されているはずです！！
Webサーバーは、Control+C で停止させることができます。
Pingback: Cocos2d-JS の開発環境を構築する | tomeapp | Apple FAN｜macやiPhoneなどアップル製品のニュースサイト
Pingback: Cocos2d-JS で画像を表示する | tomeapp
Pingback: Cocos2d-JS で文字列を表示する | tomeapp