【cococs2dx 3.x】Toggleを利用してMenuクラスで「ON」「OFF」のボタンを作成する

【cococs2dx 3.x】Toggleを利用してMenuクラスで「ON」「OFF」のボタンを作成する
   

以前にも同じ内容のブログの記事を書いたのですが、音量を「ON」「OFF」のように切り替えられるボタンの作成方法を案内します。
cocos2dxのバージョンが上がり、コードも変わっていましたので、もしお困りの方がいましたら参考にしていただけると嬉しいです。

【以前の記事】



「ON」「OFF」ボタンを実装する

今回もMenuItemToggleクラスを利用して作成します。

ボタンを用意

まずは、MenuItemToggleクラスで利用するMenuItemクラスを用意します。
今回は、MenuItemSpriteクラスを利用しますが、他のクラスでも同じようにできると思います。
//Spriteを用意
auto image1 = Sprite::create("info-on-button.png");
auto image2 = Sprite::create("info-on-button-hover.png");


//MenuItemSpriteクラスを作成
auto item1 = MenuItemSprite::create(image1, image1);
auto item2 = MenuItemSprite::create(image2, image2);


バージョン3.xでは、1つのToggleに2つのMenuItemクラスが必要でした。
同じSpriteを利用していますが、ボタンを押した際に画像を変える場合は、第二引数に別の画像を利用して下さい。

Toggleボタンの作成

先ほど用意したMenuItemクラスを利用してToggleボタンを作ります。
ここで、MenuItemToggleクラスが出てきます。

auto menuToggle1 = MenuItemToggle::createWithCallback(CC_CALLBACK_1(ToggleLayer::menuAction,this), item1,item2,NULL);

void InfoLayer::menuAction(Ref *sender){

        CCLOG("hogehoge");

}



//ラムダ式を利用する場合
auto menuToggle1 = MenuItemToggle::createWithCallback([](Ref *sender){
    
        CCLOG("hogehoge");
    
    }, item1,item2,NULL);


このような感じで作成をします。
後は通常のMenuクラス同様です。
//Menuクラスを作成
auto _menu = Menu::create(menuToggle1,NULL);
_menu->setPosition(Point::ZERO);
addChild(_menu);

その他

これで、Toggleボタンは作成できますが、実際に利用するにはもう少し工夫が必要です。

Toggleボタンを押された状態にする

すでに、ボタンが押されている状態にするいは以下のコードを利用します。
//item1,item2の順に追加する
auto menuToggle1 = MenuItemToggle::createWithCallback(CC_CALLBACK_1(ToggleLayer::menuAction,this), item1,item2,NULL);

//Toggleをitem2の画像にする場合
menuToggle1->setSelectedIndex(1);


MenuItemクラスを指定することで、事前にボタンの画像を変えることができます。
例えば、音量を以前に「OFF」にしている場合は、フラグを使って「OFF」から始めることができます。

「ON」「OFF」の判断

これは、先ほどのように何番目の画像が今、表示されているかを調べます。

if(menuToggle1->getSelectedIndex() != 0){

     menuToggle1->setSelectedIndex(1);

}

このようにif文を使えば判別ができます。

最後に

バージョンが変わったので、Toggleボタン、最初は全然上手くいきませんでしたが、色々と調べるうちに、何とかできようになりました。
使ってみると、Toggleボタンとしてではなく、その他の使い方もあるのではないかと思いました。

Related Posts Plugin for WordPress, Blogger...