[UnityとCocos2d-xのいいとこ取り] CocosCreatorの紹介


ゲームを作るのにUnityは重たい、Cocos2d-xは軽いけど難しくてあきらめちゃった方へ。
Cocos Creatorは試しましたか？ ([紹介動画](https://www.youtube.com/watch?v=_UTy7IkGxMU))

- シーンエディタ
- コードエディタ (コードはJavaScript、CoffeeScriptが選べます)
- アニメーションエディタ

などが統合されたゲーム開発環境です。Unityのような開発の気軽さを持ち、動作するパフォーマンスはCocos2d-xという、まさに(僕が)待ち望んだ環境です。1日程度触ってみて、使用感が良かったので記事にまとめようと思います。

なお[Cocos Studio](http://www.cocos2d-x.org/wiki/Cocos_Studio)はCocos Creatorの発表に伴いDeprecatedとなったようです。

##環境
以下環境で試しています。

- Cocos Creator 1.1.1
- MacOSX Yosemite 10.10.5

##開発環境構築
CocosCreatorをここから[ダウンロード](http://www.cocos2d-x.org/download)しましょう。

起動するとログイン画面が出ます。使用には[Cocos Developerアカウント](https://passport.cocos.com/auth/signup)が必要になります。

![kobito.1467595534.258341.png](https://qiita-image-store.s3.amazonaws.com/0/25416/3626ce2c-595f-948e-d51c-8b7d35fdb3f4.png "kobito.1467595534.258341.png")


※ここのPasswordボックスにはペーストが効かないのでご注意ください。うっかり1Passwordとかで長いパスワードを使ってしまうとツラい気持ちになります。

ログインが完了するとプロジェクトファイルの選択画面が表示されます。

![kobito.1467595833.736066.png](https://qiita-image-store.s3.amazonaws.com/0/25416/7d76ffc0-ad33-6093-cd2b-d696fb3f82a5.png "kobito.1467595833.736066.png")

「New Project」で「Empty Project」を選択し、Createを押してみてください。

![kobito.1467596008.111835.png](https://qiita-image-store.s3.amazonaws.com/0/25416/adfbac0c-e81d-bbc7-f29a-3a1710344ea4.png "kobito.1467596008.111835.png")

見た目はUnityですね。公式も[Unity User Guide](http://cocos2d-x.org/docs/editors_and_tools/creator-chapters/getting-started/unity-guide/)というものを出しているので、どうやらそういう路線みたいです。

##タブの説明
Unityの知識が前提となりますが、

|Cocos Creator|Unity|説明|
|:--|:--|:--|
|Node Tree|Hierarchy|シーンに配置されているNodeが階層構造で確認できる|
|Assets|Project|各種アセット、スクリプトを配置する|
|Scene|Scene|シーンを画面上で編集できる|
|Properties|Inspector|選択したNodeのプロパティが確認できる|
|Console|Console|ログを確認できる|
|Timeline|Animation|アニメーションを生成できる|

という役割になります。

##開発の流れ
画像や音声、フォントなどをAssetsに追加して、それをもとにSceneで画面を作っていくのが基本です。

実行はBrowserもしくはSimulatorで確認する事が出来ます。

![kobito.1467613981.686734.png](https://qiita-image-store.s3.amazonaws.com/0/25416/af4bba62-a193-aa9b-386f-df595f600138.png "kobito.1467613981.686734.png")

再生ボタンを押すとブラウザが起動します。ログを見ながらそのまま動作させる事ができます。

![kobito.1467614105.662585.png](https://qiita-image-store.s3.amazonaws.com/0/25416/a44dabd7-6dd8-fee2-14e9-fc1c7de0212b.png "kobito.1467614105.662585.png")

右にあるリフレッシュボタンを押すと、ブラウザがリロードされ、修正した所を即座に確認する事ができます。
また(環境によっては表示されていないかもしれませんが)右上に緑字でIPアドレスが表示されている所にマウスオーバーをすると、QRコードが表示されます。そのQRコードをスマホで読むことで、スマホ上のブラウザでも動作を確認する事が出来ます。リフレッシュも効くので、解像度の違いでどう表示されるかを確認するのに非常に便利です。

##ネイティブ向けにビルドする
ProjectメニューのBuildからビルドする事が出来ます。

![kobito.1467614762.929021.png](https://qiita-image-store.s3.amazonaws.com/0/25416/e2b60d4b-e690-abc3-22ae-67e35db84e91.png "kobito.1467614762.929021.png")

PlatformでiOSまたはAndroidを選択してパブリッシュする事が出来ます。Build、Compile、Playのそれぞれを順番に実行して下さい。初回はかなり時間がかかりますので気長に待ちましょう。

Androidの場合にはAndroid SDK、NDK、Apatch ANTの場所を指定する必要があります。ちなみに筆者環境だと最新のNDK `r12b` でビルドをしたところ、以下のエラーで失敗しました。

```
[armeabi-v7a] StaticLibrary  : libjscocos2d.a
[armeabi-v7a] StaticLibrary  : libcocos2d.a
[armeabi-v7a] StaticLibrary  : libcocostudio.a
[armeabi-v7a] StaticLibrary  : libcocosbuilder.a
[armeabi-v7a] StaticLibrary  : libspine.a
[armeabi-v7a] StaticLibrary  : libcreator.a
[armeabi-v7a] StaticLibrary  : libnetwork.a
[armeabi-v7a] StaticLibrary  : libui.a
[armeabi-v7a] StaticLibrary  : libcocosdenshion.a
[armeabi-v7a] StaticLibrary  : libextension.a
[armeabi-v7a] StaticLibrary  : libaudioengine.a
[armeabi-v7a] StaticLibrary  : libcocos2dxinternal.a
[armeabi-v7a] StaticLibrary  : libcocos2dandroid.a
[armeabi-v7a] StaticLibrary  : libcpufeatures.a
[armeabi-v7a] SharedLibrary  : libcocos2djs.so
/Users/y1row/NewProject/build/jsb-default/frameworks/cocos2d-x/cocos/base/CCConsole.cpp:392: error: undefined reference to 'bzero'
collect2: error: ld returned 1 exit status
make: *** [obj/local/armeabi-v7a/libcocos2djs.so] Error 1
Error running command, return code: 2.
```

`r10e` で成功したので、同じ状態になった場合にはNDKのバージョンを下げてみてください。

##リンク
- [マニュアル](http://cocos2d-x.org/docs/editors_and_tools/creator/)
- [APIリファレンス](http://www.cocos2d-x.org/docs/api-ref/creator/v1.0/)
- [ロードマップ](http://discuss.cocos2d-x.org/t/cocos-creator-roadmap/27783)