とあるプログラマの備忘録

都内某所に住むプログラマが自分用に備忘録を残すという趣旨のブログです。はてなダイアリーから移動しました!

Cocostudio Cocos2d-x UIButtonの使い方

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

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

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

Cocostudio側のステータス

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

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状態にする事ができました