Cocos2d-xでは、一つのシーンに対してノードを吊り下げていって、画面を構成していくことが多いと思います。
例えば、以下のような画面ではMainSceneの下にスプライトやパネル、ボタンなどをaddChildしています。

cocosstudio_01

これをソースコード内に書いていくのもいいですが、もっと多くのオブジェクトを追加したり、さらに木構造が深くなっていくと大変になります。

そこで、ノードが増えたり減ったりするようなものではない、ある程度静的なオブジェクトであれば、Cocos2d本家がサポートしている「Cocos Studio」がオススメです。

GUIで位置を確認しながらオブジェクトを配置したり、煩わしい設定を手で書く必要がなくなります。

この記事では「Cocos Studio」の使い方を説明します。
環境は以下の通りです。

  • Cocos2d-x 3.6
  • Cocos Studio 2.2.6

 

Cocos Studio のセットアップ

公式サイトからダウンロードする。
http://www.cocos2d-x.org/download

cocosstudio_02

Mac か Windows か、環境に合わせてダウンロード。

インストール先を聞かれる。ここでは、cocos2d-x 本体があるディレクトリに設定しておいた。

cocosstudio_03

続いて、サンプルプロジェクトのインストール先を聞かれる。
どこでもよいと思うが、Cocos2d-xプロジェクトをまとめているフォルダへ設定しておいた。

cocosstudio_04

インストールが進んでいく。終わったら以下の画面となるので、早速起動してみる。

cocosstudio_05

ここで起動されるのは、インストールされた「Cocos」と「Cocos Studio」のうち、「Cocos」の方。
Cocos は Cocos2d をサポートするランチャーみたいなもの。

cocosstudio_06

少し見慣れない画面だが、今のところはあまりお世話にならない画面。
左側のメニューを覗くと、まだまだβ版な模様だがきっと充実していくのだと思う。

Projects > New Project をクリック。Cocos Project を選んで、Next。

cocosstudio_07

プロジェクトの作成画面。
ここで大切なのは、既存のプロジェクトに上書きされないようなパスに設定すること。
CocosStudioで使用する画面構成プロジェクトファイルが欲しいので、既存プロジェクトとは別のパスに設定する。
(ここでは、SampleGameプロジェクト内にcocosTmpフォルダを作成し、そこへパスを設定している)

cocosstudio_08

Finished すると、指定したパスにファイル群が作成され、「Cocos Studio」が立ち上がる。

cocosstudio_09

ここでは何もせず、ウィンドウを閉じる。
作成されたファイル群で必要な物は、

  • cocosstudioフォルダ
  • SampleGame.ccs
  • SampleGame.cfg
  • SampleGame.udf

cocosstudio_10

これを、プロジェクトフォルダに突っ込む。

cocosstudio_11

cocosTmpフォルダはいらないので削除。
SampleGame.ccsを実行すると「Cocos Studio」が起動し、ファイルが開かれる。

 

Cocos Studio プロジェクト設定

作り始める前に、プロジェクトの設定をする。
以下の図のコンボボックスで、デザイン解像度と向きを設定する。

cocosstudio_12

このデザイン解像度で設定されたサイズを元に画面設計し、画像などを作成、設置していくことになる。
例えばiPhone5の横向き端末をメインターゲットとするならば、1136*640を指定する。
(16:9の端末に対応させるなどの事は事前に決めておき、複数解像度対応としてどのように表示するかはCocos2d-x側で指定することになる)
既存プロジェクトですでに設定してあるならそれにあわせておく。

Project > Project Setting…

cocosstudio_13

Publish Directory が初期では 「res」となっているが、これを「Resources」に変更することで、パブリッシュ時に画像やデータが既存プロジェクトに即コピーされるようになる。

cocosstudio_14

 

オブジェクトの配置

早速リソースにあるファイルを画面に配置していく。

今回はResourcesフォルダ構成の一つの例として、直下に画像などは置かずimagesフォルダを作成しておいた(お好みで)

これをCocos Studio上のResourcesエリアで同じフォルダ構成にする。
右クリックで New Folder でフォルダ作成。ファイルはドラッグアンドドロップでフォルダ間を移動できる。
(16-9フォルダを作成し、そこにcsdファイルを置いたのは、後々のマルチ解像度対応で必要になるかもしれないので)

cocosstudio_15

オブジェクトの名前を変更する。プログラム側でノードを指定するために必要。

cocosstudio_16

せっかくなので、ボタンを追加してみる。
左上のWidgetsからButtonを探し、ドラッグアンドドロップする。

cocosstudio_16_2

右側のPropertiesでサイズを変更したり、テキストを変更できる。
ボタンの名前をSampleButtonにしておく。

終わったら、Publishする。

cocosstudio_17

成功したなら、Resourcesフォルダに設定したフォルダとファイルができていることを確認。

cocosstudio_18

プログラム内では、このcsbファイルを読み込むことになる。

Cocos Studioで作成したデザインファイルの読み込み

デザイン解像度やResourcesフォルダの構成など、設定してない場合は以下のようにAppDelegate.cppを修正しておく。

HelloWorld.h にinclude 追記。

HelloWorld.cpp の HelloWorld::init()を修正、追加。

以下のように出るとオッケー。

cocosstudio_19

このボタンにイベントを追加してみる。

先頭に#pragma~ を追加してないと2バイト文字が文字化けするので、入れておくことをオススメする。

これで、ボタンが押されている間だけ「押されている」にボタンのテキストが変更される。

cocosstudio_20

 

おわりに

「Button」の他にもよく使いそうなのが、「Sprite」「Label」「Panel」とかでしょうか。

また、Resourcesエリアのフォルダ右クリック > New File で新しく「Scene」「Layer」「Node」「SpriteSheet」も追加できます。

「SpriteSheet」は複数の画像を一つの画像にまとめてくれる&個々の画像指定と同じ挙動を実現できるとてもいい機能なので、また紹介したいと思います。