2013-12-09

Cocos2d-x3.0alpha0のCocosBuilder使用ソースを3.0alpha1に対応する

はじめに

前回（cocos2d-x3.0alpha0のprojectを3.0alpha1に移行してみる）でcocos2dxだけ使ってるプロジェクトの移行は説明しましたが、CocosBuilder使ってると結構作業増えたので、メモがてら残しておきます。

手間取った作業一覧

CocosBuilderがextensionsから脱退しました。
extensionsがcreate_project.pyでの自動生成のAndroid.mkからいなくなってました
Layer.cppのsetTouchEnabledが廃止メソッドになっていた

移行作業内容

以下は、抜粋した修正内容を載せてます。こちら（github）から全ソースの差分が見れます。

1. jni/Android.mkの修正

box2dは使ってなかったのでついでに削りました。混乱させたらすみませんm( )m

cocos2dx/project/Cocos2dxSRPGQuest/proj.android/jni/Android.mk

★Before

LOCAL_WHOLE_STATIC_LIBRARIES += cocos2dx_static
LOCAL_WHOLE_STATIC_LIBRARIES += cocosdenshion_static
LOCAL_WHOLE_STATIC_LIBRARIES += box2d_static
LOCAL_WHOLE_STATIC_LIBRARIES += cocos_extension_static
LOCAL_WHOLE_STATIC_LIBRARIES += cocos2dxandroid_static
  
$(call import-module,cocos2dx)
$(call import-module,cocos2dx/platform/third_party/android/prebuilt/libcurl)
$(call import-module,CocosDenshion/android)
$(call import-module,extensions)
$(call import-module,external/Box2D)
$(call import-module,cocos2dx/platform/android)

★After

LOCAL_WHOLE_STATIC_LIBRARIES := cocosbuilder_static
LOCAL_WHOLE_STATIC_LIBRARIES += cocos2dx_static
LOCAL_WHOLE_STATIC_LIBRARIES += cocosdenshion_static
LOCAL_WHOLE_STATIC_LIBRARIES += cocos_extension_static
  
$(call import-module,extensions)
$(call import-module,editor-support/cocosbuilder)
$(call import-module,2d)
$(call import-module,audio/android)

ソース差分はこちら（github）

2. cocosbuilderのクラスを使っているソースのincludeとnamespaseの修正

cocos2dx/project/Cocos2dxSRPGQuest/Classes/title/TitleScene.cpp

★Before

#include "cocos2d.h"
#include "cocos-ext.h"

USING_NS_CC;
USING_NS_CC_EXT;
  
class TitleScene : public Layer, public CCBSelectorResolver
{
    // 〜省略〜
}

★After

#include "cocos2d.h"
#include "extensions/cocos-ext.h"
#include "cocosbuilder/CocosBuilder.h"

USING_NS_CC;
USING_NS_CC_EXT;
  
class TitleScene : public Layer, public cocosbuilder::CCBSelectorResolver
{
    // 〜省略〜
}

ソース差分はこちら（github）

3. setTouchEnabledとsetTouchModeの廃止対応

cocos2dx/project/Cocos2dxSRPGQuest/Classes/quest/SRPGScene.cpp

★Before

bool SRPGScene::init()
{
    // 〜省略〜

    this->setTouchEnabled(true);
    this->setTouchMode(Touch::DispatchMode::ONE_BY_ONE);

    // 〜省略〜
}

★After

bool SRPGScene::init()
{
    // 〜省略〜

    auto listener = EventListenerTouchOneByOne::create();
    listener->onTouchBegan = CC_CALLBACK_2(SRPGScene::onTouchBegan, this);
    listener->onTouchMoved = CC_CALLBACK_2(SRPGScene::onTouchMoved, this);
    listener->onTouchEnded = CC_CALLBACK_2(SRPGScene::onTouchEnded, this);
    this->getEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, this);

    // 〜省略〜
}

ソース差分はこちら（github）

まあ、ぶっちゃけ廃止メソッドの対応は「cocos2dx/sample」下のソースを漁るのが一番早いですね！！！

2013-09-30

ControlButtonをCocosBuilderで設置してCocos2d-xで連携する

