Cocos Studio for Mac をv3.2で無理矢理使う

はじめに

まだCocosStudio for Macはv3.x系に対応してないので、どうしてもMac版が使いたい！！！って人向けです。

間違いなく非推奨な手順です。ご利用の際は、ご注意ください

無理矢理改修する

問題点のおさらい

まず、v3.x系でなぜ動かないかを簡単におさらい。

• Exportしたjsonのrootの名前がwidgetTreeではなくnodeTreeになっている
• CocosStudio for MacでProejct作成するとrootWidgetがNodeになってしまう
• NodeのWidgetReaderクラスがない

改修手順１：widgetTreeはnodeTreeということにする

cocos2d/editor-support/cocostudio/CCSGUIReader.cpp（1176行目くらい）修正前

Widget* WidgetPropertiesReader0300::createWidget(const rapidjson::Value& data, const char* fullPath, const char* fileName)
{
    // ~ 省略 ~

    const rapidjson::Value& widgetTree = DICTOOL->getSubDictionary_json(data, "widgetTree");

    // ~ 省略 ~
}

cocos2d/editor-support/cocostudio/CCSGUIReader.cpp（1176行目くらい）修正後

Widget* WidgetPropertiesReader0300::createWidget(const rapidjson::Value& data, const char* fullPath, const char* fileName)
{
    // ~ 省略 ~

    const rapidjson::Value& widgetTree = DICTOOL->getSubDictionary_json(data, "nodeTree");

    // ~ 省略 ~
}

改修手順２：NodeはLayoutということにする

cocos2d/editor-support/cocostudio/CCSGUIReader.cpp（1428行目くらい）修正前

Widget* WidgetPropertiesReader0300::widgetFromJsonDictionary(const rapidjson::Value& data)
{
    const char* classname = DICTOOL->getStringValue_json(data, "classname");
    const rapidjson::Value& uiOptions = DICTOOL->getSubDictionary_json(data, "options");
    Widget* widget = this->createGUI(classname);
//    CCLOG("classname = %s", classname);

    std::string readerName = this->getWidgetReaderClassName(classname);
    
    WidgetReaderProtocol* reader = this->createWidgetReaderProtocol(readerName);

    // ~ 省略 ~
}

cocos2d/editor-support/cocostudio/CCSGUIReader.cpp（1428行目くらい）修正後

Widget* WidgetPropertiesReader0300::widgetFromJsonDictionary(const rapidjson::Value& data)
{
    const char* classname = DICTOOL->getStringValue_json(data, "classname");
    const rapidjson::Value& uiOptions = DICTOOL->getSubDictionary_json(data, "options");
    Widget* widget = this->createGUI(classname);
//    CCLOG("classname = %s", classname);

    // widget生成できなかったやつ 且つ NodeならLayoutということにする
    if (!widget && std::strcmp(classname, "Node") == 0) {
        classname = "Layout";
        widget = Layout::create();
    }

    std::string readerName = this->getWidgetReaderClassName(classname);
    
    WidgetReaderProtocol* reader = this->createWidgetReaderProtocol(readerName);

    // ~ 省略 ~
}

CocosStudioで画面を作って組み込む

CocosStudioで画面を作ってExportする

作った画面

Node
  |- Layout
       |- Layout
       |    |- Text
       |- Image
       |- Image

File -> Export Projects

Exportのoptionはそのままでいいです。リソースファイル全部持っていくか？とかそういう設定なので。

Cocos2d-xプロジェクトへの組み込み

ExportしたものをAdd Fileする

プロジェクトのResources下にExportしたものをまるごと放り込むんで、Add Fileしてください。

480x320で作ったのでDesignResolutionSizeを変更

CocosStduioで作る画面のサイズに合わせないと多分調整が色々大変です。

AppDelegate.cpp

bool AppDelegate::applicationDidFinishLaunching() {

    // ~ 省略 ~

    // CocosStudioで作ったレイアウトサイズにする
    glview->setDesignResolutionSize(480, 320, ResolutionPolicy::SHOW_ALL);

    // ~ 省略 ~
}

Sceneに配置

ようやく実装です。includeも忘れずに。

HelloWorldScene.cpp

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

USING_NS_CC;
using namespace cocostudio;

bool HelloWorld::init()
{
    // ~ 省略 ~

    // CocosStudioのLayout読み込み
    auto layout = GUIReader::getInstance()->widgetFromJsonFile("NewProject_1/NewProject_1.json");
    this->addChild(layout);

    return true;
}

たった二行です。

実行結果

以上になります。
細かい部分まで検証してないので、色々問題があるかもしれません。

どうしてもCocosStudioのMac版が使いたいよーって人向けなので、ご利用の際はご注意ください。

早くv3.2対応しないかな〜（白目