Cocos2d-JS の開発環境を構築する

img-cocos2djs

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) がダウンロードできます。Screen Shot 2015-06-04 at 12.01.59 PM

インストール&設定

インストーラーは用意されていないので、ダウンロードした zip ファイルを適当な場所に解凍します。あとでパスを通すことになるのでディレクトリ構成の浅い部分に置くのがおすすめです。自分は /opt/cocos2d-js-v3.6.1 に置きました。

Screen Shot 2015-06-09 at 8.25.27 AM

ターミナルを開き、パッケージに含まれている setup.py を実行すると、.bash_profile に以下の環境変数の設定が自動で追加されます。

  • COCOS_CONSOLE_ROOT
  • PATH

途中 NDK_ROOT と ANDROID_SDK_ROOT を尋ねられるのですが、とりあえずリターンを押しておけば Web アプリの開発は可能です。(Android アプリの開発をする場合は「Cocos2d-JS のサンプルを動かしてみる (Android編)」を参考に、設定してください。)

これ以降、新たにターミナルを開けば cocos コマンドが使用できるようになっているはずです。

  • ただし bash にしか対応していないので csh など他のシェルを使っている方は同等の設定を手動で行う必要があります。
  • Python のバージョン 2.x が使えることが必要です。最近の OS X には標準で含まれているので特に準備は必要ありません。Python バージョン 3.x 系は未対応とのことなので注意してください。
  • Android アプリをビルドするには別途必要な設定がありますが、後からでも設定できるので本記事では対象から外します。

新規プロジェクト作成

cocos はコマンドラインから Cocos2d-x/JS のプロジェクトを管理するツールです。ここではサブコマンド cocos new を使用して新規プロジェクトの雛形を作成します。

プロジェクトを作成したいディレクトリに移動し、以下のコマンドを実行します。(PROJECT_NAME は好きな名前に変更してください)

以下は /My/Test という場所に MyProject という名前のプロジェクトを作成した場合の例です。

サンプルを実行

Cocos2d-JS のプロジェクトは、ブラウザ、iOS、Android などの環境で実行することができます。ここでは一番簡単なブラウザ上での実行を試してみます。

ブラウザ上で実行するには、大きく分けて2つ方法があります。

  1. 稼働中のWebサーバー (Apache, MAMPなど) 上に、プロジェクトのファイルをコピーする
  2. cocos run コマンドを使用する (専用の Web サービスを起動します)

ここでは 2. の方法を使います。先ほど作成したプロジェクトのディレクトリに移動して、以下のコマンドを実行するだけです。

以下は、実行結果の例です。

コマンドを実行すると内部でWebサーバーがポート8000を使用して起動します。それと同時にデフォルトのブラウザーが起動しページにアクセスします。

 

うまくいけば自動的に立ち上がったブラウザ上にHello World のシーンが実行されているはずです!!

Screen Shot 2015-06-08 at 2.44.40 PM

 

Webサーバーは、Control+C で停止させることができます。

スポンサーリンク


3 comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です