Webでもアプリでも、レイアウト調整って地味で生産性が低く、どちらかというとあまりやりたくない作業だったりしますね。
だからこそ、 どうやってUIの作成を簡単に少ない工数で行うか が課題になってきます。

そこでCocos Studioです。

Cocos Studio

Cocos Studioとは、公式で提供されているUIエディターです。
GUIで操作でレイアウトを組み立て、調整することができる便利なツール。これを使わない手はありません。

実際私はTapShingyoを実装するにあたって、Cocos StudioでUIとSpriteSheetの作成を行いましたので、簡単にその手順などご紹介いたします。

DLと導入

Cocos StudioはCocosにバンドルされています。
以下URLからCocosをDLしてください。

http://jp.cocos.com/products/

導入にあたって、以下の通りにすればOKでしたため、詳しい手順は割愛いたします。

cretia studio
開発者ブログ - ITとゲームのあいだ
[Cocos2d-x] Cocos Studio2 を使ってみる (基本編)
http://studio.cretia.net/blog/387

導入のポイントは次のような感じです。

  • Cocos本体を、cocos2d-x本体とまとめておくとわかりやすい
  • Cocos Studioのプロジェクトを作ったら、必要なファイルだけをアプリプロジェクトにコピーする
  • Publish Directoryを変更して、パブリッシュ時にアプリプロジェクトにリソースがコピーされるようにする

UIを組み立てる

それではアプリのUIを組み立ててみましょう。
ここではボタンを配置してみます。

1.シーンの作成

File > NewFileを行いシーンを作成します。

ファイル名を[TestScene]とします。

新しいシーンとして、真っ黒なステージが生成されました。

2.ボタンの配置

今度はこちらにボタンを配置します。
画面左のWidgetsからButtonをドラッグし、ステージにドロップするだけの簡単操作です。

3.ボタンを設定

ドロップしたボタンを選択すると、画面左に下のイメージのようなメニューが表示されます。

ボタン名称

ボタン名はプログラムからの呼び出しに使用します

配置

Positionでボタンの配置場所を設定します。
デフォルトはピクセル(Px)ですが、%の指定に切り替えることも可能です。
「Px と %」を切り替える場合は単位横の参画をクリックしてください。

背景

Feature > Backgroundでボタンの画像を指定することができます。

TapShingyoでは文字を画像側に書き出しているため、Backgroundの指定のみで、Textは空白としました。

今回は割愛しますが、9-silceの指定も簡単にできますよね。

4.アプリに組み込む

今回作成したUIをアプリに組み込みましょう。
Project > Publish using previous settingを実行してください。

うまくいけばプロジェクトのResourcesディレクトリ以下に[TestScene.csb]が生成されます。
このファイルをTestScene.csbファイルをcocos2d-xで呼び出せばOKです。

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

using namespace cocos2d;

Scene* TestScene::createScene()
{
    auto scene = Scene::create();
    scene->addChild(TestScene::create());
    return scene;
}

bool TestScene::init()
{
    if (Layer::init() == false)
    {
        return false;
    }
    auto mainScene = CSLoader::getInstance()->createNode("TestScene.csb");
    this->addChild(mainScene);
    return true;
}

5.ボタンにアクションをつける

Cocos Studio側でButtonのプロパティを設定し、Pressed Stateを指定しておくと、ボタンタップで画像の霧変わりまでカバーできます。
しかしながら「タップしたら反応するだけ」の状態ですので、タップイベントを拾ってアクションを設定します。

こちらも簡単で、UIファイルの子要素にコールバックを設定することで対応します。

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

using namespace cocos2d;

Scene* TestScene::createScene()
{
    auto scene = Scene::create();
    scene->addChild(TestScene::create());
    return scene;
}

bool TestScene::init()
{
    if (Layer::init() == false)
    {
        return false;
    }
    auto mainScene = CSLoader::getInstance()->createNode("TestScene.csb");
    this->addChild(mainScene);

    auto infoButton = mainScene->getChildByName<ui::Button*>("button-");
    infoButton->addTouchEventListener([this](Ref* sender, ui::Widget::TouchEventType type) {
        if (type == ui::Widget::TouchEventType::ENDED || type == ui::Widget::TouchEventType::CANCELED)
        {
            // ボタンがタップされたときの処理を実装する
        }
    });
    return true;
}

SpriteSheetを作成する

先日リリースしましたTapShingyoは海外の方をいちおう意識したアプリです。

そこで問題となるのが「 日本語に対応していない端末で、問題なく日本語が表示されるか 」ということですね。
モックを作成して検証すればよかったのですが、現状ではそういった端末がなく、悩んだ結果、各文字を画像化することとしました。

文字数も多く、画像を1枚1枚ロードするとパフォーマンスにも影響すると考えられたため、SpriteSheetを用意することにしました。

SpriteSheetとは

複数の画像を1枚に結合することで、ロードやメモリ消費を抑えるためのテクニックで、テクスチャアトラスとも呼ばれます。
1枚の大きな画像とplistと呼ばれる、画像名と座標を定義したファイルをセットにして使います。

WebのフロントエンドでやっているCSSスプライトと同じようなものですね。

詳しくは以下をご覧ください。

スプライトシート すべてのゲーム開発者が知るべき事実-
https://www.codeandweb.com/jp/what-is-a-sprite-sheet

SpriteSheetを作成する

File > NewFileを行い新しいSpriteSheetを作成します。

次に、Resousesからまとめたいファイルをドロップします。
ドロップしたファイルが、そのままplistに定義されるファイル名となる点に注意してください。

char/charcode-AAAA.pngをSpriteSheetに出力する場合、実際の呼び出しもchar/charcode-AAAA.pngとします。

画像が収まりきらない場合はMaximum Sizeを調整してください。

Export Sprite Sheetを実行すると、結合後の画像とplistが出力されます。

結合前のバラ画像は不要ですので、アプリプロジェクトから削除しても問題ありません。

SpriteSheetを読み込む

plistをロードし、表示させたい画像を指定します。

SpriteFrameCache::getInstance()->addSpriteFramesWithFile(plist);
auto pSprite = Sprite::createWithSpriteFrameName( "char/charcode-AAAA.png" );

createWithSpriteFrameNameに与える引数はplistファイルに定義されているものを指定してください。

おわりに

Cocos Studioを利用することで、UI回りを別にまとめてしまうことができますので、コードがスッキリしますね。
私はSpriteやButtonしか理解していませんが、それでも恩恵は十分に感じられます。

使えるツールをどんどん導入して開発効率をアップしていきましょう。