Cocos2d-JS で Hello World するまでの環境づくり


先日 Cocos2D-JS 3.0 がリリースされたということで、
一から勉強していこうと思います。

今回は Cocos2d-JS のダウンロードから Hello World するまでを書いてみました。

![](http://embed.gyazo.com/40e59f15d9a671e9f1f918bff9292c3e.png)

## 実行環境

||バージョン|
|:--|:--|
|MacOS|10.9.5|
|Cocos2d-JS|v3.0|
|Python|2.7|
|Xcode|6.1|

## COCOS2D-JS をダウンロード

http://cocos2d-x.org/download

より Cocos2d-JS の現時点での最新版 v3.0 をダウンロード。

## セットアップ

ダウンロード完了後、圧縮ファイルを解凍して展開されたフォルダを任意の場所に置きます。

フォルダ内に `setup.py` があるので、ターミナルなどで実行します。

```
./setup.py
```

![](http://i.gyazo.com/b25f61b5d70f5c792dbe41530fd3f9cb_1.png)

そうすると以下のような画面が表示されます。

![](http://i.gyazo.com/ac03fd108523407b0ee6776a1da715e8_1.png)

赤枠の中で何をしているのかを上から順番に説明すると、

* COCOS CONSOLE のパスが bash_profile の COCOS_CONSOLE_ROOT の値に定義されているか
* Android NDK のパスが bash_profile の NDK_ROOT に定義されているか
* Android SDK のパスが bash_profile の ANDROID_SDK_ROOT に定義されているか
* ant のパスが bash_profile の ANT_ROOT に定義されているか

ということをチェックしています。

以前に Cocos2d-X の環境を作ったりしていれば `◯◯ is FOUND : ファイルのパス` のような出力がされるのですが、
not found の項目が表示された場合は設定を行うよう促されます。

下３つは Android の開発を行うために必要になるものなので、
もし開発が Web,iOS 向けだけだし、今すぐ作りたい！！といった場合は return キーを押してスキップしてしまっても構いませんが、設定すること自体はそんなに大変な作業でもないので後々設定するよりはここでやっておいたほうがよいかと思います。

下記にそれぞれのインストール先と設定方法を記しておきます。

### Cococs Console
Cocos Console は 最初にダウンロードしてきた Cocos-JS のパッケージの中に同梱されており、bash_profile へのパスの設定も自動的に行われているので、特に何もしなくて大丈夫です。


### Android NDK
https://developer.android.com/tools/sdk/ndk/index.html
上記より自分の環境に対応した NDK をダウンロードします。
任意のフォルダに展開しておきます。

### Android SDK
https://developer.android.com/sdk/index.html?hl=sk#download

Android SDK は Eclipse ADT に同梱されているので、上記より Eclipse ADT をダウンロード、任意のフォルダに展開、
フォルダ内の sdk フォルダ の場所が `ANDROID_SDK_ROOT` になります。

デフォルトでは最新バージョンの SDK のデータが入ってはいますが、いくつか入れておきたい場合は Eclipse ADT を起動し、

`Window -> Android SDK Manager`

を実行、

![](http://i.gyazo.com/99b27b6968746616d7d6cc9e25b7cad6.png)

いくつかのバージョンをインストールしておいてもいいかもしれません。

![](http://i.gyazo.com/1b6b63e51dbcba1d8036f92c10d52576.png)

それが済んだら仮想デバイスの作成もおこなっておきます。

`Window -> Android Virtual Device Manager` 

![](http://embed.gyazo.com/aeafe73318ab88e0861fd23a36461518.png)

開いたウィンドウの右側にある Create を押します。

![](http://embed.gyazo.com/cca6c6f73f1f6d1c519a9f50139b07ec.png)

エミュレーターの設定をしていきます。

`Emulation Options -> Use Host GPU`

はチェックしておかないと動作しませんので注意しましょう。
設定がひと通り済んだら ok を押して, Virtual Device Manager を開いた最初の画面に先ほど作成したデバイスが表示されていることを確認します。

デバイスを選択して右の start ボタンを押すとエミュレーターが起動します。

![](http://embed.gyazo.com/632bb8855bbb3ae8cc50f2fc3ba645cd_1.png)

### Ant

http://ant.apache.org/bindownload.cgi

よりダウンロードしてきて任意のフォルダに展開、中にある bin フォルダの場所を `ANT_ROOT` で指定します。

これらのパスを setup.py を実行して指定するか、.bash_profile を開いて追記しておきます。

すべて指定してあるとこんな感じになっているはずです。

```bash
export COCOS_CONSOLE_ROOT=/turusuke/cocos2d-js-v3.0/tools/cocos2d-console/bin
export PATH=$COCOS_CONSOLE_ROOT:$PATH
export NDK_ROOT=/turusuke/android-ndk-r10b
export ANT_ROOT=/turusuke/apache-ant-1.9.4/bin
export ANDROID_SDK_ROOT=/turusuke/adt-bundle-mac-x86_64-20140702/sdk
```

bash_profile を直接編集した場合は保存し、 `source .bash_profile` を実行し、設定を反映させましょう。

そして setup.py を実行して not found が出ていないことを確認します。

これでターミナルから cocos コマンドを実行できるようになっているはずです.

## プロジェクトの作成

```
cocos new HelloWorld -l js
```

と実行すると HelloWorld というフォルダが作られて、その中に HelloWorld プロジェクトのデータが生成されました！

### cocos new のオプション

cocos new で 指定できるオプションは以下に一覧が表示されています。

[http://www.cocos2d-x.org/wiki/Cocos_new#Available-Arguments](http://www.cocos2d-x.org/wiki/Cocos_new#Available-Arguments)


## 動作の確認

プロジェクトを作成したら各プラットフォームで実際に動作することを確認してみたいと思います。
アプリケーションを実行するためには `cocos run` というコマンドを使います。
cocos run で利用できるオプションには以下のようなものがあります。

### cocos run で指定できるオプション

|オプション|内容
|:-------|----|
|-h --help|ヘルプの表示。|
|-s --src|実行するプロジェクトの場所、指定していない場合は現在のフォルダで実行される。|
|-m --mode|debug モードか release モードで実行するかを指定できる。デフォルトは debug。|
|-p --platform|ターゲットプラットフォームの指定 web,ios,android|

platform オプションは入力必須となっています。

cocos run のドキュメントは以下のリンク先になります。

http://www.cocos2d-x.org/wiki/Cocos_run


### Web

```
cocos run -p web
```

これを実行するとローカルサーバーが立ち上がりブラウザが開きます。

![](http://i.gyazo.com/78151261ef540ff932224f172d69077f.png)

デフォルトで用意されている Hello World プログラムが実行され、無事 Web 上で動作を確認することができました。

### iOS

iOS での実行を確認するには iOS シミュレーターが必要となりますので、事前に Xcode がインストールされている必要があります。

プロジェクトフォルダで下記コマンドを入力すればシミュレーターが起動します。

```
cocos run -p ios
```

#### うまくいかない場合
自分の環境が悪いのかもしれないのですが、先日 Xcode を 6.0.1 にアップデートして以降このコマンドを使うとエラーが出てうまくいかなくなってしまいました…

そういった場合は、`Projectフォルダ > frameworks > runtime-src > proj.ios_mac` の中にある xcodeproj をダブルクリックして Xcode 上で実行すると動くかもしれません。

Xcode の左上にある赤枠の部分をクリックして、

![](http://i.gyazo.com/e8382d32d8a38800fd5f893c259d8233_1.png)

自分の作成しているプロジェクトと、実行させたいシミュレーターを選択します。

![](http://embed.gyazo.com/3600b4603e943135fb6d9219f0f4556a.png)

`command + r` で Run を実行すると、ビルドが行われた後シミュレーターが起動して実行が確認できるかと思います。

### Android

Android で実行する場合は上記で説明した SDK,NDK,Ant のパスの設定が済んでいる必要があります。
事前に先ほど Virtual Device Manager で作成しておいたデバイスを起動させておき、その後にプロジェクトフォルダで下記コマンドを入力します。

```
cocos run -p android
```

無事モバイルでも HelloWorld が実行されることが確認できたでしょうか？

参考：
[Mac OS X 10.9でCocos2d-x 3.2の環境構築](http://qiita.com/nownabe/items/496285423c74b47dcd42)