先日 Cocos2D-JS 3.0 がリリースされたということで、
一から勉強していこうと思います。
今回は Cocos2d-JS のダウンロードから Hello World するまでを書いてみました。
実行環境
バージョン | |
---|---|
MacOS | 10.9.5 |
Cocos2d-JS | v3.0 |
Python | 2.7 |
Xcode | 6.1 |
COCOS2D-JS をダウンロード
より Cocos2d-JS の現時点での最新版 v3.0 をダウンロード。
セットアップ
ダウンロード完了後、圧縮ファイルを解凍して展開されたフォルダを任意の場所に置きます。
フォルダ内に setup.py
があるので、ターミナルなどで実行します。
./setup.py
そうすると以下のような画面が表示されます。
赤枠の中で何をしているのかを上から順番に説明すると、
- 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 の項目が表示された場合は設定を行うよう促されます。
下3つは 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
Android SDK は Eclipse ADT に同梱されているので、上記より Eclipse ADT をダウンロード、任意のフォルダに展開、
フォルダ内の sdk フォルダ の場所が ANDROID_SDK_ROOT
になります。
デフォルトでは最新バージョンの SDK のデータが入ってはいますが、いくつか入れておきたい場合は Eclipse ADT を起動し、
Window -> Android SDK Manager
を実行、
いくつかのバージョンをインストールしておいてもいいかもしれません。
それが済んだら仮想デバイスの作成もおこなっておきます。
Window -> Android Virtual Device Manager
開いたウィンドウの右側にある Create を押します。
エミュレーターの設定をしていきます。
Emulation Options -> Use Host GPU
はチェックしておかないと動作しませんので注意しましょう。
設定がひと通り済んだら ok を押して, Virtual Device Manager を開いた最初の画面に先ほど作成したデバイスが表示されていることを確認します。
デバイスを選択して右の start ボタンを押すとエミュレーターが起動します。
Ant
よりダウンロードしてきて任意のフォルダに展開、中にある bin フォルダの場所を ANT_ROOT
で指定します。
これらのパスを setup.py を実行して指定するか、.bash_profile を開いて追記しておきます。
すべて指定してあるとこんな感じになっているはずです。
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
動作の確認
プロジェクトを作成したら各プラットフォームで実際に動作することを確認してみたいと思います。
アプリケーションを実行するためには cocos run
というコマンドを使います。
cocos run で利用できるオプションには以下のようなものがあります。
cocos run で指定できるオプション
オプション | 内容 |
---|---|
-h --help | ヘルプの表示。 |
-s --src | 実行するプロジェクトの場所、指定していない場合は現在のフォルダで実行される。 |
-m --mode | debug モードか release モードで実行するかを指定できる。デフォルトは debug。 |
-p --platform | ターゲットプラットフォームの指定 web,ios,android |
platform オプションは入力必須となっています。
cocos run のドキュメントは以下のリンク先になります。
Web
cocos run -p web
これを実行するとローカルサーバーが立ち上がりブラウザが開きます。
デフォルトで用意されている 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 の左上にある赤枠の部分をクリックして、
自分の作成しているプロジェクトと、実行させたいシミュレーターを選択します。
command + r
で Run を実行すると、ビルドが行われた後シミュレーターが起動して実行が確認できるかと思います。
Android
Android で実行する場合は上記で説明した SDK,NDK,Ant のパスの設定が済んでいる必要があります。
事前に先ほど Virtual Device Manager で作成しておいたデバイスを起動させておき、その後にプロジェクトフォルダで下記コマンドを入力します。
cocos run -p android
無事モバイルでも HelloWorld が実行されることが確認できたでしょうか?