[Cocos2d-x] Cocos Studio2 を使ってみる (基本編)

Cocos2d-xでは、一つのシーンに対してノードを吊り下げていって、画面を構成していくことが多いと思います。
例えば、以下のような画面ではMainSceneの下にスプライトやパネル、ボタンなどをaddChildしています。

cocosstudio_01

これをソースコード内に書いていくのもいいですが、もっと多くのオブジェクトを追加したり、さらに木構造が深くなっていくと大変になります。

そこで、ノードが増えたり減ったりするようなものではない、ある程度静的なオブジェクトであれば、Cocos2d本家がサポートしている「Cocos Studio」がオススメです。

GUIで位置を確認しながらオブジェクトを配置したり、煩わしい設定を手で書く必要がなくなります。

この記事では「Cocos Studio」の使い方を説明します。
環境は以下の通りです。

Cocos2d-x 3.6
Cocos Studio 2.2.6

Cocos Studio のセットアップ

公式サイトからダウンロードする。
http://www.cocos2d-x.org/download

cocosstudio_02

Mac か Windows か、環境に合わせてダウンロード。

インストール先を聞かれる。ここでは、cocos2d-x 本体があるディレクトリに設定しておいた。

cocosstudio_03

続いて、サンプルプロジェクトのインストール先を聞かれる。
どこでもよいと思うが、Cocos2d-xプロジェクトをまとめているフォルダへ設定しておいた。

cocosstudio_04

インストールが進んでいく。終わったら以下の画面となるので、早速起動してみる。

cocosstudio_05

ここで起動されるのは、インストールされた「Cocos」と「Cocos Studio」のうち、「Cocos」の方。
Cocos は Cocos2d をサポートするランチャーみたいなもの。

cocosstudio_06

少し見慣れない画面だが、今のところはあまりお世話にならない画面。
左側のメニューを覗くと、まだまだβ版な模様だがきっと充実していくのだと思う。

Projects > New Project をクリック。Cocos Project を選んで、Next。

cocosstudio_07

プロジェクトの作成画面。
ここで大切なのは、既存のプロジェクトに上書きされないようなパスに設定すること。
CocosStudioで使用する画面構成プロジェクトファイルが欲しいので、既存プロジェクトとは別のパスに設定する。
（ここでは、SampleGameプロジェクト内にcocosTmpフォルダを作成し、そこへパスを設定している）

cocosstudio_08

Finished すると、指定したパスにファイル群が作成され、「Cocos Studio」が立ち上がる。

cocosstudio_09

ここでは何もせず、ウィンドウを閉じる。
作成されたファイル群で必要な物は、

cocosstudioフォルダ
SampleGame.ccs
SampleGame.cfg
SampleGame.udf

cocosstudio_10

これを、プロジェクトフォルダに突っ込む。

cocosstudio_11

cocosTmpフォルダはいらないので削除。
SampleGame.ccsを実行すると「Cocos Studio」が起動し、ファイルが開かれる。

Cocos Studio プロジェクト設定

作り始める前に、プロジェクトの設定をする。
以下の図のコンボボックスで、デザイン解像度と向きを設定する。

cocosstudio_12

このデザイン解像度で設定されたサイズを元に画面設計し、画像などを作成、設置していくことになる。
例えばiPhone5の横向き端末をメインターゲットとするならば、1136*640を指定する。
(16:9の端末に対応させるなどの事は事前に決めておき、複数解像度対応としてどのように表示するかはCocos2d-x側で指定することになる)
既存プロジェクトですでに設定してあるならそれにあわせておく。

Project > Project Setting…

cocosstudio_13

Publish Directory が初期では「res」となっているが、これを「Resources」に変更することで、パブリッシュ時に画像やデータが既存プロジェクトに即コピーされるようになる。

cocosstudio_14

オブジェクトの配置

早速リソースにあるファイルを画面に配置していく。

