読者です 読者をやめる 読者になる 読者になる

【cocos2d-x 3.3】MacでiOS版の環境構築

アプリ開発

主に喋り担当をやってます、keiです。
カタい業務系を新卒から10年ちょっと続けてソシャゲ業界へ。
2年弱ソシャゲ業界にいたのですが、そこでちょっと思うことがあり業務系に舞い戻りました。

喋り以外のお仕事も一応やっておりまして、医療系担当として人間ドック予約システムを日々開発しております。
あんまり業務に直結しないことを書いていきますが、どうぞよろしく(・∀・)

ちなみに弊社では、ネイティブアプリ開発など微塵もしておりません(´・ω・`)
でも、いつかやってやるです。

cocos2d-xって何?

iPhoneアプリAndroidアプリを作成できる、ゲーム特化のライブラリです。
UnityとかCoronaとか、あの辺りと同じように流行りのマルチプラットフォーム対応です。
中国で盛んに使われているようで、国内ではドラクエモンスターズスーパーライトとかがcocos2d-xを採用しているらしいです。
完全無料で使えますので個人にも優しい仕様です。

cocos2d-xの開発言語はC++JavaScriptLua辺りなのですがC++を使うことにします。
ちなみにC++は何となくしかわかりません。その辺はどうでもいいのです。

準備するもの

cocos2d-xの環境はWindowsでもMacでも、どちらでも作れます。
が、iPhoneアプリをリリースする時はMacがないとビルドすらできません。
もちろん、AppStoreにアップロードもできません。
ですので、急いでMacを買ってきて下さい。

WindowsMacも持ってるから、Android側はWindowsiPhone側はMacで作れば大勝利」と思う人もいるかもしれませんが、悪いこと言わないのでMacで作って下さい(・ω・)
ここではMacでの環境構築を扱います。Windowsの環境構築はGoogle先生にお聞き下さい。

先に言っておきますが、Windowsでのcocos2d-x環境構築は叫びたくなるほど厄介です。
自分はv3.2の時に構築して「二度とやらねぇ(´・ω・`)」と誓いました。
そもそも、Windowsだけあっても前述の通りMacがないとiPhoneアプリがアレですので、マルチプラットフォームの意味もないですし。

こんな環境で構築します。

MacBook Air
MacOS X v10.9(Mavericks)
Xcode V6.1.1
Eclipse4.4(Luna)
Java 1.7.0.67

OSは最新じゃありませんが、2015年1月時点で最新の「Yosemite」でも大丈夫です。
多分(・ω・)

それでは環境構築してみましょう。

cocos2d-xのインストール

ダウンロードして適当なディレクトリに配置するだけです。
ダウンロードはこちら

ここに「Cocos2d-x」という項目があるのでv3.3をダウンロードしましょう。
解凍された状態でダウンロードされると思います(2015/01/25現在)

ここからが地味に重要になるかもしれませんが、cocos2d-xはバージョン毎に同じMac(Windowsも同じなんですが)に共存できます。
ですので、cocos2d-xディレクトリを作成しておいて、そこに今回ダウンロードしてきたcocos2d-xの本体を配置した方がいいんじゃないかなと思います。

参考までに、自分はアプリケーションディレクトリに置いてます。

/Applications/cocos2dx/cocos2d-x-3.3/

こんな風に(`・ω・´)

Xcodeのインストール

きっとインストールされていると信じて割愛。
インストールしてない場合は、AppStoreでインストールして下さい。
検索してインストールするだけです。ヨユーです。

MacでのiPhone側の環境構築はこの時点で「ほぼ終わり」です。
Android用の環境構築は次の記事で書きます。
こっちが厄介なんですよ、割とマジで(´・ω・`)

cocos2d-xのセットアップ

先にインストールしたcocos2d-xですが、インストールしただけでは使えません。
「ここにこんなライブラリがあるんです!」というのを指定する必要があります。
まぁ、スクリプト実行するだけなんですけど。

とりあえずターミナルを開いて、cocos2d-xを配置したディレクトリに移動して下さい。
自分の環境の場合だと「/Applications/cocos2dx/cocos2d-x-3.3/」になります。
そこに「setup.py」というものがありますので、以下のコマンドで実行。

$ ./setup.py

ちなみにこれはpythonの実行ファイルです。
Macは最初からpythonが入っているので、何も考えずに実行して問題ありません。多分(´ω`)
Windowspythonの環境も作る必要があります。
思い出しただけでめんどくせぇ(´・ω・`)

さておき、実行すると「NDKどこ?」「SDKどこ?」などと聞いてきます。
とりあえず、今回はEnterキー押してスキップしましょう。
全部終わると.bash_profileに環境変数が書き込まれています。
「直接編集が好きなんです」という方は、vimで.bash_profileを開いて編集してもOKですが、初回はスクリプト実行がいいと思います。
直接編集する時はこんな感じで.bash_profileを開きましょう。

$ vim ~/.bash_profile

参考までに、自分の環境の.bash_profileは以下のようになっています。


# Add environment variable COCOS_CONSOLE_ROOT for cocos2d-x
export COCOS_CONSOLE_ROOT=/Applications/cocos2dx/cocos2d-x-3.3/tools/cocos2d-console/bin
export PATH=$COCOS_CONSOLE_ROOT:$PATH

# ここからは今回未設定でOKです --------------------------------
# Add environment variable NDK_ROOT for cocos2d-x
export NDK_ROOT=/Applications/AndroidDev/ndk-r10d/
export PATH=$NDK_ROOT:$PATH

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

# Add environment variable ANT_ROOT for cocos2d-x
export ANT_ROOT=/usr/local/Cellar/ant/1.9.4/libexec/bin
export PATH=$ANT_ROOT:$PATH
# ここまで今回未設定でOKです ----------------------------------

