cocos2d-x 3.0 Final(正式版、安定版)を使ってみる(導入編)

最新情報

新たにcocos2d-x ver3.２インストールガイドを記載しました。
下部リンクよりご覧頂けますです。

[cocos2d-x 3.2 環境構築ガイド へ移動する]

ごあいさつ

こんにちは。OBAKESAN.netの管理人もっさんです。
マルチプラットフォームに対応した、オープンソースのゲームエンジン／フレームワーク cocos2d-x。
とうとう Version3.0の正式版／安定版(Final)が登場しました。

前回の記事ではcocos2d-x version3.0 betaでのセットアップ方法について記載しました。
今回は、正式版でのセットアップについて記載します。
いくつかbetaと設定方法が変わったところと、合わせてXcodeでcocos2d-xのビルドを早める方法なども記載しようと思います。

それではよろしくですです。
なお、今回もMacでのお話です。Win版での設定はまた違う方法になりますゆえ、ご了承くださいです。

※Androidの実機を持っているという前提で書いてます。そのためAndroidエミュレーターなどについては割愛します。
※その他cocos2d-xに関することでしたら、cocos2d-x タグよりどうぞです。

目次：

・Standby-001:cocos2d-xをダウンロードする
・Standby-002:Android ADTをダウンロードする
・Standby-003:Android NDKをダウンロードする
・Standby-004:cocos2d-xのsetupを行う(setup.py)
・Standby-005:プロジェクトを作成する

・iOS-001:iOS用の環境を構築する(Xcode)
・iOS-002:Xcodeで開き、編集する
・iOS-003:cocos2d-xのビルドの時間を短縮する

・Android-001:Android実機の開発者用設定を行う。
・Android-002:Eclipseの設定を行う
・Android-003:libcocos2dxのインポートと設定
・Android-004:自分のプロジェクトをインポートし、Android.mkを編集する
・Android-005:Eclipseに追加したプロジェクトの補足作業
・Android-006:実行してテストしてみる

Standby-001:cocos2d-xをダウンロードする

まずは、www.cocos2d-x.org/download/version#Cocos2d-xより、cocos2d-xをダウンロードしましょう。
すでにVersion3.1が出ていますが、今回使うのは3.0正式版のため、v3.0をクリックしてダウンロードします。下記画像をご参考ください。


ダウンロードしたファイル[cocos2d-x-3.0.zip]をダブルクリックすると解凍されると思います。
解答されたフォルダ[cocos2d-x-3.0]の中を見てみましょう。


こんな感じかと思われます。
これを、フォルダにコピーします。
私は、DropBoxの中にcocos本体ごとコピーしているので、
/DropBoxIn/Dropbox/cocos2d-x/cocos2d-x-3
の中にいれました。このあたりは各自の設定にお合わせください。

Standby-002:Android ADTをダウンロードする

cocos2d-xは、プロジェクト生成方法がrc0あたりからそれまでのものとは変わる形になりました。
そのため、ここでは先にAndroid用ファイル（ADT,NDK）もダウンロード、設定していこうと思います。
面倒くさいと思うかもしれません。でもでもここはほんのちょっとだけがんばって、やっていきましょー。

まずは、http://developer.android.com/sdk/index.htmlより、Android開発環境をダウンロードします。
以下の画像をご参考くださいです。


ダウンロードが終わりましたら、ファイルを解凍しましょう。Macでしたらダブルクリックでそのままファイルが解凍できると思います。
解答すると中に[eclipse]、[sdk]の２つのフォルダがあると思います。
これをMacのフォルダに入れるわけですが、今回はルート(HDDのトップ)に[Android_Cocos3]というフォルダを作って入れました。
その結果、以下のような感じになりました。

続きまして、NDKのダウンロードに進んでいきます。

Standby-003:Android NDKをダウンロードする

続いてNDKをダウンロードします。
http://developer.android.com/tools/sdk/ndk/index.htmlから、リスト内の[Mac OS X 64-bit]のものを選んでダウンロードしましょう。この記事を記載している時だと、[android-ndk-r9d-darwin-x86_64.tar.bz2]ですね。
私は[android-ndk-r9c]を利用していますため、記事もそちらで記載いたします。各自自分のバージョンにお合わせください。



解凍して、項目２で作成した[Android_Cocos3]のフォルダに入れましょう。
Standby-002の内容と合わせて、こんなかんじになったかと思います。

Standby-004:cocos2d-xのsetupを行う(setup.py)

