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ということにする

```cpp: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");

    // ~ 省略 ~
}
```

```cpp: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ということにする

```cpp: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);

    // ~ 省略 ~
}
```

```cpp: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する

#### 作った画面

![スクリーンショット 2014-07-19 17.43.58.png](https://qiita-image-store.s3.amazonaws.com/0/40887/56acff75-6021-db87-8bc4-e1784ad03ea6.png)

```console
Node
  |- Layout
       |- Layout
       |    |- Text
       |- Image
       |- Image
```

#### File -> Export Projects

![スクリーンショット 2014-07-19 17.02.19.png](https://qiita-image-store.s3.amazonaws.com/0/40887/1677f683-cc6b-2515-530b-6c7681ddd4e5.png)


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

![スクリーンショット 2014-07-19 17.02.28.png](https://qiita-image-store.s3.amazonaws.com/0/40887/d9f590e0-c049-d422-149f-912b7d230f85.png)

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

### ExportしたものをAdd Fileする

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

![スクリーンショット 2014-07-19 18.11.01.png](https://qiita-image-store.s3.amazonaws.com/0/40887/708c4f46-5fc2-36e7-6cab-8b5f5a20bb05.png)

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

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

```cpp:AppDelegate.cpp
bool AppDelegate::applicationDidFinishLaunching() {

    // ~ 省略 ~

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

    // ~ 省略 ~
}
```

### Sceneに配置

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

```cpp: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;
}
```

たった二行です。

## 実行結果

![スクリーンショット 2014-07-19 17.46.05.png](https://qiita-image-store.s3.amazonaws.com/0/40887/d4f31923-42ba-83e6-3ddb-c25266f89813.png)

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

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

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