CocosBuilderでタイトル画面をつくる
ダウンロードはこちらから
- Cocos Builder v3.0 alpha 5(http://cocosbuilder.com/)
プロジェクトの作成とCocos2d-x用に初期設定
File > New > Project
Documnet > JavaScript Controlledのチェックを外す
File > Project Settings
JavaScript based project のチェックを外す
出力時の設定を変更する
File > Publish Settings...
素材の都合上マルチレゾリューションとかはやらないので、1倍での表示のみ対応とする。
ここまでやったら一旦保存。
不要なファイルを削除
Resourceフォルダ内を削除
画面の作成
背景画像をResourceフォルダ内に配置しますと、CocosBuilder上で認識されます。
Layerを作ります
画面のサイズはとりあえず画像の制限上、以下で。
Android Medium Landscape
背景サイズを基準にするためサイズ変更。
マルチレゾリューション対応とかしないので、Scaleを1倍にする。
左のメニューから画像をドラッグドロップで中央に配置。
位置を中心に設定。 Positionを%にしてx=50.0, y=50.0にする
一旦これでOKとしてpublishする。
File > Publish
ccbprojと同じ階層に出力される。これをプロジェクト側のResourceフォルダにコピーする。
Resouceフォルダに配置。
ここまで一旦準備は完了。
CocosBuilderで作成したccbiファイルをCocos2d-xで読み込む
まず、先ほど作成したccbiなどをaddする
次に、TitleScene.ccbiに対応する以下のクラスを作成する。
- TitleScene.cpp
- TitleScene.h
- TitleSceneLoader.h
【TitleScene.cpp】
// // TitleScene.cpp // #include "TitleScene.h" TitleScene::TitleScene() { } TitleScene::~TitleScene() { } SEL_MenuHandler TitleScene::onResolveCCBCCMenuItemSelector(cocos2d::Object *pTarget, const char *pSelectorName) { CCLOG("name = %s", pSelectorName); return NULL; } Control::Handler TitleScene::onResolveCCBCCControlSelector(cocos2d::Object *pTarget, const char *pSelectorName) { return NULL; }
【TitleScene.h】
// // TitleScene.h // #ifndef __Hoge__TitleScene__ #define __Hoge__TitleScene__ #include "cocos2d.h" #include "cocos-ext.h" USING_NS_CC; USING_NS_CC_EXT; class TitleScene : public Layer , public CCBSelectorResolver /** CocosBuilderからメニューを取得するのに必要 */ { virtual SEL_MenuHandler onResolveCCBCCMenuItemSelector(Object* pTarget, const char* pSelectorName); virtual Control::Handler onResolveCCBCCControlSelector(Object * pTarget, const char* pSelectorName); public: // コンストラクタ、デストラクタ TitleScene(); virtual ~TitleScene(); // createメソッド CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHOD(TitleScene, create); }; #endif /* defined(__Hoge__TitleScene__) */
【TitleSceneLoader.h】
// // TitleSceneLoader.h // #ifndef Hoge_TitleSceneLoader_h #define Hoge_TitleSceneLoader_h #include "TitleScene.h" class TitleSceneLoader : public cocos2d::extension::LayerLoader { public: CCB_STATIC_NEW_AUTORELEASE_OBJECT_METHOD(TitleSceneLoader, loader); protected: CCB_VIRTUAL_NEW_AUTORELEASE_CREATECCNODE_METHOD(TitleScene); }; #endif
次に、起動時に読み込むSceneをTitleSceneに変更する。
【AppDelegate.cpp】
#include "AppDelegate.h" #include "cocos-ext.h" #include "TitleScene.h" #include "TitleSceneLoader.h" USING_NS_CC; USING_NS_CC_EXT; AppDelegate::AppDelegate() { } AppDelegate::~AppDelegate() { } bool AppDelegate::applicationDidFinishLaunching() { // initialize director Director* director = Director::getInstance(); EGLView* eglView = EGLView::getInstance(); Director::getInstance()->setOpenGLView(eglView); // 800x480基準 eglView->setDesignResolutionSize(800.0, 480.0, ResolutionPolicy::FIXED_WIDTH); // turn on display FPS director->setDisplayStats(true); // set FPS. the default value is 1.0/60 if you don't call this director->setAnimationInterval(1.0 / 60); // CocosBuilderのファイルを読み込みゲーム画面を生成する NodeLoaderLibrary* nodeLoaderLibrary = NodeLoaderLibrary::newDefaultNodeLoaderLibrary(); nodeLoaderLibrary->registerNodeLoader("TitleScene", TitleSceneLoader::loader()); CCBReader* ccbReader = new CCBReader(nodeLoaderLibrary); Node* node = ccbReader->readNodeGraphFromFile("TitleScene.ccbi"); // シーンを用意し、ゲーム画面を設置する Scene* pScene = Scene::create(); if (node != NULL) { pScene->addChild(node); } ccbReader->release(); // run director->runWithScene(pScene); return true; } /* 〜以下、省略〜 */
これで完了。起動してみます。
とりあえず背景だけですがこれでCocosBuilderとの連携は完了です! あとはCocosBuilder上でMenuItemなどを設置してそれをコード上でアクションを紐付けたりしていけます。 レイアウト部分を別作業に切り出せるのはいいですねー。
画像提供元:臼井の会 素材支部(http://usui.moo.jp/rpg_tukuru.html )