CocosBuilderを使えばCocos2dでの画面デザインが簡単だった件

筆者はiPhoneのゲームを作る際にCocos2dを使ってますが、ホームページを見たらCocosBuilderなるものがありました。
なんか、Cocos2dのUIをデザインできるツールっぽい。

とりあえず使ってみました。
現在、 公開されていたCocosBuilderのバージョンはVersion 2.1とVersion 3 alpha。
ということで、CocosBuilder Version 2.1とCocos2dのVersion 2.1-rc0の組み合わせで試してみる。
CocosBuilderはアプリケーション本体とサンプルをダウンロードしました。
Xcodeは4.6です。

まず、準備としてCocos2dのテンプレートをインストール。

$ cd ~/Downloads
$ cd cocos2d-iphone-2.1-rc0
$ ./install_template.sh

 

早速、CocosBuilderを起動。
英語のドキュメンとが表示されたけど、読むのがつらいのでパス。

とりあえず、ダウンロードしたサンプルプロジェクトを確認してみる。
CcbExダウンロードしたサンプルからCocosBuilderExample.ccbprojというファイルを開きます。
これをみると、何となくCocosBuilderで何ができるのかが分かります。

テクスチャやメニューボタンの配置、アニメーションの設定、そして、パーティクルの設置などが簡単にできそう。
メモ用の付箋を貼ったりもできるみたい。
とりあえず、サンプルを動かしてみることをおすすめします。
サンプルの中にはXcodeのプロジェクトも入っているので、これをみればXcode側の作り方も分かるはず。

 

というところで、今度は実際にプロジェクトを作ってみる。
File-New-New Projectで新規プロジェクトを作成。
CcbNewHello CocosBuilderという画面がひな形として作成されるているので、とりあえずこのままXcodeで動かしてみようと思います。
File-Publishを実行すると、ccbiの拡張子のファイルができます。
これをあとでXcodeに登録します。
とりあえず、CocosBuilderは終了。

変わって、今度はXcodeを起動してcocos2dのテンプレートを使ってプロジェクトを作成します。
先ほど作ったccbiファイルをXcodeのプロジェクトに追加します。
筆者はResourcesフォルダに入れてみました。

 

次にCocosBuilderのサンプルのAdd to Your ProjectフォルダにあるCCBReaderフォルダもXcodeに追加します。

CcbXcode

CocosBuilderのリソースが使えるように、AppDelegate.mのimportに以下を追加します。

#import “CCBReader.h”

そして、

[director runWithScene: [IntroLayer scene]];

の部分を

[director runWithScene:[CCBReader sceneWithNodeGraphFromFile:@”HelloCocosBuilder.ccbi”]];

に書き換えます。
これで動くはずと思ったら、ビルドするとエラーが発生。
Cocos2dとCocosBuilderのバージョンの組み合わせによって、ちょっと手直しが必要になるかもしれません。
筆者の環境の例ですが、target_でエラーになっていた箇所を_targetに変更(数カ所ありました)。

//((CCSprite *)target_).displayFrame = spriteFrame;

((CCSprite *)_target).displayFrame = spriteFrame;

同様に、bundle_でエラーになっていので_bundleに書き換え(こっちは1カ所)。

//return [bundle_ pathForResource:resource ofType:ext inDirectory:subpath];

return [_bundle pathForResource:resource ofType:ext inDirectory:subpath];

さらに、CCBAnimationManager.mの最後の部分を以下のように書き換え。

@implementation CCEaseInstant

/* 修正前

-(void) update: (ccTime) t

{

    if (t < 0)

    {

        [other update:0];

    }

    else

    {

        [other update:1];

    }

}*/

-(void) update: (ccTime) t

{

if (t < 0)

    {

        [self.inner update:0];

    }

else

    {

        [self.inner update:1];

    }

}

これで、Xcodeでビルドしてシミュレーターで動作するのではないかと思います。

まだ、ちょっと触ってみただけですが、CocosBuilderを使えば、画面デザインがかなり楽になる感じです。
いままで、せこせことコードを書いて、微調整してはシミュレーターで確認していた作業はなんだったんだ、ということになりそうです。
次の作品では使ってみようと思います。

それにしても、すでにVersion 3 alphaまで進んでいるCocosBuilder。
なんでいままで、こんなものがあることに気づかなかったんだろう。。

で、いまいろいろ試しているところですが、Cocos2dで実装した後に画面の表示まではできるものの、設置したスプライトのアニメーションがうまく動かない。
なんか、Sceneに直接置いてあるスプライトではちゃんとアニメーションできるけど、そうでない場合、runActionしてもアニメーションが動かない。
実装が間違っているのか?

Tags: , , ,