15分でCocosBuilderをさくっと試してみるまとめ

CocosBuilderは無料のツールで,これを使うとcocos2dのレイアウトをInterfaceBuilderのようにGUI上で操作できるようになります。

viewのプログラミングは面白くないしめんどくさいので、こういうツールをつかって楽しましょう。

CocosBuilderを入手

ここから最新版のApplicationとExamplesをダウンロードしてきて解凍。

プロジェクト作成

cocos2dのテンプレートからcocos2d iOSのプロジェクトを作成。

読み込み用のファイルを追加

上で落としてきたExampleの
CocosBuilder-2.0-rc3-examples > Add to Your Project > cocos2d-iphone
を、上でつくったプロジェクトにドラッグアンドドロップ。

レイヤーを追加

メニューバーの File -> New -> File… から cocos2dv2.x の CCNode class を選択してnextをクリック。

Subclass of CCLayerを指定して追加。

ここでは"CCBTest"という名前にしておきます。

CocosBuilderプロジェクトを作成

CocosBuilderを起動して、File -> New -> New Project… から適当なところにプロジェクト作成。

ここでは"CCBTest"という名前にしておきます。

CCBプロジェクトの設定

・素材の場所を指定

File -> Project Settings… から,

Screenshot1

をクリックし、上でつくったcocos2dのプロジェクトのResourcesフォルダを指定。

・Publish先を指定

Screenshot2

をクリックして、上でつくったcocos2dプロジェクトのResourcesフォルダを指定。

最後に Publish to zip file にチェックをいれてDone。

パーツの配置

File -> New -> New File… から、

Screenshot3

上のように設定してCreate。

名前は一応上でつくったLayerに合わせておいて（ここではCCBTest）、
StructureのCCLayerを選択し、右のCodeConnectionsを以下のように設定。

Screenshot4

これでxcode側でつくったCCBTestレイヤーとリンクします。

それができたら、Object -> Add Object からいろんなパーツをぺけぺけ置いたりして画面をつくりましょう。作り終わったら File -> Save で保存。

保存ができたら、File -> Publish を実行。

"ccb.zip"というファイルが上で指定したPublish先に生成されるので、それを上でつくったxcodeプロジェクトにドラッグアンドドロップ。

ビルド設定の変更

・Preprocessor Macrosに、"CCB_ENABLE_UNZIP"を追加

Screenshot4

・AppDelegateにCCBReaderをインポート

#import "CCBReader.h"をAppDelegate.mに追加。

・サンプルのレイヤーをつくったやつに入れ替えてみる

Appdelegate.m の - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions の先頭に,

[CCBFileUtils sharedFileUtils];

を追加。
（*[director_ setView:glView];*の前ならどこでもいいけど、わかりやすいように先頭に。）

さらに AppDelegate.m 76行目あたりの、

[director_ pushScene: [IntroLayer scene]];

を、

[CCBReader unzipResources:@"ccb.zip"];
CCScene* scene = [CCBReader sceneWithNodeGraphFromFile:@"CCBTest.ccbi"];
[director_ pushScene: scene];

に変更してビルド。

さきほどつくった画面が表示されるはずです。

おしまい！

メンバ変数にリンクしたりするのもかんたんなので、ここまでやってみて興味でてきた人はCocosBuilderのUser Guideを参考にやってみると楽しいとおもいます！(・∀・)