続いて、cocos2d-xのセットアップを行います。
まず、cocos2d-xをコピーしたフォルダ(今回は [/DropBoxIn/Dropbox/cocos2d-x/cocos2d-x-3])の中の、[setup.py]を実行することになります。
実行の方法ですが、そのままダブルクリックしても起動しないと思いますため、[setup.py]の上で右クリックし、
このアプリケーションで開く→アプリケーション→ユーティリティ→ターミナル
でターミナルより起動します。下記画像をご参考ください。



セットアッププログラムが起動したと思います。

この項目ですが、私はすでに.bash_profileを設定済みなので、必要項目の記載のみとなります。
うまくいかないという方は、先に.bash_profileを設定する方法を以前の記事に記載致しましたため、そちらを先にやられた上でsetup.pyを実行されると良いかもしれません。


まずNDK_ROOTどこさ？と聞かれると思います。
今回の記事の場合ですと、[/Android_Cocos3/android-ndk-r9c]ですので、そう入力しエンターキーを押します。(繰り返しますが、ご自分のフォルダ名にお合わせ下さい。)

続いて、ANDROID_SDK_ROOTどこさ？と聞かれるのではないかと。
今回の記事の場合ですと、[/Android_Cocos3/sdk]ですので、そう入力しエンターキーを押します。

最後にANT_ROOTどこさ？と聞かれますが、これはそのままエンターでスキップしてOKです。

上記が終わると、

と表示されます。

自分のユーザーフォルダ(/Users/[自分のユーザ名])に.bash_profileというファイルが作成されたと思います。
なお、隠しファイルなのでそのままでは見えないかも。

あらたに アプリケーション→ユーティリティ→ターミナル でターミナルを開きます。
今後もターミナルはよく使うので、Dockに登録しておくと便利ではないかと。

.bash_profileを実行します。
ターミナルより、



と入力してエンターキーを押します。
これでパスが通ります。
なんか面倒くさくて大変だったかと思われます；UNIXやLinux、MS-DOSに慣れている人なら楽勝ではあるでしょうが。

次はプロジェクトの作成に入ります。ごめんなさい、またターミナル使います。
続いてがんばっていきましょー。

Standby-005:プロジェクトを作成する

※この項目は、jiroshinoさんの記事Cocos2d-x v3.0の使い方 を参考にしました。

ここまで大変お疲れ様でした。いよいよプロジェクトの作成に入ります。
まず先に、プロジェクトを入れるフォルダを作りましょう。
ここでは、ルートに[myprojects]というフォルダに入れると仮定します。先にFinderなどでご作成ください。

ターミナルをまた起動してください。


と入力しエンターを押します。フォルダが作られていれば、その中に入ります。続けて、



といった形で入力します。例でいうと、



といったような感じです。私の場合ですとドメインが obakesan.netなので、


という形になります。わたしドメインもってないよ！？という人は、今後のホームページ開設のことも兼ねて取得してこられるとよいかもかも。
そのあたりは別の話になるので割愛します。とりあえずテストで作るのであれば、[com.exsample.TestProject]でよろしいかと。

入力しエンターキーを押すと、プロジェクトがフォルダに作成されます。
今回の記事では、上記の通りプロジェクトフォルダ [/myprojects/TestProject]内のプロジェクトとして話を進めていきます。

cocos newの時点で命令が実行できない場合には、パスの設定がちゃんとできたかどうかを見直しましょう。

次の項目からは、iOS編とAndroid編に分かれます。
ここらで一呼吸おいて、次へすすみましょー。

iOS-001:iOS用の環境を構築する(Xcode)

Dock、もしくはLanchpadから[App Store]というアプリケーションを開きます。
右上の検索ボックスから、[Xcode]と入力してretuenキーを押します。
すると一覧がでてきますので、Xcodeを選んでインストールしましょう。
アカウント作成などについては省略します。Apple ID持ってない人はつくりましょー。

iOS-002:Xcodeで開き、編集する

プロジェクトフォルダ[/myprojects/TestProject]内の、[proj.ios_mac]を開きます。
その中にある[プロジェクト名].xcodeproj をダブルクリック。
これでXcodeでcocos2d-xプロジェクトが開きます。
続けて、Xcodeでのビルド時間を短縮する作業を行おうと思います。

iOS-003:cocos2d-xのビルドの時間を短縮する

これは必須項目ではありません。やりたい方のみで大丈夫です。

cocos2d-xですが、ver3.0になってから標準時のファイルが多くなったためか、ビルドの時間がver2系よりも長くなったように感じます。
そのため、Xcodeでビルド時間を短縮する為の設定を行おうと思います。

