Cocos2d-x v3.2の開発環境を作ってみた

Cocos2d-x v2.2.2で構築していた開発環境を v3.2にバージョンアップしました。

Cocos2d-xは2Dゲームを作成するために必要な機能がまとめられたフレームワークで、マルチプラットフォーム開発ができることや、オープンソースで無料で使えるといった特徴があります。共通のソースコードでAndroidとiOSの両方のアプリが作れるので開発が楽になります。去年、Cocos2d-xの開発環境を作った時はv3.0がまだβ版だったこともあり、導入を見送って v2.2.2をインストールしましたが、昨日(2014/07/18) v3.2がリリースされたので思い切って、バージョンアップに踏み切りました。

ここでは、MacBook上に Cocos2d-x v3.2 の開発環境を作り、初期プロジェクトに含まれるHelloWorldアプリを、XcodeでビルドしてiOS端末で動かし、同じものをADT(Eclipse)でビルドしてAndroid端末で動かす、というクロスプラットフォーム開発を紹介します。

v2.2.2の記事はこちら→Cocos2d-xの開発環境を作ってみた。

Cocos2d-x v3.2開発環境の構成と主なバージョン

• MacBook (Mac OS X 10.9.4)
• Cocos2d-x v3.2
• Xcode v5.1.1
• ADT v23.0.2.1259578
• Android NDK r9d

現時点で最新バージョンのCocos2d-x、Xcode、ADT(Android Developer Tools)を使っています。Android NDKはr10が最新ですがCocos2d-x v3.2が対応していないようなので、旧バージョンのr9dを使いました。

Cocos2d-x開発環境の構築手順

はじめにiOSアプリの開発環境であるXcodeを使えるようにしてから、Androidアプリの開発環境であるADT(Eclipse)を使えるようにしていきます。

1. iOSアプリの開発環境を整える
   1. Xcodeをインストールする
   2. Cocos2d-xをインストールする
   3. プロジェクトを作成する
   4. Xcodeでビルドして実機で動作確認する
2. Androidアプリの開発環境を整える
   1. Javaをインストールする
   2. Android SDKとNDKをインストールする
   3. Eclipseを設定する
   4. Eclipseでビルドして実機で動作確認する

iOSアプリの開発環境を整える

1. Xcodeをインストールする

Mac App Storeから最新のXcodeをダウンロードしてインストールします。最新バージョンは v5.1.1でした。

Xcode
カテゴリ: 開発ツール
価格: 無料

2. Cocos2d-xをインストールする

Download Cocos2d-xから Cocos2d-x v3.2(cocos2d-x-3.2.zip)をダウンロードして適当なフォルダに解凍します。ここでは書類(/Users/shimodai(ユーザ名)/Documents/cocos2d-x-3.2)に配置しました。このフォルダには今後、プロジェクトを作成してプログラムコードやリソースファイル等も置いていくことにします。

続いて、ターミナルから初期設定スクリプト(setup.py)を実行します。

    $ cd ~/Documents/cocos2d-x-3.2
    $ ./setup.py 

NDK、SDK、ANTのパスを聞かれるので入力します。
（Android用の設定なのでAndroidで開発しない場合は全てスキップしても大丈夫です）

• NDK_ROOTのパス : /Applications/android/ndk
• ANDROID_SDK_ROOTのパス: /Applications/android/sdk
• ANT_ROOTのパス: (スキップ)

作業しているこのターミナルの設定を更新するために、忘れずにsourceコマンドを実行しておきます。

    $ source /Users/shimodai/.bash_profile

初期設定スクリプト(setup.py)が何をしているかというと、ツールの実行やビルドに必要なパスを環境変数として .bash_profileに設定しています。これによってターミナルから cocosコマンドやビルドコマンド(build_native.py)が使えるようになります。

    # Add environment variable COCOS_CONSOLE_ROOT for cocos2d-x
    export COCOS_CONSOLE_ROOT=/Users/shimodai/Documents/cocos2d-x-3.2/tools/cocos2d-console/bin
    export PATH=$COCOS_CONSOLE_ROOT:$PATH

    # Add environment variable NDK_ROOT for cocos2d-x
    export NDK_ROOT=/Applications/android/ndk
    export PATH=$NDK_ROOT:$PATH

    # Add environment variable ANDROID_SDK_ROOT for cocos2d-x
    export ANDROID_SDK_ROOT=/Applications/android/sdk
    export PATH=$ANDROID_SDK_ROOT:$PATH
    export PATH=$ANDROID_SDK_ROOT/tools:$ANDROID_SDK_ROOT/platform-tools:$PATH

3. プロジェクトを作成する

プロジェクトの作成はターミナルからcocos newコマンドを実行します。ここでは「~/Documents/cocos2d-x-3.2/projects/」フォルダにHelloWorldプロジェクトを作成しました。cocos newコマンドの使い方は「cocos new —help」で見ることができます。

$ cocos new -p jp.mnemonic.c2dx.helloworld -l cpp -d  ~/Documents/cocos2d-x-3.2/projects/ HelloWorld 

【cocos newコマンドのオプション】
-p パッケージ名：自ドメインを使って適当に
-l 開発言語(cpp、lua、js)：C++で開発するので cpp
-d プロジェクトパス名：v2系と同じ ~/Documents/cocos2d-x-3.2/projects/としました
最後のパラメータはプロジェクト名です

4. Xcodeでビルドして実機で動作確認する

