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分くらいかかります)

サンプルMyTestGameの実行

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

cd \cocos_2d_projects\MyTestGame

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

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

cocos run -p web

(参考)chromeのcacheが聞いて、コード変更が反映されづらい場合はctrl+Iを押して、developer toolを開き、さらにF1を押して開いたsettingsでDisable cacheを有効にすると開発しやすい

色んな実行環境向けにビルドする

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

cocos run -p web -m release

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

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

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

• ビルドにANTを使っているため、ANTが導入されていなとビルド失敗
  具体的には javascriptのminify・難読化のためにANTの中でGoogle Closure Compilerを使ってるようです

• ビルド時のエラーメッセージ「No Valid JDK」が出る場合

No Valid JDK

java8以降がインストールされている場合、ビルドに失敗し上記のようなメッセージがでました。

そこでjavaのバージョンを（一時的に）**1.7**にしました。

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をいちばん後ろにもってくる

こんなイメージ↓

xxxxx;yyyyy;C:\ProgramData\Oracle\Java\javapath;

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

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

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

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

java -version

４．コマンドを実行

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用にビルドされ↓のように無事起動しました。

アプリのインストール

以下のディレクトリに

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で開くと、

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

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

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

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

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

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

まとめ

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

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