dSYMを無効化する
※この項目は、#junki::acousticさんの記事UnityアプリをiOSに書き出す時間をdSYMを無効化して早くするを参考に致しました。

デバッグリポート時に使用するdSYM作成を無効化してスピードアップします。
なお、アプリをAppleStoreに送信する際は、こちらを有効化に戻してからビルドしてください。そうしないと、Appleからエラーリポートが来ても照らし合わせができません；

まずは、左上のプロジェクト名のところをクリックします。現在選択されているところですね。
続いて右側TARGETS一覧の、[プロジェクト名] iOS となっているところを選択します。


続いて、右上の検索欄に[Debug Information Format]と入力します。
そうしますと、Build Optionsに[Debug Information Format]が出ますため、項目を[DWARF]にします。ドワーフ！
下記画像をご参考ください。

うまくいきましたでしょうか？次は[Find Implicit Dependencies]の設定方法です。


[Find Implicit Dependencies]設定を行う

※この項目は、hirobeさんの記事CocoaPodsのビルドをスキップするを参考に致しました。

こちらも、アプリをAppStoreに出す時には、設定を元に戻してからビルドしたほうが良いと思います。

Xcodeで、Find Implicit Dependenciesの設定を行います。
まずは、Xcode画面左上のプロジェクト名を右クリック(タッチパッドの人は、日本指でクリック)。


続いて、[Edit scheme]を選びます。


[Find Implicit Dependencies]のチェックを外す。そのあと、右下の[OK]を押す。


大変お疲れ様でした。とりあえずこれでiOS編は終わりです。続いてAndroid編になります。
すこし休んでから、続けていきましょう。次はEclipseが中心の話になります。

Android-001:Android実機の開発者用設定を行う。

Android用設定を行う前に、実機の開発者用設定を行いましょう。
開発者用モードに入らないと、実機でのテストができません。
モードに入るための方法は、Androidのバージョンによって違います。

今回はAndroidの実機をもっているという前提で書いていますが、まだ持っていない方は、Nexus7 2013などいかがでしょう。私はとても気に入っています。

開発者用設定を行うには、以下の検索結果に表示された方法で行えるかと思えます。
Android 開発者設定 での検索結果

Android-002:Eclipseの設定を行う

cocos2d-xでAndroid用開発を行うためには、Eclipseを使います。新たにcocos IDEというものもできたそうですが、ここでは一緒にダウンロードしてきたEclipseで解説致します。

なお、ここで注意点ですが、私はEclipseを英語版のまま使っているので、この先も英語版のUI名でご説明致します。
また、私の場合はNDKが[android-ndk-r9c]ですが、最新版は違うバージョンになっていると思いますため、そのあたりは各自の環境に合わせてくださいです。

Standby-002の通りに行っている場合、[Android_Cocos3]　フォルダの中に、[eclipse]というフォルダが有ると思います。
その中の[Eclipse.app]を開きましょう。
Eclipseが起動します。最初にWorkspaceフォルダを決めろと言われますので、どこかにフォルダをつくって、そこを指定しましょう。
・・・えっ、どこでもいいのっ　と思われましたか。cocosのフォルダがそこにないといけないわけではないので、ご自分の好きなところでよろしいかと思うのです。

続いて、Eclipseの設定を行います。
設定は、こちらの記事を参考にしました。
メモブログ:Android/iOSアプリ開発 環境構築編その３

Macの場合は、左上のメニューから[ADT]をクリックし、
[環境設定]→[General]→[Workspace]→右三角をクリックして[Linked Resources]
右項目内の[New]ボタンを押します。


今回の場合は、

Name:
COCOS2DX

Location:
参考にさせて頂いた記事と同じく、
/DropBoxIn/Dropbox/cocos2d-x/cocos2d-x-3
にしました



その後も記事と同じく、
メニュー左上[ADT]→[環境設定]→[C/C++]→[Build]→[Environment]より、
[Add]ボタンを押して、Andoid NDKのフォルダを指定します。
記事に合わせて今回の場合だと、

Name:
NDK_ROOT

Value:
Android_Cocos3/android-ndk-r9c

ですね。今回は手動で入力する必要があります。フォルダを選んで自動入力はしてくれません。


続いて、Android SDK Managerを起動します。
上のメニューから、[Window]→[Android SDK Manager]で起動します。
Android SDK　Managerにつきましては、
Java Drive：Android SDKのダウンロードとインストール
の、[SDKマネージャーを使ったライブラリのインストール]からが参考になります。

