Cocos2d-JS のサンプルを動かしてみる (Android編)

img-cocos2djs

先日 Cocos2d-JS のサンプルを iOS アプリとして実行するやり方を紹介しましたが、今回は Android アプリ編です。

Android は iOS と比較して開発環境を整えるのが大変で、記事の内容もほとんど Android アプリの開発環境設定の話になってしまいました。。(2015年6月8日 時点での情報です)

使用した環境

OS: Mac OS X 10.10.3
Cocos2d-JS: v3.6.1

JDK: 1.8.0_31
Android SDK Tools: r24.2
Android: 5.1.1 – API Level 22
Android NDK: r10e
ant: Apache Ant(TM) version 1.9.4

設定手順

Java Development Kit (JDK) の確認

使用中の Mac OS X に Java Development Kit (JDK) がインストールされているかどうか確認します。

ターミナルから javac -version と入力すれば JDK のバージョンが大体わかります。

この例の場合、Java 8 の JDKがインストールされていることが伺えます。もし javac が使えなかった場合は以下のサイトなどを参考に、最新の JDK をインストールしてください。

MacにJava(JDK)をインストール
http://qiita.com/ryo0301/items/3c9a02e03b4e9a41f576

Android SDK のインストール

Android SDK はいろいろなバージョンの Android 用に用意されているのでバージョン管理が大変そうですが、Android SDK Manager というありがたいものが用意されています。

現在標準的な Android 開発 IDE である Android Studio にはこれが含まれているのですが、Cocos2d-JS のプロジェクトは Android Studio ではなく Eclipse 用の設定ファイルしか含んでいないため、今回は Android Studio を避けます。

以下のページから Mac OS X 用 SDK Tools のパッケージをダウンロード・解凍し、任意の場所に置きます。自分は /opt/android-sdk-macosx に置きました。

https://developer.android.com/sdk/index.html#Other

Screen Shot 2015-06-07 at 2.08.50 PM

この中の android というコマンドから、Android SDK Manager を含めていろいろなツールが呼び出せます。android sdk とを実行すると Android SDK Manager を起動できます。

Screen Shot 2015-06-07 at 2.48.19 PM

Android SDK Manager の GUI が開いたら、デフォルトでいくつかの SDK が選ばれています。Android M というのは Lollipop の次の Android のことですが、今回は使わないので外すのがおすすめです。

Android Native Development Kit (NDK) のインストール

Cocos2d-JS は Cocos2d-x 上で動作しており、Cocos2d-x は主に C++ で記述されています。ですので Android 上で C++ を動作させるために Android Native Development Kit (NDK) のインストールが必要になります。

https://developer.android.com/ndk/downloads/index.html

Mac OS X 用のパッケージをダウンロードし、任意の場所に解凍します。自分は /opt/android-ndk-r10e にしました。

antの確認

ant は汎用のビルドコマンドです。(昔でいう make ですかね。。) 最近のMac OS X には含まれていないようなので、もし ant -version と入力してエラーになるようであれば以下のサイトなどを参考に ant をインストールします。

Mac OS X 10.9 ( Mavericks ) に Homebrew で Apache Antをインストールする

http://yoshiweb.net/blog/?itemid=374

Cocos2d-JS に Android SDK, NDK, ant の情報を設定する

最後に「Cocos2d-JS の開発環境を構築する」で使用した setup.py を実行します。前回 Android NDK と SDK の場所は指定しませんでしたが、今回は指定します。青い部分はユーザーからの入力です。

うまくいけば .bash_profile に必要な設定が追加されているはずです。

Screen Shot 2015-06-07 at 5.04.28 PM

一度ログインし直して設定を反映させます。これで実行する設定は完了です。

Android Virtual Device (ADV=シミュレーター) の設定

ここではシミュレーターで実行する手順を書きますが、Android アプリをシミュレーターで動かすのは大変なうえ重いので、本格的に開発する場合は Android の実機を用意することを強くお勧めします。

まず Android SDK Tools に含まれている android avd コマンでで Android Virtual Device Manager を起動します。

 

[Device Definitions] を押して定義済みのテンプレートを使います。GoToDevDef

[Nexus 4 by Google] を選んで、

 

Screen Shot 2015-06-08 at 12.36.30 PM

 

このような設定にしました。

Screen Shot 2015-06-08 at 12.45.45 PM

CPU を ARM (armeabi-v7a) にしないと動作しなかったので注意してください。どうも NDK が ARM 用のネイティブコードしか生成していないような気がします。(これ CPU が Intel の実機だとどうなるんだろう・・・)

[Android Virtual Devices] のページの戻って、[Start…] ボタンでこの設定の AVD を起動しておきます。自分の環境では起動するまで数分かかったので辛抱強く待ちます。

StartAVD

 

起動すると以下のようなウインドウが表示されます。

Screen Shot 2015-06-07 at 5.52.23 PM

実行

上述の Android シミュレータ (AVD) が起動している状態で Cocos2d-JS プロジェクトのあるディレクトリに行って cocos run -p android と入力します。最初のビルドは数分かかるので辛抱強く待ちます。

 

うまくいけば先ほど起動しておいた Android シミュレーター上でサンプルアプリが実行されます!!

Screen Shot 2015-06-08 at 12.25.45 PM

 

ここまであえて Eclipse を使わないで来ましたが、次回は Eclipse を使って開発する方法を紹介しようと思います。

スポンサーリンク


2 comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です