今回はResourcesフォルダ構成の一つの例として、直下に画像などは置かずimagesフォルダを作成しておいた（お好みで）

これをCocos Studio上のResourcesエリアで同じフォルダ構成にする。
右クリックで New Folder でフォルダ作成。ファイルはドラッグアンドドロップでフォルダ間を移動できる。
(16-9フォルダを作成し、そこにcsdファイルを置いたのは、後々のマルチ解像度対応で必要になるかもしれないので)

cocosstudio_15

オブジェクトの名前を変更する。プログラム側でノードを指定するために必要。

cocosstudio_16

せっかくなので、ボタンを追加してみる。
左上のWidgetsからButtonを探し、ドラッグアンドドロップする。

cocosstudio_16_2

右側のPropertiesでサイズを変更したり、テキストを変更できる。
ボタンの名前をSampleButtonにしておく。

終わったら、Publishする。

cocosstudio_17

成功したなら、Resourcesフォルダに設定したフォルダとファイルができていることを確認。

cocosstudio_18

プログラム内では、このcsbファイルを読み込むことになる。

Cocos Studioで作成したデザインファイルの読み込み

デザイン解像度やResourcesフォルダの構成など、設定してない場合は以下のようにAppDelegate.cppを修正しておく。

bool AppDelegate::applicationDidFinishLaunching() {

    // ...省略

    // デザイン解像度
    const float RES_SIZE_16_9_WIDTH = 1136;
    const float RES_SIZE_16_9_HEIGHT = 640;

    // Windowsの場合はウィンドウサイズを設定
#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32)
    // ウィンドウサイズ変更
    glview->setFrameSize(RES_SIZE_16_9_WIDTH, RES_SIZE_16_9_HEIGHT);
#endif

    // デザイン解像度とポリシー指定(アスペクト比を維持して拡縮)
    glview->setDesignResolutionSize(RES_SIZE_16_9_WIDTH, RES_SIZE_16_9_HEIGHT, ResolutionPolicy::SHOW_ALL);

    // Resourcesフォルダの検索パス追加
    FileUtils::getInstance()->addSearchPath("images/16-9");

    // create a scene. it's an autorelease object
    auto scene = HelloWorld::createScene();

    // run
    director->runWithScene(scene);

    return true;
}

bool AppDelegate::applicationDidFinishLaunching() {

// ...省略

// デザイン解像度

const float RES_SIZE_16_9_WIDTH = 1136;

const float RES_SIZE_16_9_HEIGHT = 640;

// Windowsの場合はウィンドウサイズを設定

#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32)

// ウィンドウサイズ変更

glview->setFrameSize(RES_SIZE_16_9_WIDTH, RES_SIZE_16_9_HEIGHT);

#endif

// デザイン解像度とポリシー指定(アスペクト比を維持して拡縮)

glview->setDesignResolutionSize(RES_SIZE_16_9_WIDTH, RES_SIZE_16_9_HEIGHT, ResolutionPolicy::SHOW_ALL);

// Resourcesフォルダの検索パス追加

FileUtils::getInstance()->addSearchPath("images/16-9");

// create a scene. it's an autorelease object

auto scene = HelloWorld::createScene();

// run

director->runWithScene(scene);

return true;

}

HelloWorld.h にinclude 追記。

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

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

HelloWorld.cpp の HelloWorld::init()を修正、追加。

HelloWorld::init() {
    // 3.add your codes below... 部分をコメントアウト

    // ...省略

    // メインシーンノードの読み込み
    auto mainScene = CSLoader::getInstance()->createNode("MainScene.csb");
    this->addChild(mainScene);

    return true;

}

HelloWorld::init() {

// 3.add your codes below... 部分をコメントアウト

// ...省略

// メインシーンノードの読み込み

auto mainScene = CSLoader::getInstance()->createNode("MainScene.csb");

this->addChild(mainScene);

return true;

}

以下のように出るとオッケー。

cocosstudio_19

