[cocos2d-x v3] Cocos Studioを使用した開発　2

前回は、ActionScriptでの時刻演算についてご紹介しました。
今回は、CocosStudioで作成したファイルを使用した実装方法ご紹介します。

以前の記事で、CocosStudioでレイアウトを作成する方法をご紹介しました。

CocosStudioで作成したレイアウトをソースコードで使用するためには、CocosProjectをパブリッシュしてファイルを生成する必要が有ります。
パブリッシュ方法はとても簡単です。
下記画像の赤く囲っているところを押すことで、CocosProjectで設定しているディレクトリに自動的にファイルが生成されます。

出力して出来たファイルの中に csbという拡張子のファイルがあり、このファイルがソースコードで実際に使用するファイルとなります。

パブリッシュファイルの出力先は　ツールバーの「Project」→「Project Setting…」から設定画面をから変更することが可能です。

今回使用するレイアウトは下記画像のような構造となっています。

では、早速ソースコードで使用するための実装に入ります。

出力したファイルを全てResources直下に配置して下さい。

CocosStudioのオブジェクトは通常のNodeとは違い、GUIウィジェットという種類に属し、それらの機能を使用するためには、以下の2つを引き込む必要が有ります。

    #include "cocostudio/CocoStudio.h"
    #include "ui/CocosGUI.h"

Nodeとは違うと言いましたが、各GUIウィジェットの親クラスであるWidgetクラスは、Nodeクラスを継承しているため、Nodeクラスが持つメソッドは今まで通り使用することが出来ます。

先ほど説明した csbファイルを読み込んでNodeを生成します。
Layerを継承したクラスのinit内に下記を追加して下さい。
※本記事ではcocos newコマンドで初期生成されるHelloWorld.cppを使用します。

    //パブリッシュして出来たファイルからルートオブジェクトを生成
    auto rootNode = CSLoader::createNode("MainScene.csb");
    addChild(rootNode, 0, 900);

ここで生成したrootNodeは、2枚目の画像でいうところのSceneにあたるものです。
rootNodeをHelloWorld(レイヤー)にaddChildしているため、この状態で実行すると、CocosStudioで生成したレイアウトが表示されます。

CocosStudioで配置したオブジェクトは、ツリー構造上Sceneノードの子ノードとなるため、各オブジェクトはrootNodeからgetChildByNameメソッドを使用して取得することが出来ます。

    //ボタン取得
    auto button = dynamic_cast<ui::Button *>(rootNode->getChildByName("button"));

GUIウィジェットには、各クラスに専用のイベントが用意されています。
Buttonの場合は以下のようになります。

    //従来の方法でタッチイベント追加
    button->addTouchEventListener(CC_CALLBACK_2(HelloWorld::touchEvent, this));

    //ラムダ式を使用したタッチイベント追加
    button->addTouchEventListener(
        [=](Ref* target, ui::Widget::TouchEventType type)
        {
        });

以上で、CocosStudioを使用した開発方法の紹介は終了です。
Windows版のCocosStoreでは、Skelton Animation Editorが追加されていました。
Mac版ではまだ配信されていないみたいですが、また次の機会にCocosStudioの別機能をご紹介したいと思います。

今回作成したレイアウトを使用した簡単なサンプルソースです。

#include "HelloWorldScene.h"
#include "cocostudio/CocoStudio.h"
#include "ui/CocosGUI.h"

USING_NS_CC;

using namespace cocostudio::timeline;

Scene* HelloWorld::createScene()
{
    auto scene = Scene::create();

    auto layer = HelloWorld::create();

    scene->addChild(layer);

    return scene;
}

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }

    //パブリッシュして出来たファイルからルートオブジェクトを生成
    auto rootNode = CSLoader::createNode("MainScene.csb");
    addChild(rootNode, 0, 900);

    //スライダー取得
    auto slider = dynamic_cast<ui::Slider *>(rootNode->getChildByName("slider"));
    slider->addEventListener(
        [=](Ref *target, ui::Slider::EventType type)
        {
            switch (type)
            {
                case ui::Slider::EventType::ON_PERCENTAGE_CHANGED:

                    //プログレス取得
                    auto progress = dynamic_cast<ui::LoadingBar *>(rootNode->getChildByName("progress"));
                    //スライダーのパーセンテージを取得してプログレス状態更新
                    progress->setPercent(slider->getPercent());
                    break;
            }
        });

    //チェックボックス取得
    auto checkbox = dynamic_cast<ui::CheckBox *>(rootNode->getChildByName("checkbox"));
    //チェックボックスイベント追加
    checkbox->addEventListener(
        [=](Ref *target, ui::CheckBox::EventType type)
        {
            std::string message;

            switch (type)
            {
                case ui::CheckBox::EventType::UNSELECTED:

                    message = "チェックを外しました。";
                    break;

                case ui::CheckBox::EventType::SELECTED:

                    message = "チェックしました。";
                    break;
            }

            //ラベル取得
            auto label = dynamic_cast<ui::Text *>(rootNode->getChildByName("label"));
            //テキスト変更
            label->setString(message);
        });


    //ボタン取得
    auto button = dynamic_cast<ui::Button *>(rootNode->getChildByName("button"));
    //タッチイベント追加
    button->addTouchEventListener(CC_CALLBACK_2(HelloWorld::touchEvent, this));

    auto pageView = dynamic_cast<ui::PageView *>(rootNode->getChildByName("page_view"));
    for (int i = 1; i <= 3; i++)
    {
        auto layout = ui::Layout::create();
        layout->setSize(pageView->getContentSize());

        //テキスト
        auto label = ui::Text::create();
        label->setString(StringUtils::format("%d", i));
        label->setFontSize(60);
        label->setPosition(Point(layout->getContentSize().width / 2, layout->getContentSize().height / 2));
        layout->addChild(label);

        //レイアウト追加
        pageView->addPage(layout);
    }
    //イベント追加
    pageView->addEventListener(
        [=](Ref *target, ui::PageView::EventType type)
        {
            switch (type)
            {
                case ui::PageView::EventType::TURNING:

                    //ラベル取得
                    auto label = dynamic_cast<ui::Text *>(rootNode->getChildByName("label"));
                    //テキスト変更
                    label->setString(StringUtils::format("%ldページ目を表示中", pageView->getCurPageIndex() + 1));
                    break;
            }
        });

    return true;
}

void HelloWorld::touchEvent(Ref *target, ui::Widget::TouchEventType type)
{
    auto rootNode = this->getChildByTag(900);

    switch (type)
    {
        case ui::Widget::TouchEventType::BEGAN:
            break;

        case ui::Widget::TouchEventType::MOVED:
            break;

        case ui::Widget::TouchEventType::CANCELED:
            break;

        case ui::Widget::TouchEventType::ENDED:

            std::string message = "ボタンが押されました。\nチェックボックス状態 :: %d";

            //チェックボックス取得
            auto checkbox = dynamic_cast<ui::CheckBox *>(rootNode->getChildByName("checkbox"));

            //ラベル取得
            auto label = dynamic_cast<ui::Text *>(rootNode->getChildByName("label"));
            //テキスト変更
            label->setString(StringUtils::format(message.c_str(), checkbox->isSelected()));
            break;
    }
}

弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。