39
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Cocos2d-xAdvent Calendar 2014

Day 6

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

Last updated at Posted at 2014-12-06

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用に何かする必要はないです。

$ 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

公式からダウンロードします。

Install

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

新規プロジェクトを作成

Project作成

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

スクリーンショット 2014-12-05 7.11.31.png

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

スクリーンショット 2014-12-05 8.06.08.png

Createする。

スクリーンショット 2014-12-05 7.22.29.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

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

スクリーンショット 2014-12-05 7.30.39.png

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

画面を作る

背景画像配置

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

スクリーンショット 2014-12-05 7.36.49.png

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

スクリーンショット 2014-12-05 7.37.20.png

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

スクリーンショット 2014-12-05 7.39.22.png

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

スクリーンショット 2014-12-05 7.39.33.png

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

パネル配置

Layer的なやつです。

スクリーンショット 2014-12-05 7.42.54.png

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

スクリーンショット 2014-12-05 7.43.09.png

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

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

スクリーンショット 2014-12-05 7.45.06.png

こんな感じです。

スクリーンショット 2014-12-05 7.47.47.png

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

スクリーンショット 2014-12-05 7.50.33.png

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

スクリーンショット 2014-12-05 7.45.33.png

テキスト配置

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

スクリーンショット 2014-12-05 7.52.04.png

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

スクリーンショット 2014-12-05 7.53.14.png

Font fileにmisaki_gothicを設定します。

スクリーンショット 2014-12-05 7.54.25.png

ボタン配置

スクリーンショット 2014-12-05 7.55.28.png

適当に起きます。

スクリーンショット 2014-12-05 7.55.42.png

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

スクリーンショット 2014-12-05 7.55.52.png

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

ButtonLabelのFontも指定できます。

シミュレータで確認

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

スクリーンショット 2014-12-05 7.59.44.png

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

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

スクリーンショット_2014-12-05_8_00_31.png

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

スクリーンショット 2014-12-05 8.01.52.png

publishしてバイナリを作成

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

スクリーンショット_2014-12-05_8_00_31.png

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

スクリーンショット 2014-12-05 8.08.40.png

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

Qiita - Cocos Studio v2でpublish先のディレクトリを変更する方法

Cocos2d-x側

Resourceにファイルを追加

CocosStudioで作ったファイルをpublishしているのでAdd Fileします。

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

スクリーンショット 2014-12-05 8.11.57.png

Add FilesCocosProject/resを追加します。

スクリーンショット 2014-12-05 8.12.08.png

スクリーンショット 2014-12-05 8.12.18.png

スクリーンショット 2014-12-05 8.12.27.png

結果、こうなります。

スクリーンショット 2014-12-05 8.12.37.png

Cocos2d-xで表示

CSLoaderで.csbを読み込み

AppDelegate.cpp
bool AppDelegate::applicationDidFinishLaunching() {

    // 〜省略〜

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

    // 〜省略〜
}

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

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の使い方が変わってますご注意ください。

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

一旦、起動してみます

スクリーンショット 2014-12-05 8.27.54.png

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

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

きょこみのーと - Cocos2d-xで縦横いい感じのDesignResolutionSizeを指定する

配置したNodeを操作

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

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

スクリーンショット 2014-12-05 8.33.15.png

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

おわり

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

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

Github - kyokomi/CocosStudioV2Sample

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

きょこみのーと - Cocos Studio v2をCocos2d-x3.3rc0で使ってみたメモ

39
41
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?