クロスプラットフォームのゲーム開発環境の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ゲームを作ろ！