Xcode用のプロジェクトファイルが作成されているのでこれを開きます。「~/Documents/cocos2d-x-3.2/projects/HelloWorld/proj.ios_mac」フォルダの中にある HelloWorld.xcodeproj をXcodeで開きましょう。開いたあとはiOSシミュレータを選択してBuild & Runすれば iOS版Hello Worldアプリの完成です！

Androidアプリの開発環境を整える

1. Javaをインストールする

ターミナルから java -version を実行して、Javaがインストールされているか確認して下さい。エラーになる場合は、Java for OS X 2013-005等をダウンロードしてJavaをインストールします。Javaの最新バージョンは 1.7ですが、ADTがJRE6を要求しているので 1.6を入れておくのが無難だと思います。

    $ java -version
    java version "1.6.0_65"
    Java(TM) SE Runtime Environment (build 1.6.0_65-b14-462-11M4609)
    Java HotSpot(TM) 64-Bit Server VM (build 20.65-b04-462, mixed mode)

2. Android SDKとNDKをインストールする

Android SDKはAndroidアプリのJavaの開発環境で、NDKはC/C++の開発環境です。Cocos2d-xによる開発はC++を使って行うため、Adnroid SDKと合わせてNDKのインストールが必要になります。

Android SDKは、Android SDK | Android Developersから「Download Eclipse ADT with the Android SDK Bundle for Mac」をクリックしてダウンロードします。今回は「adt-bundle-mac-x86_64-20140702.zip」をダウンロードしました。

Android NDKは、Android NDK | Android DevelopersからOS環境に合わせたものをダウンロードします。Mac OS X 64-bitの最新NDKは「android-ndk64-r10-darwin-x86_64.tar.bz2」ですが、Cocos2d-xはNDK r10に対応していないようなので、今回は一つ前の「android-ndk-r9d-darwin-x86_64.tar.bz2」を使いました。（公式ページには旧バージョンのダウンロードリンクが見当たりませんが、このリンクからダウンロードできます）

ダウンロードしたAndroid SDKと Android NDKを解凍してアプリケーションフォルダに配置します。わかりやすいパスになるようにこのようなフォルダ構成にしました。

• adt-bundle-mac-x86_64-20140702/eclipseをandroid/eclipseにリネーム
• android-ndk-r9dをndkにリネーム
• adt-bundle-mac-x86_64-20140702/sdkをandroid/sdkにリネーム

3. Eclipseを設定する

Eclipse(/Applications/android/eclipse/Eclipse.app)を起動して各種設定を行います。初回起動時に Android SDK Manager が起動してきた場合は、チェックが入っているものをインストールすれば最低限のものは入るはずです。あとは必要に応じて開発したいバージョンのAPI等を追加してください。ここでは Tools、Android 4.4.2(API 19)、Extrasの下記パッケージをインストールしました。

続いてEclipseの各種設定を行っていきます。

Android SDKのパスを設定します。
「Eclipse」−「環境設定」−「Android」−「SDK Location」に「/Applications/android/sdk」を設定しました。

NDKのパスをC++ Buildの環境変数に設定します。
「Eclipse」−「環境設定」−「C/C++」−「Build」−「Environment」に「Variable:NDK_ROOT Value:/Applications/android/ndk」を追加しました。

4. Eclipseでビルドして実機で動作確認する

Package Explorerペインで右クリックして「Import」−「Android」−「Existing Android Code Into Workspace」を選択、「Root Directory」に「/Users/shimodai/Documents/cocos2d-x-3.2/projects/HelloWorld/proj.android」を設定して、EclipseにHelloWorldプロジェクトをインポートします。

プロジェクトをインポートするとビルドエラーが出るので修正します。

• Cocos2dxActivity cannot be resolved to a type
• The import org.cocos2dx.lib cannot be resolved

Package ExplorerペインでHelloWorldプロジェクトを右クリックして「Properties」−「Resource」−「Linked Resources」を選択、Invalid Locationになっている「libcocos2d」のパスを「PROJECT_LOC/../cocos2d/cocos/platform/android/java/src」に修正します。

ビルドエラーが無くなったらAndroid端末の実機を接続して、HelloWorldプロジェクトを選択、「Run As」−「Android Application」で動作確認してみましょう。これでAndroid版Hello Worldアプリも完成しました！

クロスプラットフォーム開発を体験する

クロスプラットフォーム開発がどんな感じなのか体験するために、プログラムを変更してみました。アプリを実行したときに表示される「Hello World」を「Hello Cocos2d-x v3.2!」に変更して文字サイズを大きくしてみます。
XcodeでHelloWorldプロジェクトを開いてClasses/HelloWorldScene.cppの57行目を書き換えました。

    // add a label shows "Hello World"
    // create and initialize a label
   
    auto label = LabelTTF::create("Hello World", "Arial", 24);
   
    // position the label on the center of the screen
    label->setPosition(Vec2(origin.x + visibleSize.width/2,
                            origin.y + visibleSize.height - label->getContentSize().height));

    // add a label shows "Hello World"
    // create and initialize a label
   
    auto label = LabelTTF::create("Hello Cocos2d-x v3.2!", "Arial", 64);
   
    // position the label on the center of the screen
    label->setPosition(Vec2(origin.x + visibleSize.width/2,
                            origin.y + visibleSize.height - label->getContentSize().height));

Xcodeでビルドして実行すればiOS端末で、Eclipseでビルドして実行すればAndroid端末で「Hello Cocos2d-x!!」に変わっているのが確認できます。
共通のソースコードでAndroid/iOSに対応できるクロスプラットフォーム開発はとても便利ですね。