きょこみのーと

技術に関係ないほうのブログ

CocosBuilderでタイトル画面をつくる

ダウンロードはこちらから

プロジェクトの作成とCocos2d-x用に初期設定

File > New > Project

f:id:kyokomi:20130929175311p:plain

Documnet > JavaScript Controlledのチェックを外す

f:id:kyokomi:20130929175317p:plain

File > Project Settings

f:id:kyokomi:20130929175320p:plain

JavaScript based project のチェックを外す

f:id:kyokomi:20130929175314p:plain

出力時の設定を変更する

File > Publish Settings...

f:id:kyokomi:20130929175333p:plain

素材の都合上マルチレゾリューションとかはやらないので、1倍での表示のみ対応とする。

  • iOSのチェックを外す
  • Android のチェックを入れて全部チェックを外す
  • HTML5のチェックを外す

f:id:kyokomi:20130929175337p:plain

ここまでやったら一旦保存。

不要なファイルを削除

Resourceフォルダ内を削除

f:id:kyokomi:20130929175328p:plain

画面の作成

背景画像をResourceフォルダ内に配置しますと、CocosBuilder上で認識されます。

f:id:kyokomi:20130929175323p:plain

Layerを作ります

f:id:kyokomi:20130929175341p:plain

画面のサイズはとりあえず画像の制限上、以下で。

Android Medium Landscape   f:id:kyokomi:20130929175427p:plain

背景サイズを基準にするためサイズ変更。

f:id:kyokomi:20130929175344p:plain

マルチレゾリューション対応とかしないので、Scaleを1倍にする。

左のメニューから画像をドラッグドロップで中央に配置。

f:id:kyokomi:20130929175353p:plain

位置を中心に設定。 Positionを%にしてx=50.0, y=50.0にする

f:id:kyokomi:20130929175417p:plain

一旦これでOKとしてpublishする。

File > Publish

f:id:kyokomi:20130929175414p:plain

ccbprojと同じ階層に出力される。これをプロジェクト側のResourceフォルダにコピーする。

f:id:kyokomi:20130929175410p:plain

Resouceフォルダに配置。

f:id:kyokomi:20130929175405p:plain

ここまで一旦準備は完了。

CocosBuilderで作成したccbiファイルをCocos2d-xで読み込む

まず、先ほど作成したccbiなどをaddする

f:id:kyokomi:20130929175401p:plain

f:id:kyokomi:20130929175348p:plain

次に、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.0480.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;
}

/* 〜以下、省略〜 */

これで完了。起動してみます。

f:id:kyokomi:20130929175421p:plain

とりあえず背景だけですがこれでCocosBuilderとの連携は完了です! あとはCocosBuilder上でMenuItemなどを設置してそれをコード上でアクションを紐付けたりしていけます。 レイアウト部分を別作業に切り出せるのはいいですねー。

画像提供元:臼井の会 素材支部(http://usui.moo.jp/rpg_tukuru.html )