LoginSignup
10

More than 3 years have passed since last update.

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

Last updated at Posted at 2014-09-23

先日 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 が実行されることが確認できたでしょうか?

参考:
Mac OS X 10.9でCocos2d-x 3.2の環境構築

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10