cocos2d-JS V3.15 をインストールしてサンプルを動かすまでのメモ

クロスプラットフォームのゲーム開発環境のcocos2d-JSでサンプルアプリを動作させるまでのメモです

# 環境とやること
- cocos2d-JSをインストールする（※）
- cocos2d-JSのサンプルアプリをHTML5用にビルド＆実行する
- cocos2d-JSのサンプルアプリをAndroid用にビルド＆実行する
- cocos2d-JSのサンプルアプリをWindows用にビルド＆実行する

- 動作環境は Windows7

※ cocos2d-JSはcocos2d-xに統合されているので、cocos2d-xをインストールした上で、cocos2d-JSの機能を使う


## 事前準備
事前準備として、いくつかのソフトウェアを導入します

０．コマンドプロンプトでgitコマンドが使えるようにしておきます
　https://git-for-windows.github.io/
　⇒git cloneで最新のcocos2d-xをダウンロードするため

１. pythonはインストールしておき、pythonコマンドが通るようにしておきます
  https://www.python.org/downloads/windows/

２. ANTをダウンロードして展開する
  http://ant.apache.org/bindownload.cgi
  ・apache-ant-1.10.1-bin.zip
　⇒展開先ディレクトリは `C:\apache-ant-1.10.1`

　また、AndroidとWindows用にもビルドできるよう以下も入れておきます

３. Androidアプリとしてビルドしたい場合は、Android SDKをインストールしておきます
  https://developer.android.com/studio/index.html
　⇒SDKインストール先は `C:\Users\［username］\AppData\Local\Android\sdk`


４. Androidアプリとしてビルドしたい場合は Android NDK もインストールしておきます
　https://developer.android.com/ndk/downloads/index.html
　⇒インストール先は `C:\android-ndk-r14b`

５. Windowsアプリとしてビルドしたい場合は、Visual Studio をインストールしておきます
　https://www.visualstudio.com/ja/downloads/

## 環境変数の設定
以下のように、環境変数をセットします。
（それぞれの環境にあわせた値をセットします）

**NDK_ROOT**⇒**C:\android-ndk-r14b**
**ANDROID_SDK_ROOT**⇒**C:\Users\［username］\AppData\Local\Android\sdk**
**ANT_ROOT**⇒**C:\apache-ant-1.10.1\bin**
(\binまで入れることを忘れない)

# cocos-2d-js のインストール
## コマンドプロンプトを開く
```
cmd
```

## cocos2d-xをcloneする

コマンドプロンプトで以下を実行していきます

・cocos2d-xのソースをclone

```
git clone https://github.com/cocos2d/cocos2d-x.git
```

・clone終わったら以下を実行

```
cd cocos2d-x
python download-deps.py
```

以下のように聞かれたら **Yes**入力

```
==> Would you like to save 'v3-deps-136.zip'? So you don't have to download it later. [Yes/no]: Yes
```

・submodule updateします

```
git submodule update --init
```

・setupを実行します

```
./setup.py
```

これで、cocos2dのインストール完了です！

# サンプルプロジェクトの作成
インストールが終了したら、（各種設定反映のため）いったんコマンドプロンプトを閉じて、
もう一度コマンドプロンプトを開きます

## サンプルゲームを作成する

以下のコマンドで **MyTestGame**というプロジェクトを**org.riversun.ccgame**というパッケージ名で、**c:\cocos_2d_projects**ディレクトリに生成します

```
cocos new MyTestGame -p org.riversun.ccgame -l js -d c:\cocos_2d_projects
```

すると初回は、

```
Cocos collects data when the command-line tools are used for development. This data is examined in t
he aggregate only and is used to continually innovate and improve Cocos products. This data is anony
mous and includes, but is not limited to, a unique hardware identifier, version number our software
and information on which tools and/or services in Cocos products are being used and how they are bei
ng used. We take your privacy seriously and we do not share or sell any of this data. You can opt-ou
t from sharing this data with us, but by sharing you help contribute to growth of Cocos.

Do you agree to sent the data? [Y]es, [N]o
```
と聞いてくるので「Y」か「N」を任意で回答する

以下の用にファイルのコピーが開始されます
(結構な量のファイルをコピーするので1分くらいかかります)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/170905/30a86522-7dc8-2a90-b2ff-f086a94d4933.png)


# サンプル**MyTestGame**の実行

- 先ほどのディレクトリに移動する

```
cd \cocos_2d_projects\MyTestGame
```

## Webアプリとしてdebugビルドしてブラウザで実行する

以下のコマンドを実行するとwebサーバーが立ち上がり、webブラウザ上でサンプルアプリの動作を確認できます

```
cocos run -p web
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/170905/913671b1-c8d5-d468-9ff0-d7c18b5316ed.png)

(参考)chromeのcacheが聞いて、コード変更が反映されづらい場合は**ctrl+I**を押して、developer toolを開き、さらに**F1**を押して開いたsettingsで**Disable cache**を有効にすると開発しやすい
![image.png](https://qiita-image-store.s3.amazonaws.com/0/170905/84ab6a2a-aed9-c618-f42c-55e3ae78586e.png)

# 色んな実行環境向けにビルドする
## Webアプリとしてreleaseビルドしてブラウザで実行する

```
cocos run -p web -m release
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/170905/dc1e8140-03eb-9cb8-82ae-b1c9e5c002d1.png)

