[Cocos2d-x] Cocos Studioについてのまとめ

2016 年 3 月 31 日 Categories: C++, JavaScript, プログラミング | Tags:

基本

各種アニメーションの設定やGUI要素の構築をWYSIWYGで行える無料の公式エディタ。

有償のものと比べると見劣りする部分もあるが、全体として必要十分。

以前は「CocoStudio」という名前でWindows向けにしか提供されていなかったが、今ではMacでも使えるようになった。

このエディタそのものは、オープンソースではない。

バージョン

メインは1.x系。

2.x系がすでにリリースされ、betaの文字も名前からとれているが、「UI Editor」しか実装されておらず、実際には開発途上。

出力ファイルにはエディタのバージョンが記録されていて、後方互換性はあるが、逆はないので、新しいバージョンで出力したものを古いエディタで読み込むことはできない(同じ1.x系でも)。

1.x系

1.3の頃くらいまでは「CocoStudio」という名称だった。

キャンバス部分(編集部分)のフレームレートが高いのか、残念ながらやや重い。

出力ファイルはJSON。

2.x系

処理は軽くなった。

出力ファイルは、拡張子が「.csb」の独自バイナリ。

現状、「UI Editor」しか実装されておらず、しかもそれですら1.x系の頃にはあった機能の一部が未実装。

全体としてまだまだ不安定で、最新版のCocos2d-x C++ですらうまく読み込めないこともある。

正直、なぜツールが一通りそろっていた1.x系の開発をやめてまで移行したのかよくわからない。

注意点

Windows版では、スタートメニューの「プログラム」メニューなどで、1.x系の項目と2.x系の項目が混在してしまうので注意。

基本的にバージョンの上下ではなく、最後にインストールしたバージョンのもので上書きされる。

確実に呼び出したいなら、1.x系は「Cocos Studio」、2.x系は「Cocos」という項目をクリックし、メニュー画面を表示させてそこから各種ツールを選ぶといい。

なお、以前のバージョンである「CocoStudio」はそのままになる(1.3くらい)。

内部ではそれぞれ別のところにインストールされるので混在OKだが、アンインストールは自分でやる必要がある。

各種ツール

Cocos Studioとは、以下のツール群の総称。

UI Editor

extention(拡張機能)にあるGUIライブラリを利用して、WYSIWYGでグラフィックの構築ができる。

パーティクルや画像の配置も可能。

アニメーション機能

簡易的ではあるが、各ウィジェットをアニメーションさせることもできる。

タイムラインのエディタがあり、FlashやAfterEffectsと似た感覚で操作・プレビューが可能。

Scene Editor

その名のとおり、Cocos2d-xのSceneを構築するためのエディタ。

基本的にはUI Editorと似ているのだが、以下のAnimation Editorで作成したものを配置したり、BGMを指定できたりする。

プレビュー=実際の動作の確認も、手軽に高速にできる。

RPGツクールのエディタのように、「TouchEndedのときに~の処理をする」といった感じで、GUI上でイベント処理の設定も一部できる。

Animation Editor

最近スマホゲームでよく見かける、キャラなどをなめらかにアニメーションさせるためのエディタ。

いわゆるスプライトアニメーションのためのエディタ。

基本的には、FlashやSpriteStudioと同種のもの。

ボーンやIKにも対応している。

Game Data Editor

「キー:値」という連想配列やKVS的な、単純な組み合わせのデータをつくるためのツール。

既存の表計算ソフトのデータ(ExcelやCVS形式)を読み込んで表示させる。

JSON形式に出力される。

残念ながら、現状、入力も出力もうまく動かない。

ソースコードでの読み込み

以下は、3.x系のCocos2d-x C++、Cocos2d-JS(Cocos2d-html)の場合だが、基本的には他の言語でも同じ。

UI Editor

1.x系

【Cocos2d-JS】(Cocos2d-html)

「ccs.uiReader」を使う。

var panel = ccs.uiReader.widgetFromJsonFile("sample.json");
node.addChild(panel);
2.x系

【C++】

auto panel = CSLoader::getInstance()->createNodeFromProtocolBuffers("sample.csb");
node->addChild(panel);

【Cocos2d-JS】

* Cocos2d-html

var panel = ccs.load("sample.json");
node.addChild(panel);

(以下は、Cocos2d-htmlの古いバージョンについて)

v3.2以下では、「非対応」。

v3.1以下では一応コードは書かれていたが、うまく動作していなかった。

よって、Cocos2d-htmlでも使うことを前提にするなら、Cocos Studio 1.x系を使うしかない。

感想

いろいろと使いづらい部分はあるものの、「無料でここまでできるなら十分」と思わせられる。

こういったところも、Cocos2d-xが人気の理由だろう。