2015-01-21

Cocos2d-JSを触ってみた【環境構築編】

Cocos2d-xというクロスプラットフォームなゲーム開発が可能な

フレームワークがあるということで色々と触ってみました。

 

プロダクトとしてCocos2d-xとCocos2d-JSの2つありますが、

C++, Luaで書けるのがCocos2d-x

JavaScriptで書けるのがCocos2d-JS

という棲み分けになります。

 

どの実行環境向けにコンパイルできるかにも違いが有り、

Webゲームを作りたい場合はCocos2d-JSを選択することになります。

 

今回はみんな大好きJavaScriptで書けるCocos2d-JSで

環境構築+プロジェクト作成+コンパイルまでやってみます!

実行環境はWindows7です。

 

今回の参考URLはこちら↓

Cocos2d-JSを動かすまでの手順 | ゆめみ スタッフブログ -ゆめログ-

Cocos2d-x / Cocos2d-JS のインストール〜起動まで - Qiita

cocos2d-x - Cocos2d-JS を触ってみた - Qiita

1. 環境構築

公式サイトからCocos2d-JSの最新版(現在v3.2)をダウンロードします。

Cocos2d-x-download

ダウンロードしたら展開して、適当なフォルダに展開します。

 

Python 2.7も必要なのでこちらもインストールします。

Windowsの場合は本家から2系の方をダウンロードして実行して適当に場所にインストール。

python-home

インストール後はPythonのインストールディレクトリにパスを通しておきます。

 

Cocos2d-JSの実行スクリプトにもパスを通す必要があるので

<Cocos2d-JSをインストールしたPATH>\tools\cocos2d-console\binを環境変数PATHに追加します。

 

また、プログラムのコンパイルを行う為にCocos2d-JSの設定をする必要があります。

$ cd {Cocos2d-JSをインストールしたPATH}
$ python setup.py

を実行すると対話式で設定をすることが出来ます。

 

Androidのコンパイルをする場合はNDKとAndroid SDKのルートディレクトリをそれぞれ指定します。

コンパイルする場合(Web版だとリリースバージョン作る場合)は

antのルートディレクトリを指定する必要があります。つまり、コンパイルする場合はantも必須です。

 

これで環境構築が完了しました!

$ cocos

と叩いて、コマンドが動かない場合はPythonやCocos2d-JSへのPATHが通ってない可能性が高いです。

2. プロジェクト作成

cocosコマンドで新しいプロジェクトを作成することができます。
$ cocos new {アプリ名} -l js -d .

作成するとこんな感じでファイルが作成されます。

cocos2d-js-project

Cocos Code IDEを使うとGUIでプロジェクトを作成できます。

cocos2d-js-codeide

プロジェクト作成時点でゲーム開発/実行に必要なものは全て揃っているので

このままディレクトリごとWebにアップロードすればサンプルプログラムが動きます。

DropboxでもOK。

適当なWebサーバがない場合は以下のコマンドを叩いて

pythonのWebサーバで動かすことが可能です。

$ cocos run -p web

3. コンパイル

Web版は上記の方法でも動くには動きますが

容量削減とトラフィック等々考えるとミニファイした方が良いです。

以下のコマンドでWeb版のコンパイル(ミニファイ)が出来ます。

$ cocos compile -p web -m release

Android版を作成する場合は以下のコマンドで

$ cocos compile -p android -m release

 

Web版の場合はpublish/html5ディレクトリの中にコンパイル後のファイル一式が入っているので

こちらを任意のWebサーバにディレクトリごとデプロイします。

その他

Cocos2d-JSやPythonをインストールしたりPATHを通したり色々やってますが

Cocosコマンド動かす(=プロジェクト作成とコンパイル)ための作業になります。

一回プロジェクトのフレームを作ってしまえば後はJavaScriptで書いていくだけなので

コンパイルしないでプロトタイプ的に作成するのであれば、環境構築自体不要です。

githubにそのフレームの部分を上げたので、設定が面倒な方は

$ git clone https://github.com/tzmfreedom/sample-cocos2d-js.git

でフレームをgitで取得して、JSファイルを弄るだけでゲーム開発ができます。

このエントリーをはてなブックマークに追加