Cocos2d-x C++ CocosBuilder

CocosBuilderで、ControlButtonを設置

f:id:kyokomi:20130929175606p:plain

とりあえず真ん中下くらいに表示されるように設定は以下のようにします。あと、Cocos2d-x側で扱えるようにも設定しておきます。

Doc root varを選択し「mStartConrolButton」を入力
Positionをパーセントにし、x=50.0, y=20.0を設定

f:id:kyokomi:20130929175610p:plain

Selectorに「tappedStartButton」を入力
Targetを「Document root」に指定
Titleに「START」を入力
Font sizeを「24.00」に指定
Preferred sizeをパーセント指定にして、width=20.0, height=12.0
Sprite frameは、以下にあるサンプル画像を利用
cocos2d-x-3.0alpha0-pre/samples/Cpp/TestCpp/Resources/ccb

f:id:kyokomi:20130929175616p:plain

わかりやすいようにTimelineにも名前を設定

f:id:kyokomi:20130929175608p:plain

こんな感じです。

あとSceneのクラスで判別できるようにCCLayerにclass名を設定。

f:id:kyokomi:20130929175619p:plain

f:id:kyokomi:20130929175613p:plain

これを設定しないとMenuItemやControlButtonのSelectorをキャッチできませんのでご注意ください。

ここまでできたら「File > Publish」してXcodeにaddします。

Cocos2d-x側でControlButtonのSelectorをキャッチする

【TitleScene.h】

class TitleScene : public Layer
, public CCBSelectorResolver /** CocosBuilderからメニューとかコントロールボタンを取得するのに必要 */
{
    // CCBSelector
    virtual SEL_MenuHandler onResolveCCBCCMenuItemSelector(Object* pTarget, const char* pSelectorName);
    virtual Control::Handler onResolveCCBCCControlSelector(Object * pTarget, const char* pSelectorName);

    // ※add Startボタンのタップイベント用
    void tappedStartButton(Object * pTarget, Control::EventType pControlEventType);
public:
    // コンストラクタ、デストラクタ
    TitleScene();
    virtual ~TitleScene();

    // createメソッド
    CCB_STATIC_NEW_AUTORELEASE_OBJECT_WITH_INIT_METHOD(TitleScene, create);
};

【TitleScene.cppのonResolveCCBCCControlSelectorを修正】

Control::Handler TitleScene::onResolveCCBCCControlSelector(cocos2d::Object *pTarget, const char *pSelectorName)
{
    CCLOG("name = %s", pSelectorName);
    // ※add Startボタンのタップイベントを結びつける
    CCB_SELECTORRESOLVER_CCCONTROL_GLUE(this, "tappedStartButton", TitleScene::tappedStartButton);
    return NULL;
}

// ※add タップ時の処理
void TitleScene::tappedStartButton(Object * pTarget, Control::EventType pControlEventType)
{
    CCLOG("tappedStartButton eventType = %d", pControlEventType);
}

起動してSTARTボタンを押してみる。

f:id:kyokomi:20130929175626p:plain

ログがバッチリでてます。

f:id:kyokomi:20130929175633p:plain

これでControlButtonとの紐付けも完了です！

2013-09-30

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

Cocos2d-x C++ CocosBuilder

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

Cocos Builder v3.0 alpha 5（http://cocosbuilder.com/）

プロジェクトの作成と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.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;
}

/* 〜以下、省略〜 */

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

f:id:kyokomi:20130929175421p:plain

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

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

きょこみのーと

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

Cocos2d-x3.0alpha0のCocosBuilder使用ソースを3.0alpha1に対応する

はじめに

手間取った作業一覧

移行作業内容

1. jni/Android.mkの修正

★Before

★After

2. cocosbuilderのクラスを使っているソースのincludeとnamespaseの修正

★Before

★After

3. setTouchEnabledとsetTouchModeの廃止対応

★Before

★After

ControlButtonをCocosBuilderで設置してCocos2d-xで連携する

CocosBuilderで、ControlButtonを設置

Cocos2d-x側でControlButtonのSelectorをキャッチする

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

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

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

不要なファイルを削除

画面の作成

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