CocosStduio v2をCocos2d-x3.3rc1で使う方法

6日目です。2014年とてもお世話になったCocos2d-xとCocosStudioについてです。

CocosStudio v2で何書くか色々考えてたんですが、相変わらず？入門情報が一切無いので無難に使い方を書きます。

# 前提条件
- Cocos2d-xが動作する環境がある
- 手順はMac（Winでもたぶんうごく）

# 検証環境
- Cocos2d-x3.3rc1
- Cocos Studio v2.0.2（Mac版）
- Mac OSX 10.10.1（Yosemite）
- Xcode 6.1

# Cocos2d-x環境がない場合

事前に`cocos new`で作成しておきます。
作り方は今まで通りで、特にCocosStudio用に何かする必要はないです。

```bash
$ cocos new CocosStudioV2Sample -p com.example.kyokomi -l cpp -d ~/src/github.com/kyokomi
$ cd /Users/kyokomi/src/github.com/kyokomi/CocosStudioV2Sample
$ ll
total 24
 0 drwxr-xr-x  13 kyokomi  staff   442 12  5 07:13 .
 0 drwxr-xr-x@ 67 kyokomi  staff  2278 12  5 07:13 ..
 8 -rw-r--r--   1 kyokomi  staff    29 12  5 07:13 .cocos-project.json
16 -rw-r--r--   1 kyokomi  staff  4946 12  5 07:13 CMakeLists.txt
 0 drwxr-xr-x   6 kyokomi  staff   204 12  5 07:13 Classes
 0 drwxr-xr-x   7 kyokomi  staff   238 12  5 07:13 Resources
 0 drwxr-xr-x  17 kyokomi  staff   578 12  5 07:13 cocos2d
 0 drwxr-xr-x  16 kyokomi  staff   544 12  5 07:13 proj.android
 0 drwxr-xr-x   5 kyokomi  staff   170 12  5 07:13 proj.ios_mac
 0 drwxr-xr-x   3 kyokomi  staff   102 12  5 07:13 proj.linux
 0 drwxr-xr-x  12 kyokomi  staff   408 12  5 07:13 proj.win32
 0 drwxr-xr-x   6 kyokomi  staff   204 12  5 07:13 proj.win8.1-universal
 0 drwxr-xr-x   5 kyokomi  staff   170 12  5 07:13 proj.wp8-xaml
```

# CocosStudio側

## Dowdload

