Cocos2dx Cocostudio UIButtonの使い方 - 株式会社BEFOOL ブログ

CocostudioForMacがついに公開されましたね！
UIのレイアウト作成が簡単になり本当に嬉しい限りです！！

しかーし！圧倒的に資料が少ない+あっても中文やEnglishです。
なので自分で調べたところは共有がてら備忘録に残しておきたいと思います。

※指摘、マサカリ等歓迎しています。手探りでやっていますので共有してもらえると非常に助かります。

Cocostudio側のステータス

Cocostudioでボタンを生成して３つの画像を用意します。
ステータスもセットしておきます。

f:id:raharu0425:20140620153002p:plain

f:id:raharu0425:20140620153047p:plain

※画像はノーマル状態の時

Cocos2d-xで連携する

BattleSceneとなっていますが適宜変更してください

bool BattleScene::init()
~~~skip
    //Cocostudio
    auto widget = GUIReader::getInstance()->widgetFromJsonFile("BattleSceneLayout/BattleSceneLayout.json");
    this->addChild(widget);
 
    //攻撃ボタンイベントの登録
    auto button = (Button*)widget->getChildByName("AttackButton");
    button->addTouchEventListener(this, toucheventselector(BattleScene::onTouchAttackButton));
 
~~~skip
 
bool BattleScene::onTouchAttackButton(cocos2d::Ref* sender, cocos2d::ui::TouchEventType type)
{
    if(type == TOUCH_EVENT_BEGAN){
        CCLOG("%s : %s(%d)", "button", "BattleScene:Began", __LINE__);
    }else if(type == TOUCH_EVENT_ENDED){
        CCLOG("%s : %s(%d)", "button", "BattleScene::Ended", __LINE__);
    }
    return true;
}

※ログ

f:id:raharu0425:20140620154106p:plain

タッチイベントが取れるようになりました。

Disable状態の画像の表示

画像は3つ用意していたはずですDisable状態の画像を表示させるには
setBrightをfalseにします。またタッチ無効にする為にsetTouchEnabledもfalseにしましょう

bool BattleScene::init()
~~~skip
    //Cocostudio
    auto widget = GUIReader::getInstance()->widgetFromJsonFile("BattleSceneLayout/BattleSceneLayout.json");
    this->addChild(widget);
 
    //攻撃ボタンイベントの登録
    auto button = (Button*)widget->getChildByName("AttackButton");
    button->addTouchEventListener(this, toucheventselector(BattleScene::onTouchAttackButton));
 
    //追加
    button->setTouchEnabled(false);
    button->setBright(false);

f:id:raharu0425:20140620154448p:plain

これでDisable状態にする事ができました