webアプリとしてreleaseビルドするとjsファイルが統合され、かつminify・難読化されパッケージとしてのポータビリティが向上します。

出力先フォルダはこんな感じ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/170905/9d12ef5e-eb12-d842-e1d7-a2ffbfd26db7.png)

## webアプリ・リリース・ビルドに失敗する場合

- ビルドにANTを使っているため、ANTが導入されていなとビルド失敗
 具体的には javascriptのminify・難読化のためにANTの中で[Google Closure Compiler](https://github.com/google/closure-compiler)を使ってるようです

- ビルド時のエラーメッセージ「No Valid JDK」が出る場合
 
```
No Valid JDK
```
java8以降がインストールされている場合、ビルドに失敗し上記のようなメッセージがでました。

そこでjavaのバージョンを（一時的に）**[1.7](http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javase7-521261.html)**にしました。

pythonで書かれた↓のソースを読むとJavaのバージョンがjava6(1.6)とjava7(1.7)しか対応していない模様。java8(1.8)以降対応が待たれます。

```
[cocos2d-x_clone_dir]\tools\cocos2d-console\plugins\plugin_compile\build_web\__init__.py
```

**Java8(1.8)**以降がインストールされたWindowsのコマンドプロンプトで　**Java7(1.7)**が使えるようにするのは少し手間でした。

**手順**

１．システム環境変数PATHの先頭にある**C:\ProgramData\Oracle\Java\javapath**をいちばん後ろにもってくる

```TEXT:こんなイメージ↓
xxxxx;yyyyy;C:\ProgramData\Oracle\Java\javapath;
```

２．以下のディレクトリにある**java.exe**,**javaw.exe**,javaws.exeを削除する

```
　C:\Windows\SysWOW64
　C:\Windows\system32
```

３．コマンドプロンプトを開く

コマンドプロンプトで**java 1.7**が有効になったことを確認します

```
java -version
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/170905/ecc5a5eb-ea38-174f-87b3-c874362c429a.png)

４．コマンドを実行

```
cocos run -p web -m release
```
これでうまくいきました。


５．EOLなJavaなので用が済んだら戻します

# Androidアプリとしてビルド

jsで書いたコードをAndroidアプリのnativeコード(NDK)として実行できる形式にビルドしてくれます。

## ビルドするためのコマンド

以下を実行して、Android用にビルドします。

```
cocos run -p android -j 4 --ap android-23
```

**注意点**

- APIレベル  
最後の **--ap android-23**はAndroidのAPIレベルです。
このオプションを指定しないとandroid-13（古～い）としてビルドされます。
また、ビルドの際にはeclipseプロジェクトとして雛形が生成されるようでこれまた懐かしい感じです。
（android studio用のプロジェクトができるようにするにはコマンドの語尾に**--android-studio**オプションを付与します。）

- ターゲットプラットフォーム(ARMかx86か)
デフォルトだとARM向け(armeabi)になっていますが、x86で動作するapkを作りたい場合は、以下のmkファイルを開きます
```
C:\cocos_2d_projects\MyTestGame\frameworks\runtime-src\proj.android\jni\Application.mk
```

そして以下のようにします
```
APP_ABI := armeabi
```
↓
```
APP_ABI := x86
```

ビルドには5分～の時間がかかるので気長に待ちます。

ビルド後ご親切にアプリを起動してくれますが、自分でapkを入れてもOK。

## Androidの実行画面

エミュレータを起動しておいたので、Android用にビルドされ↓のように無事起動しました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/170905/8135bd78-bf98-c592-8f5e-37d15aa3ddcc.png)


## アプリのインストール

以下のディレクトリに
```
C:\cocos_2d_projects\MyTestGame\frameworks\runtime-src\proj.android\bin
```

デバッグビルドされたapkが生成されていますので、

```
MyTestGame-debug.apk
```

```
adb install MyTestGame-debug.apk
```
でインストールしてもOK。


# Windowsアプリとしてビルド

## コマンドラインでビルドする

以下のコマンドでwindowsとしてビルド実行できる、、、はずでしたが
うまくいきませんでした。

```
cocos run -p win32
```

そこでwindowsアプリとしてビルドするためにIDEとして**visual studio 2017 community**を利用しました。

以下にあるソリューションファイルを開きます
```
C:\cocos_2d_projects\MyTestGame\frameworks\runtime-src\proj.win32\MyTestGame.sln
```

**MyTestGame.sln**をvisual studioで開くと、

![image.png](https://qiita-image-store.s3.amazonaws.com/0/170905/ce2b62ce-762b-cf9c-2bfc-0682dab56ffd.png)

とおすすめされるので、従って**[OK]**をクリック。

ソリューションを開くとvisual studioさんは、ほかにも「あれが足りない、これが足りない」といってくるので、その指示に従って各種ダウンロード等します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/170905/9327ba43-4bfd-0bd2-e3ae-30e6fe8661ec.png)

エラーが消えたら、ビルド＋実行をします。

ビルドには5分～かかりました。

## windows版サンプルアプリの実行

無事、windows版も実行できました

![image.png](https://qiita-image-store.s3.amazonaws.com/0/170905/496d1eea-1ace-09da-58c5-8f09f2901c73.png)

# まとめ
- cocos2d-Xのjavascript版(cocos2d-JS)をwindows pcに導入
- Web向け、Android向け、Windows向けにそれぞれビルド＆実行して、クロスプラットフォーム対応のさわりを確認

さぁ、2Dゲームを作ろ！