[公式](http://www.cocos2d-x.org/download)からダウンロードします。

## Install

*普通にインストーラに従って行けばインストールできますので省略。*

## 新規プロジェクトを作成


### Project作成

Cocosを起動して`New Project`を選択する。

![スクリーンショット 2014-12-05 7.11.31.png](https://qiita-image-store.s3.amazonaws.com/0/40887/b1fdc9f6-29d2-6fff-eccb-74d3dab2c618.png)

Cocos2d-xのプロジェクトを選択します。

![スクリーンショット 2014-12-05 8.06.08.png](https://qiita-image-store.s3.amazonaws.com/0/40887/3ded5af3-7a2a-5e1b-4ca2-0f5bc6144019.png)

Createする。

![スクリーンショット 2014-12-05 7.22.29.png](https://qiita-image-store.s3.amazonaws.com/0/40887/03081807-381a-32dd-25aa-6480f7d08e7c.png)

ディレクトリ階層はこんな感じになります。

```
CocosStudioV2Sample
├── CMakeLists.txt
├── Classes
├── CocosProject
├── Resources
│   ├── CloseNormal.png
│   ├── CloseSelected.png
│   ├── HelloWorld.png
│   ├── fonts
│   └── res
├── cocos2d
├── proj.ios_mac
├── proj.linux
├── proj.win32
├── proj.win8.1-universal
└── proj.wp8-xaml
```

### リソースを追加

ドラッグドロップで追加できます。

![スクリーンショット 2014-12-05 7.33.58.png](https://qiita-image-store.s3.amazonaws.com/0/40887/2354e6b9-94b2-98e3-db63-2fe17d37950c.png)

カーソルを持って行くとプレビューが自動表示されて便利です。

![スクリーンショット 2014-12-05 7.30.39.png](https://qiita-image-store.s3.amazonaws.com/0/40887/fdd5c3d3-6775-e80b-40e1-2f76c487a80a.png)

MainScene.csdを開きます。今回はデフォルトの画面サイズ480x320でいきます。
左上のサイズ表示されているプルダウンでサイズを変更できます。

## 画面を作る

### 背景画像配置

Spriteをドラッグして黒いView上に配置する。

![スクリーンショット 2014-12-05 7.36.49.png](https://qiita-image-store.s3.amazonaws.com/0/40887/5db674ba-423c-57e9-320a-c72a7de4c764.png)

右にあるPropertiesのImage Resouceに画像をドラッグドロップする。
（もしくはダブルクリックでFinderが開きます）

![スクリーンショット 2014-12-05 7.37.20.png](https://qiita-image-store.s3.amazonaws.com/0/40887/e2ffbc1c-0c04-1b97-ee4c-8d36149aa4e4.png)

位置がアレですが表示されます。

![スクリーンショット 2014-12-05 7.39.22.png](https://qiita-image-store.s3.amazonaws.com/0/40887/131964d6-5fc1-ed0c-842d-2a8393cfa9cd.png)

画面中央に配置します。分かりにくいですが、Position横の`▼`（三角マーク）を押すと％指定ができるようになります。

![スクリーンショット 2014-12-05 7.39.33.png](https://qiita-image-store.s3.amazonaws.com/0/40887/0b930b98-d9c0-7de3-f8a2-5f7599eb4b7f.png)

50%,50%にして中央に配置します。

### パネル配置

Layer的なやつです。

![スクリーンショット 2014-12-05 7.42.54.png](https://qiita-image-store.s3.amazonaws.com/0/40887/f14c35d8-3d52-eb71-da20-64ef1389e191.png)

デフォルトで水色の半透明なレイヤーになってます。

![スクリーンショット 2014-12-05 7.43.09.png](https://qiita-image-store.s3.amazonaws.com/0/40887/796e63aa-2c16-c401-80f3-7ce3804f9eb7.png)

Scale9の画像を設定してみます。

16*16で外枠1pxが透明で2px角だけ抜いてます。

![スクリーンショット 2014-12-05 7.45.06.png](https://qiita-image-store.s3.amazonaws.com/0/40887/a133884b-da69-3602-dd67-190031739e28.png)

こんな感じです。

![スクリーンショット 2014-12-05 7.47.47.png](https://qiita-image-store.s3.amazonaws.com/0/40887/bb1fc921-20f5-d174-ed0a-25022f27208f.png)

Scale9Gridに設定する値は、この画像の**どの部分を引き伸ばすか**という設定になります。
今回の画像の場合、外枠を縦横3pxとなります。

![スクリーンショット 2014-12-05 7.50.33.png](https://qiita-image-store.s3.amazonaws.com/0/40887/c8b217cc-62cf-0236-f808-d275777984c7.png)

結果このようになります。

![スクリーンショット 2014-12-05 7.45.33.png](https://qiita-image-store.s3.amazonaws.com/0/40887/5cdf0e67-1229-5acf-6775-d8a21969a149.png)

### テキスト配置

Labelをドラッグドロップします。

![スクリーンショット 2014-12-05 7.52.04.png](https://qiita-image-store.s3.amazonaws.com/0/40887/ba7ca937-3086-3fe1-5913-5ff738b01d98.png)

AutoAdjustは、設定しているテキストの内容でサイズを動的に変更してくれます。

![スクリーンショット 2014-12-05 7.53.14.png](https://qiita-image-store.s3.amazonaws.com/0/40887/1b50fb20-c6c5-607a-50c6-92e6aea17b67.png)

`Font file`にmisaki_gothicを設定します。

![スクリーンショット 2014-12-05 7.54.25.png](https://qiita-image-store.s3.amazonaws.com/0/40887/bbd28868-727b-1a2f-a1f6-3e6810fb514a.png)

### ボタン配置

![スクリーンショット 2014-12-05 7.55.28.png](https://qiita-image-store.s3.amazonaws.com/0/40887/0b4c9995-3a5a-38ae-7937-cbcd0a5bfe50.png)

適当に起きます。

![スクリーンショット 2014-12-05 7.55.42.png](https://qiita-image-store.s3.amazonaws.com/0/40887/ad6280f9-5b19-ac57-aa2d-e65342d6a0fb.png)

通常状態（Normal State）、押し下げ時（Press State）、非活性時（Disabled State）の画像を用意する必要があります。

![スクリーンショット 2014-12-05 7.55.52.png](https://qiita-image-store.s3.amazonaws.com/0/40887/62b9495d-8b4b-f1dc-c022-81274f3c8607.png)

画像用意するのがちょっと大変なので、デフォルトの白ボタンのままにします。

ButtonLabelのFontも指定できます。

### シミュレータで確認

せっかくなのでキャラ画像も置いてこんな感じになりました。

![スクリーンショット 2014-12-05 7.59.44.png](https://qiita-image-store.s3.amazonaws.com/0/40887/29a9f94b-1ead-5ca4-7ac5-838db4aa2b22.png)

一旦これでCocosStudio上での画面作成は終わります。

画面左上の`▶`ボタンを押すとシミュレータが起動して確認できます。

![スクリーンショット_2014-12-05_8_00_31.png](https://qiita-image-store.s3.amazonaws.com/0/40887/115c7a7d-df30-2a07-c842-fbd71b858003.png)

簡単なレイアウト確認ができます。

![スクリーンショット 2014-12-05 8.01.52.png](https://qiita-image-store.s3.amazonaws.com/0/40887/596e9bca-e8a3-c46e-182c-b8ba73765ef0.png)

### publishしてバイナリを作成

シミュレータ起動の右にあるボタンでバイナリ出力と利用しているリソースの出力を行います。

![スクリーンショット_2014-12-05_8_00_31.png](https://qiita-image-store.s3.amazonaws.com/0/40887/b7f95508-2e67-69f8-b08f-be2b10627f71.png)

一瞬で終わります。デフォルトの出力先は、`CocosProject`ディレクトリ内の`res`ディレクトリになります。

![スクリーンショット 2014-12-05 8.08.40.png](https://qiita-image-store.s3.amazonaws.com/0/40887/1911b996-f62c-30d7-22a6-ae96fb435745.png)

出力先を変えたい場合は、以下の以前書いた記事を参考にしていただければと思います。

[Qiita - Cocos Studio v2でpublish先のディレクトリを変更する方法](http://qiita.com/kyokomi/items/0dc691c52822f14cd62c)

# Cocos2d-x側

## Resourceにファイルを追加
CocosStudioで作ったファイルをpublishしているので`Add File`します。

今回は不要なので、最初からある`res`ディレクトリを削除します。

![スクリーンショット 2014-12-05 8.11.57.png](https://qiita-image-store.s3.amazonaws.com/0/40887/a1d46a7c-9152-6b55-c0d4-f1bd3c9bb3f8.png)

`Add Files`で`CocosProject/res`を追加します。

![スクリーンショット 2014-12-05 8.12.08.png](https://qiita-image-store.s3.amazonaws.com/0/40887/11a8f107-1f16-201d-19d0-f8e51cad3130.png)

![スクリーンショット 2014-12-05 8.12.18.png](https://qiita-image-store.s3.amazonaws.com/0/40887/08d43ebb-95fa-03b6-b70e-7a721b6386e8.png)

![スクリーンショット 2014-12-05 8.12.27.png](https://qiita-image-store.s3.amazonaws.com/0/40887/472be106-0a9a-2806-eecd-0aec7689a84f.png)

結果、こうなります。

![スクリーンショット 2014-12-05 8.12.37.png](https://qiita-image-store.s3.amazonaws.com/0/40887/a31354e7-eb51-a5db-11f3-891013ff698f.png)

## Cocos2d-xで表示

### CSLoaderで.csbを読み込み

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

    // 〜省略〜

    // 画面サイズを480x320にする
    glview->setDesignResolutionSize(480, 320, ResolutionPolicy::SHOW_ALL);

    // 〜省略〜
}
```

抜粋になりますが、以下のように呼び出します。

```cpp:HelloWorldScene.cpp
#include "HelloWorldScene.h"

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

USING_NS_CC;
using namespace cocostudio;

// ~省略~

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    // 〜省略〜

    // --- Cocos Studio v2読み込み ---

    CSLoader::getInstance()->setRecordProtocolBuffersPath(true); // .csbを読み込んだディレクトリを保持してリソースを探す指定
    auto mainScene = CSLoader::getInstance()->createNodeFromProtocolBuffers("res/MainScene.csb");
    this->addChild(mainScene);
    
    return true;
}
```

**2014/12/30追記:**
CocosStudio v2.0.6でCSLoaderの使い方が変わってますご注意ください。

```cpp:v2.0.0〜v2.0.2
CSLoader::getInstance()->createNodeFromProtocolBuffers("res/MainScene.csb");
```

```cpp:v2.0.6
CSLoader::getInstance()->createNode("res/MainScene.csb");
```

### 一旦、起動してみます

![スクリーンショット 2014-12-05 8.27.54.png](https://qiita-image-store.s3.amazonaws.com/0/40887/25119a44-cc5a-58fd-e2cf-c21b727908ff.png)

iPhone6など画面サイズが大きい時に出てくる左右の黒線が気になる場合の対処法は一応あります。
色々と小細工をしないと行けないので、慣れるまではやめておいたほうがいいです。。。（すごくハマります）

一応、こちらにまとめてありますのでよろしければ御覧ください。

[きょこみのーと - Cocos2d-xで縦横いい感じのDesignResolutionSizeを指定する](http://kyokomi.hatenablog.com/entry/2014/10/28/072639)

## 配置したNodeを操作

### Cocos2d-xでボタンのイベントをフックしてテキストを更新

CocosStudio上で各Nodeに指定しているNameを元にCocos2d-xでNodeを操作できます。

![スクリーンショット 2014-12-05 8.33.15.png](https://qiita-image-store.s3.amazonaws.com/0/40887/07905cf3-db29-afea-9269-6b1c66fee521.png)

```cpp:HelloWorldScene.cpp

// ~省略~

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    // 〜省略〜

    // --- Cocos Studio v2読み込み ---

    // 〜省略〜

    // --- ボタンイベント ---
    
    // 変更するラベルを取得（Panel_1/Text_1）
    auto textLabel = mainScene->getChildByName("Panel_1")->getChildByName<ui::Text*>("Text_1");
    // ボタンを取得してクリックイベントを設定
    mainScene->getChildByName<ui::Button*>("Button_1")->addClickEventListener([textLabel](Ref *ref) {
        // ボタン押した時の処理
        
        // ラベルの内容を書き換える
        textLabel->setString("Test !!!!!!!!!!!!");
    });
    
    return true;
}
```

![59e53f89d40decdb761f8e6befd984dc.gif](https://qiita-image-store.s3.amazonaws.com/0/40887/4555dfd0-a73e-cb9d-4a7c-6b7a0c908070.gif)

# おわり
基本的な構成の簡単な画面であれば、ちゃんと動くようになっています。

今回のソースコードはGithubにて公開していますので、もし必要であればご覧ください。

[Github - kyokomi/CocosStudioV2Sample](https://github.com/kyokomi/CocosStudioV2Sample/tree/d629bdb26c272239e3931436c3129439b94f3f07)

v2.0の注意点やv1.6からの変更点などはこちらにメモレベルですが記載していますので、
もしよろしければ御覧ください。

[きょこみのーと - Cocos Studio v2をCocos2d-x3.3rc0で使ってみたメモ](http://kyokomi.hatenablog.com/entry/2014/10/30/145520)