OBAKESAN.net FUNNY and HAPPY App
  • 最新情報



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

    [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をクリックしてダウンロードします。下記画像をご参考ください。
    cocos2dxダウンロード


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


    こんな感じかと思われます。
    これを、フォルダにコピーします。
    私は、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開発環境をダウンロードします。
    以下の画像をご参考くださいです。
    AndroidADTダウンロード


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

    続きまして、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]を利用していますため、記事もそちらで記載いたします。各自自分のバージョンにお合わせください。



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


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



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

    上記が終わると、
    Please execute command: "source /Users/[自分のユーザー名]/.bash_profile" to make added system variables take effect
    logout
    [プロセスが完了しました]

    と表示されます。

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

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

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

    source ~/.bash_profile


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

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

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



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

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

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

    cd myprojects

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

    cocos new [あなたのプロジェクト名] -p [あなたのドメイン名を逆に].[あなたのプロジェクト名] -l cpp


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

    cocos new TestProject -p com.exsample.TestProject -l cpp


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

    cocos new TestProject -p net.obakesan.TestProject -l cpp

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

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

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

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

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



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



    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 となっているところを選択します。
    dSYM作成を無効化する01


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

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


    [Find Implicit Dependencies]設定を行う

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

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

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


    続いて、[Edit scheme]を選びます。
    Dependencies設定の変更_EditScheme


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


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


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



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

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

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


    Android-002:Eclipseの設定を行う



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

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

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

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

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


    今回の場合は、

    Name:
    COCOS2DX

    Location:
    参考にさせて頂いた記事と同じく、
    /DropBoxIn/Dropbox/cocos2d-x/cocos2d-x-3
    にしました
    <strong>Android</strong>ADT設定02



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

    Name:
    NDK_ROOT

    Value:
    Android_Cocos3/android-ndk-r9c

    ですね。今回は手動で入力する必要があります。フォルダを選んで自動入力はしてくれません。
    <strong>Android</strong>ADT設定03


    続いて、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 にはチェックは入れません。

    こんな感じになりましたでしょうか。
    libcocos2dxインポート後

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

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



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



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

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

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

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

    私は上記記事を参考に、こんな形になりました。
    <strong>Android</strong>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の所にエラーがついていました。
    ライブラリーエラー01

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



    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: ファーストバージョン
    この記事へのコメント:
    Comment No.1 2014/05/24 Yasu この記事を参考にして、無事にcocos2d-xを導入する事ができました!
    ありがとうございました!
    Comment No.2 2014/05/24 管理人もっさん Yasuさん

    OBAKESAN.netの管理人もっさんです。

    コメントありがとうございます!今後もcocos2d-xについては書いていこうと思います。
    アプリ開発、おたがいがんばりましょーですです。
    (・∇・)ノ
    Comment No.3 2014/09/09 Panda とても分かりやすいです!!!ひっかかっていた部分が解消されましたヽ(=&acute;▽`=)ノ
    助かります、ありがとうございます!!
    Comment No.4 2014/09/09 管理人もっさん Pandaさんこんにちは。
    コメントありがとうございます!新たにcocos2d-x 3.2の導入ガイドも書きましたので、3.2導入の際にはそちらも参考になると嬉しいですよー。

    3.2のほうには、Gitについても記載してますです。
    Name:お名前

    HomePageURL:ホームページ(あれば)
    http://
    Comment:コメント本文

ごあいさつ
もっさん
こんにちは。OBAKESAN.netへようこそ。アプリを作っていこうと思います。ご連絡などはお気軽にどうぞですよー。

・Twitterはこちら
・GitHubはこちら
Twitterタイムライン