Lab

Cocos2d-x:トグルボタンの作成

 Tag :  Published : 2014-4-1

Pocket

CCMenuItemToggleを使用します。
トグルボタンを作成します。

1.トグルボタンを作成する

OnとOffが切り替わるようなボタンを作成します。

1.Onの時。

cocos2d-x Onの時

2.Offの時。

cocos2d-x Onの時

2.画像の準備

画像を4種類準備します。

1.Onの画像(通常時)

cocos2d-x Onの時(通常時)

2.Onの画像(タップ時)

cocos2d-x Onの時(タップ時)

3.Offの画像(通常時)

cocos2d-x Offの時(通常時)

4.Offの画像(タップ時)

cocos2d-x Offの時(タップ時)

3.トグルボタンをCCMenuに実装

CCMenuItemImage->CCMenuItemToggle->CCMenuという長〜い道のりです。

    //Onの状態
    CCMenuItemImage* itemOn = CCMenuItemImage::create("on_1.png", "on_2.png");
    
    //Offの状態
    CCMenuItemImage* itemOff = CCMenuItemImage::create("off_1.png", "off_2.png");
    
    //OnとOffでトグルを作成
    CCMenuItemToggle* toggle = CCMenuItemToggle::createWithTarget(
        this,
        menu_selector(HelloWorld::message),
        itemOn,itemOff,NULL);

    //それをメニューに登録して
    CCMenu* menu = CCMenu::create(toggle, NULL);

    //メニューを表示させる
    addChild(menu);
    

4.インデックスの取得

タップした結果が、OnなのかOffなのか、コールバック関数(今回はmessage)で受け取れます。

void HelloWorld::message(CCObject* sender){
    int index = dynamic_cast<CCMenuItemToggle*>(sender)->getSelectedIndex();
    
    if(index == 1){
        CCLog("OnからOffになりました");
    }else{
        CCLog("OffからOnになりました");
    }
}
    

5.Offから始める

基本は最初に登録したアイテム(今回はOnの状態)がデフォルトになりますが、setSelectedIndexを使ってOffからスタートするようにしてみます。

    //0->Onの状態 1->Offの状態
    //登録した順番を数値で入れてあげればOK
    toggle->setSelectedIndex(1);
    

6.バリエーション

今回は画像を使ったので、CCMenuItemImageを使いましたが、CCMenuItemSpriteなどでも作成可能です。

また、アイテムの数を増やして、3つ以上で一巡するトグルなども作れます。(青->黄->赤の信号みたいに)

pageTop