【cocos2d-x】【CocoStudio】CocoStudioを使って画面のレイアウトを読み込む

環境

cocos2d-x 3.2
CocoStudio for Mac 1.0.0 Bata

CocoStudioでレイアウトを作成する

まずは、CocoStudioにて任意の画面を作成します。
以下では、画面に一つボタンを置いています。

上記、赤枠の名前は、各UIパーツのをソースコード上から取得する時に必要になるので、
わかりやすい名前にしておきます。

レイアウトファイルの読み込み

CocoStudioにて、cmd + Eでエクスポート。
[CocoStudioのプロジェクト]/Export配下のに作成したキャンバスのディレクトリが出力されているので、それをそのままXCodeへimportします。

インポートしたレイアウトを以下のようにソースコード上で読み込みます。

#include "cocostudio/CocoStudio.h"
// UIパーツを使用するためにimportしておく
#include "CocosGUI.h"

auto node = cocostudio::timeline::NodeReader::getInstance()->createNode("[jconファイル名]");

// 画面に配置
addChild(node);

子ノードを取得する

レイアウト上に配置した、子ノードを取得するにはgetChildByName()を使います。
ここで指定するオブジェクト名は、CocoStudio上で名前に指定した文字列です。

auto button = (Button *)scene->getChildByName("[オブジェクト名]");

階層が深い位置のオブジェクトを取得するには、以下のヘルパーメソッドを使います。

utils::findChildren([探索対象ノード], [オブジェクト名])

Buttonイベントを取得するとき

参考までに、ui::Buttonクラスのタッチイベントを取得するには以下のようにします。

button->addTouchEventListener([&](Ref *ref, Widget::TouchEventType type) {
    if (type == Widget::TouchEventType::ENDED) { // タッチアップを取得する
    }
});

参考

http://qiita.com/kyokomi/items/9e3dea9325047940f3e0
http://iphone-labo.blogspot.jp/2014/08/cocos2dx-v32node.html
http://giginet.hateblo.jp/entry/2014/08/29/185519
http://raharu0425.hatenablog.com/entry/2014/06/20/154718