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

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

【以前の記事】

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

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

ボタンを用意

まずは、MenuItemToggleクラスで利用するMenuItemクラスを用意します。 今回は、MenuItemSpriteクラスを利用しますが、他のクラスでも同じようにできると思います。 [c] //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);

[/c]

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

Toggleボタンの作成

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

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

void InfoLayer::menuAction(Ref *sender){

    CCLOG("hogehoge");

}

//ラムダ式を利用する場合 auto menuToggle1 = MenuItemToggle::createWithCallback({

    CCLOG("hogehoge");

}, item1,item2,NULL);

[/c]

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

その他

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

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

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

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

[/c]

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

「ON」「OFF」の判断

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

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

 menuToggle1->setSelectedIndex(1);

} [/c]

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

最後に

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