# Add environment variable COCOS_X_ROOT for cocos2d-x
export COCOS_X_ROOT=/Applications/cocos2dx/cocos2d-x-3.3
export PATH=$COCOS_X_ROOT:$PATH

# Add environment variable COCOS_TEMPLATES_ROOT for cocos2d-x
export COCOS_TEMPLATES_ROOT=/Applications/cocos2dx/cocos2d-x-3.3/templates
export PATH=$COCOS_TEMPLATES_ROOT:$PATH


ちなみに「NDK_ROOT」「ANDROID_SDK_ROOT」「ANT_ROOT 」の3つはiPhone版の方では全く使用しません(´・ω・`)
これらは次回紹介するであろう、Android版で使用します。今回は無視でいいです。

ここまで実行したら、.bash_profleを再読み込みしておきましょう。
以下のコマンドをターミナルから実行です。

$ source ~/..bash_profile

こんな具合で。

cocos2d-xのプロジェクトを作りましょう。

cocos2d-xのプロジェクトはcocos2d-xが準備しているコマンドで作成します。
前項で.bash_profileにパスを通しているので、ターミナルからサクっといけます。

プロジェクトはどこに作っても構いません。
デスクトップだろうが何だろうが、どこでもOKです。
コマンド実行時に作成するディレクトリも指定できます。

なのですが(・ω・)
個人的には、プロジェクト用のディレクトリ作成をオススメします。

/cocos2dx-project/SampleProject/
/cocos2dx-project/TestProject/

こんな風に。
とは言え、個人的なアレなのでお好きなようにしてもらって構いません。
プロジェクトが色んなとこに散らばって困るといいです(´・ω・`)

本題に戻して。
ターミナルを開いて、cocos2d-xのプロジェクトを作成したいディレクトリに移動して下さい。
移動したら以下のコマンドを実行。

$ cocos new SampleProject -p com.hogehoge.SameProject -l cpp

見ればわかるかもしれませんが、一応解説。
SampleProjectの部分が作成するプロジェクト名称(この名前でディレクトリができます)
その後にある「com.hogehoge.SameProject」部分は、バンドルIDというものです。
アプリを作った経験のある方はわかると思いますが、アプリを示す一意の文字列です。
バンドルIDに関してはGoogle先生にお聞き下さい。

今回はSampleProjectと適当ですが、実際にリリースを目的とする場合は注意が必要です。
理由は「一度デベロッパーに登録したバンドルIDは、バンドルIDを使用できない」から。
登録しているバンドルIDを仮に消してもダメです。

ローカルで作るだけであれば、別に何でもいいですけどね(・ω・)
デベロッパーというのはiOS DeveloperとGoogle Developerのことです。
こっちは機会があればまた記事を書きます。

ちなみに上で紹介したコマンドはプロジェクト作成の時に、毎度実行します。
ですので、覚えてしまってもいいかもしれませんね。
「-p」はプロジェクトを指していて、「-l」は言語を指しています。
ProjectとLanguageじゃないですかね。知りませんが。
今回はC++で作りますので、「cpp」と書いています(´ω`)

コマンドを実行するとディレクトリが作成されていると思います。
これがcocos2d-xのプロジェクトディレクトリになります。

iOS版をXcodeシミュレータで動かしてみる。

ここまで進めると、iOSの方はXcodeのシミュレータで動いてしまいます(・ω・)
Androidもこれだけ楽だったらいいものを(´・ω・`)

そんなことはどうでもいいのですが、とりあえず実行してみましょう
前項でcocos2d-xのプロジェクトを作成しましたので、以下のファイルを開きます。
※パスの説明が面倒なので、自分の環境の場合を書いています。
/cocos2dx-project/SampleProject/proj.ios_mac/SampleProject.xcodeproj

xcodeprojファイルをダブルクリック等で開くと、Xcodeが起動します。
起動したら上の方にある再生ボタンみたいなものを押して実行してみて下さい。
警告がたくさん出てきますが、オール無視でいいです。

初回ビルドに時間がかかりますが、適当に時間を潰しつつ慌てず騒がず。
しばらくするとiPhoneシミュレータが起動して、cocos2d-xのロゴが表示されます。
ようやくcocos2d-xのiPhone版がシミュレータで動きました。
ここまでくれば、iPhone版は大勝利(・∀・)

iPhone版は、ですが(´・ω・`)

まとめ

cocos2d-xのiPhone版開発環境をMacに構築するのは結構カンタンです。
何となくインストールして、何となく実行するとサクっとシミュレータで動いてしまいます。
「俺はiPhone版しかリリースしないぜ!」という方はここで終わりです。cocos2d-xライフを存分にお楽しみ下さい(´∀`)
ちなみにiPhone実機で動かしたい場合は、iOS Developer登録が必要になります。
年間8,000円ぐらいしますので、とりあえずシミュレータで遊んでみるのがいいと思います。

Android版も作るし。つーかマルチプラットフォームだろ?」という方は、次回の記事を。
そちらの方で最初から最後まで、構築方法をご説明致します。

今回、iPhone版だけですが環境構築が終わりましたので、他の新しいプロジェクトを作りたい時は前述した「cocos new」コマンドを実行すればOKです。 ターミナルからコマンドを叩いてプロジェクトを量産して下さい。

とりあえず今回はMaciPhone版開発環境作って動かしてみるよ!というところまでです。
それではまた(・∀・)ノシ

参考

cocos2d-x 3.2 環境構築ガイド:OBAKESAN.net|オバケサン
Cocos2d-x v3.3 環境構築 - hyoromoのブログ
cocos2d-x 3.3rc2をインストールしてみた(3.3も追記) - Qiita