上記記事とおなじく、私は
「Android 4.0.3(API 15)」「Android 2.3.3(API 10)」
のSDKをインストールしました。
インストール後は、Eclipseを再起動しましょう。

Android-003:libcocos2dxのインポートと設定

続いてlibcocos2dxというものをインポートすることになります。

インポートの仕方は、左上メニューから
[File]→[New]→[Project]→[Android]→[Android Project from Exisiting Code]
その後、右上の[Browse]で、cocos2d-x本体フォルダ[cocos2d-x-3]内の
[cocos]→[2d]→[platform]→[android]を指定します。
※なお、Copy projects into workspace にはチェックは入れません。

こんな感じになりましたでしょうか。

初期状態だと文字コードがSHIFT_JISになっているかもしれません。

インポートされたlibcocos2dxの上で右クリックして、[Properties]を選びます。
Text File EncodingをUTF-8にします、こんなかんじに。

Android-004:自分のプロジェクトをインポートし、Android.mkを編集する

続いて、自分のプロジェクトをインポートするのですが、その前にやることがあります。
まずは、Android.mkというものを編集します。
Android.mkは、プロジェクトフォルダ内の[proj.android/jni/Android.mk]にあります。テキストエディッタなどで開きましょう。

このAndroid.mkですが、「このプロジェクトにはこんなファイルがあるんですよー」というようなインデックスの役目を果たします。

この中に一つ一つ自分で追加したものを手作業で追加してもよいのですが、はっきりいって大変です。
特にXcodeで作成していく場合、Xcodeでのフォルダ構成はそのままだと維持できないため、平たくファイルを作っていくとバージョンアップ時などにえらい苦労することにもなりかねません。

そこで！Classesのフォルダ構成を参照できるよう、前回とは違って新たに いちおくまんえんさんの記事
Classes内にディレクトリを作って整理する Android.mkの自動化を参考に、以下のように変更しました。

私は上記記事を参考に、こんな形になりました。

保存します。Android.mkは保存後閉じてかまいません。


Stanby-004でsetup.pyを実行した要領で、
プロジェクト(TestProject)のフォルダ→[proj.android]内の、
build_native.py をターミナルで実行します。
これでEclipseで実行できる形になります。

ファイルが多い場合には、ある程度時間がかかると思います。

終わるまでの間、もう一杯コーヒーでもどうでしょう。
セブン-イレブンが近くにある人がうらやましい。
関係無いですねすいません。

libcocos2d-xをインポートした要領で、作成したプロジェクト[TestProject]フォルダ内の[proj.android]をインポートします。
こちらも、Copy projects into workspaceにチェックは入れずにFinishボタンを押します。

こちらもlibcocos2dxの時と同じく、SHIFT_JISからUTF-8に設定しなおしましょう。

Android-005:Eclipseに追加したプロジェクトの補足作業

インポートしたプロジェクトにエラーがつくかもしれません。インポートした自分のプロジェクト(TestProject)の上で右クリック、[Properties]→[Android]を見てみます。
Referenceの所にエラーがついていました。

この場合、まずバツ印を選択してから、右の[Remove]を押してこれを消します。
その次に、右の[Add]ボタンを押して、libcocos2dxを選択。
無事エラーが消えました。
続いて、上の所にあるTargetNameを私は4.0(API 15)に選択しました。

Android-006:実行してテストしてみる

あとは、Android実機(開発者用設定済み)をつなぎ、自分のプロジェクトの上で右クリック→[Run As]→[Android Application]で実行です。


・・・おつかれさまでした。
工数的には、結構長く感じたかもしれません。
もし途中でつまったら、一からやり直していくのも手かも。
Android開発に慣れている人のほうが、Eclipseの設定は楽でしょうね。

ようやくcocos2d-xもVersion3.0が正式版になりました。
個人的な感想ですが、ver2系よりもver3系のほうが開発はしやすくなっていると思います。
内容もVer2系とはかなり違ってきているので、これから覚えるのであればVer3系を覚えたほうが良いのではないでしょうか。
(むしろいっそUnityを・・・って話もありはしますが；)

今後もcocos2d-x関連の記事は書いていきたいので、またなにか追加した際にはよろしくでございますです。

更新履歴

2014/06/01: ダウンロードURLを変更(v3.1が出たため)
2014/05/06: [iOS-004:例外エラーの発生箇所で止まるようにする] を設定するとaudioSourcePlayerで止まってしまうようなので、一旦削除しました。
2014/05/05: エラー対策に、新たに[iOS-004:例外エラーの発生箇所で止まるようにする]を追加。
2014/04/27: ファーストバージョン