このボタンにイベントを追加してみる。

// 2バイト文字対応
#pragma execution_character_set("utf-8")

HelloWorld::init() {
    // ...省略

    // メインシーンノードの読み込み
    auto mainScene = CSLoader::getInstance()->createNode("MainScene.csb");
    this->addChild(mainScene);

    // ボタンノードを取得
    auto sampleButton = mainScene->getChildByName<ui::Button*>("SampleButton");
    // タッチイベント追加
    sampleButton->addTouchEventListener([this](Ref* sender, ui::Widget::TouchEventType type) {

        // タッチ中
        if (type == ui::Widget::TouchEventType::BEGAN) {
            dynamic_cast<ui::Button*>(sender)->setTitleText("押されている");
        }

        // タッチが終わった後に実行
        if (type == ui::Widget::TouchEventType::ENDED || type == ui::Widget::TouchEventType::CANCELED) {
            dynamic_cast<ui::Button*>(sender)->setTitleText("サンプル");
        }
    });

    return true;
}

// 2バイト文字対応

#pragma execution_character_set("utf-8")

HelloWorld::init() {

// ...省略

// メインシーンノードの読み込み

auto mainScene = CSLoader::getInstance()->createNode("MainScene.csb");

this->addChild(mainScene);

// ボタンノードを取得

auto sampleButton = mainScene->getChildByName<ui::Button*>("SampleButton");

// タッチイベント追加

sampleButton->addTouchEventListener([this](Ref* sender, ui::Widget::TouchEventType type) {

// タッチ中

if (type == ui::Widget::TouchEventType::BEGAN) {

dynamic_cast<ui::Button*>(sender)->setTitleText("押されている");

}

// タッチが終わった後に実行

if (type == ui::Widget::TouchEventType::ENDED || type == ui::Widget::TouchEventType::CANCELED) {

dynamic_cast<ui::Button*>(sender)->setTitleText("サンプル");

}

});

return true;

}

先頭に#pragma～を追加してないと2バイト文字が文字化けするので、入れておくことをオススメする。

これで、ボタンが押されている間だけ「押されている」にボタンのテキストが変更される。

cocosstudio_20

おわりに

「Button」の他にもよく使いそうなのが、「Sprite」「Label」「Panel」とかでしょうか。

また、Resourcesエリアのフォルダ右クリック > New File で新しく「Scene」「Layer」「Node」「SpriteSheet」も追加できます。

「SpriteSheet」は複数の画像を一つの画像にまとめてくれる＆個々の画像指定と同じ挙動を実現できるとてもいい機能なので、また紹介したいと思います。

投稿タグ: Cocos Studio, Cocos2d-x

MENU

[Cocos2d-x] Cocos Studio2 を使ってみる (基本編)

Cocos Studio のセットアップ

Cocos Studio プロジェクト設定

オブジェクトの配置

Cocos Studioで作成したデザインファイルの読み込み

おわりに

スポンサーリンク

プロフィール

プロダクト

[iOS/Android] 脱出探偵少女

[iOS/Android] 脱出ゲームうつしよ

[iOS/Android] おたのプリンセス！

[iOS/Android] 愛されるより逃れたい

[PC] CROSS DIMENSION

おすすめ

カテゴリー

最近の投稿

MENU

[Cocos2d-x] Cocos Studio2 を使ってみる (基本編)

Cocos Studio のセットアップ

Cocos Studio プロジェクト設定

オブジェクトの配置

Cocos Studioで作成したデザインファイルの読み込み

おわりに

スポンサーリンク

プロフィール

プロダクト

[iOS/Android] 脱出探偵少女

[iOS/Android] 脱出ゲーム うつしよ

[iOS/Android] おたのプリンセス！

[iOS/Android] 愛されるより逃れたい

[PC] CROSS DIMENSION

おすすめ

カテゴリー

最近の投稿

[iOS/Android] 脱出ゲームうつしよ