Cocos Studio2.3.2を使ってみました。Cocos Studioのプレビュー画面とiOSシミュレーターの実行画面を合わせるまで。

Cocos2.3.2betaからbetaが取れてCocos2.3.2になっていましたので、Mac版Cocos2.3.2をインストールして、（たぶんいっしょにインストールされた）Cocos Studio2.3.2を使ってみました。

名前が紛らわしいですが、CocosとCocos Studioは別アプリです。CocosをインストールするとCocos Studioもインストールされるはずです。

Cocos StudioはCocos2d-xでゲームを制作する際、シーンなどを視覚的に作成でき、簡単なアニメーションも作ることができます。私自身、まだこれを使ってゲームを完成させたことがありませんので、いろいろ試行錯誤中です。

気がついた事

• Skeltal Animationを作成できるようになっていました。

ボーンを使ってアニメーションを作れるようですが、使う必要が生じた時にでも調べてみようと思います。

• 縦画面のアプリをPreviewしようとすると、表示がおかしくなりました。

XCodeやCode IDEなどで実行すると問題ありませんが、Cocos Studio上で再生ボタンを押してPreviewすると横が半分くらいに圧縮されて、縦が伸びた状態で表示されてしまいます。ちなみにプロジェクトを横画面で作成すると問題は起こりませんでした。（Cocos Studioのバグかなと思います）

プロジェクト内のconfig.jsonファイルの"isLandscape": falseをtrueにすればCocos StudioのPreviewで正常に表示されました。一時しのぎでしかなく、Code IDEで実行するときはfalseに戻す必要がありますので現実的な解決策ではありませんが。

• 最初のシーン作成時だけやたら時間がかかった

なぜか右クリックからNew Files...でシーンを作った時、初回だけ長い時間がかかりました。古いバージョンとの調整でもしていたのでしょうか・・・この現象は私の環境だけかもしれませんが。新しく作ったプロジェクトなどでは問題は起きていません。

Cocos Studioで簡単なシーンを作ってみる

試しに新規プロジェクトを作成して、iPhone5のサイズの1136x640サイズでシーンを作ってみました。

iPhone4のサイズに変更するとこんな感じです。

中に配置したテキストや画像は画面サイズによって自動的に移動しています。上下や左右方向にピン止めしているためです。

すべてアンカーポイントはそのままにしています。テキストはピクセル指定した場合、テキストの端から指定した座標分のマージンが取られているようです。パーセント指定の場合は、テキストの中央が指定したパーセントになっているように見受けられます。

iOSシミュレーターで実行してみる

下記のボタンを押してプロジェクトへPublishします。

XCodeからiOSシミュレーターでiPhone5で実行するとこうなってしまいました。

ResolutionPolicyをSHOW_ALLとしているためと判明しました。960x640を画面いっぱいに表示しようとしているので、iPhone5では横幅が余ってしまっています。元のデータが1136x640でできているので、途中で切れています。

そこで、SHOW_ALLをFIXED_HEIGHTに変更しました。変更したソースファイルは言語ごとに以下の通りです。ファイル内のSHOW_ALLをFIXED_HEIGHTに置き換えただけです。

すると高さは640の固定で、横幅はデバイスの幅いっぱいに使って表示します。

次に画面サイズ960x640のiPhone4sで実行しました。iPhone4sで実行したところです。

レイアウトがうまくいっていないようです。Cocos Studioで最後に表示した解像度でノードのサイズが決まってしまっているように思います。ノードのサイズが1136x640になっていましたので、iPhone5と同じように表示しようとして右側が切れている感じです。

そこで、Cocos Studioから読み込んだノードのサイズをsetContentSizeメソッドで画面サイズに設定してからHelperクラスのdoLayoutメソッドを実行するようにしたらうまくいきました。

これでCocos StudioのPreviewと同じ表示になりました。

以下はノードのサイズ変更とdoLayoutメソッドの実行のために変更したソースファイルです。長いですが実際の変更箇所は２、３行だけです。

Lua

local MainScene = class("MainScene", cc.load("mvc").ViewBase)

MainScene.RESOURCE_FILENAME = "MainScene.csb"

function MainScene:onCreate()
    printf("resource node = %s", tostring(self:getResourceNode()))

    -- ここから
    self:getResourceNode():setContentSize(display.size)
    ccui.Helper:doLayout(self:getResourceNode())
    -- ここまで追加しました。
end

return MainScene

javascript

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();

        /////////////////////////////
        // 2. add a menu item with "X" image, which is clicked to quit the program
        //    you may modify it.
        // ask the window size
        var size = cc.winSize;

        var mainscene = ccs.load(res.MainScene_json);

        // ここから
        mainscene.node.setContentSize(size);
        ccui.helper.doLayout(mainscene.node);
        // ここまで追加しました。

        this.addChild(mainscene.node);

        return true;
    }
});

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

C++

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

USING_NS_CC;

using namespace cocostudio::timeline;

Scene* HelloWorld::createScene()
{
    // 'scene' is an autorelease object
    auto scene = Scene::create();

    // 'layer' is an autorelease object
    auto layer = HelloWorld::create();

    // add layer as a child to scene
    scene->addChild(layer);

    // return the scene
    return scene;
}

// on "init" you need to initialize your instance
bool HelloWorld::init()
{
    //////////////////////////////
    // 1. super init first
    if ( !Layer::init() )
    {
        return false;
    }

    auto rootNode = CSLoader::createNode("MainScene.csb");

    // ここから
    Size size = Director::getInstance()->getWinSize();
    rootNode->setContentSize(size);
    cocos2d::ui::Helper::doLayout(rootNode);
    // ここまで追加しました。

    addChild(rootNode);

    return true;
}

以上です。

Cocos Studioと関係無いですが、各言語について

すぐ上のコードを見ると、Luaがソースコードがすっきりしていていいですね。これから始める方にはおすすめです。でもLuaも不満点があります。コメント行頭が「--」だったり、score++のような書き方ができなかったり、{}を使ってなかったり・・・C++に慣れているとセミコロンとコロンを間違えたり、行末に;をつけてしまったり・・・

javascriptはUnityでも使えるので（正確にはjavascriptと少し違うUnity scriptです）いいかもしれません。ただ、Cocos2d-xで使う場合、クラスの書き方などにクセがあるので私はLuaを使っています。

C++は、C++を覚えていて使える方はいいですが、趣味でゲームをつくろうとか、これからC++を勉強しようという方にはあまりおすすめしません。C++言語自体が難しいです。

まとめると、Luaは俺は超初心者だぜって人に、C++は俺はバリバリのプログラマーだぜって人に、javascriptはその中間って感じかな？