Toggle button in cocos2d-x 3

cocos2d-x
#1

Is there a toggle button in cocos2d-x 3 UI? CheckBox is not what I want, as it does not change the background, it just adds a cross on the background image. But I want something like on/off button with 2 states interchanging.

#2

I set the callback when creating MenuItemSprite

void menuCallback(Ref* pSender) {
        MenuItemSprite \*pauseItem = (MenuItemSprite\*)(pSender);
        pauseItem->setSelectedImage(Sprite::createWithSpriteFrameName((!isPaused) ? "pause" : "paused"));
        pauseItem->setNormalImage(Sprite::createWithSpriteFrameName((!isPaused) ? "paused" : "pause"));

I’m sure you get the idea. I read here it was the only way, with MenuItemSprite which I only like for it’s convenience, I doubt it would be any easier using Sprites.

#3

@JonB thank you for your response. MenuItemSprite is not a part of the cocos2d::ui. I have subclassed ui::Button to make ToggleButton.

#4

Hello, I realize that this question is old but thought I would respond. Their is MenuItemToggle class that will exercise the toggle button functionality. The toggle can toggle any number items, for example difficulty easy, medium, and hard. The code below creates a toggle menu that may satisfy your need. This is an example for toggle background music. It can be adapted of course. I hope this may help some one.

auto pSoundText = MenuItemFont::create(“Music”);

auto itemOn = MenuItemImage::create("sound.png", "sound.png", [&](Ref* sender){
    SimpleAudioEngine::getInstance()->playBackgroundMusic(GameAssets::Sound::GAME_BACKGROUND_SOUND, true);
    PersistenceManager::getInstance()->setProperty(UserData::KEY_ISPLAYBGMUSIC,true );
    
});

auto itemOff = MenuItemImage::create("mute.png", "mute.png",  [&](Ref* sender){
    SimpleAudioEngine::getInstance()->stopBackgroundMusic();
    PersistenceManager::getInstance()->setProperty(UserData::KEY_ISPLAYBGMUSIC,false );
});

itemToggleMusic = MenuItemToggle::createWithCallback([&](Ref* pSender){
    MenuItemToggle *toggleItem = (MenuItemToggle *)pSender;
    if (toggleItem->getSelectedItem() == itemOn) {
        SimpleAudioEngine::getInstance()->playBackgroundMusic(GameAssets::Sound::GAME_BACKGROUND_SOUND, true);
        PersistenceManager::getInstance()->setProperty(UserData::KEY_ISPLAYBGMUSIC,true );
    } else if (toggleItem->getSelectedItem() == itemOff) {
        SimpleAudioEngine::getInstance()->stopBackgroundMusic();
        PersistenceManager::getInstance()->setProperty(UserData::KEY_ISPLAYBGMUSIC,false );
    }
}, itemOn,itemOff, NULL);


Menu* pMenu= Menu::create(pSoundText,itemToggleMusic, NULL);
pMenu->alignItemsVerticallyWithPadding(32);
pMenu->setPosition( Vec2(Utils::getMidPoint().x, Utils::getWindowSize().height - 400) );
pMenu->setAnchorPoint( Vec2 (0 , 0.5));
addChild(pMenu, 1);
About mute and unmute button
#5
  1. Under extensions, you can find a class ControlSwitch. From my point of view this class has many disadvantages:
    (a) has bug if you use empty strings (easy to fix)
    (b) does not support a sprite sheet, just single images (not so easy to fix)
    © If you get a GUI design and would like to create images compatible with ControlSwitch Logic, you spend some time to understand, how to cut them
  2. You can make an subclass of cocos2d::ui::Button as proposed by @naghekyan. To save time for others, you cen get my implementation in PS.

siarsky

PS:
ToggleButton.h (1.6 KB)
ToggleButton.cpp (4.3 KB)

ToggleButton.h seems to be not downloadable, so the file in ASCII format:

//
//  ToggleButton.h
//
//  Created by Branislav Siarsky on 28/03/2016.
//  Copyright © 2016 Smartdone GmbH. All rights reserved.
//

#ifndef ToggleButton_h
#define ToggleButton_h

#include "ui/UIButton.h"
#include "CCTouch.h"
#include "CCEvent.h"

USING_NS_CC;

class ToggleButton : public cocos2d::ui::Button{
    bool _toggle;
    std::string _normalImageDisabled;
    std::string _selectedImageDisabled;
    TextureResType _texType;

    bool revertToggle();
    virtual bool onTouchBegan(Touch *touch, Event *unusedEvent);
    virtual void onTouchMoved(Touch *touch, Event *unusedEvent);
    virtual void onTouchEnded(Touch *touch, Event *unusedEvent);
    virtual void onTouchCancelled(Touch *touch, Event *unusedEvent);

    void setNormalImageDisabled(std::string normalImageDisabled);
    void setSelectedImageDisabled(std::string selectedImageDisabled);

public:
    ToggleButton();
    virtual ~ToggleButton();
    bool isToggle();
    void setToggle(bool toggle);
    virtual void setEnabled(bool enabled);
    void setHighlighted(bool highlight);
    static ToggleButton* create(const std::string& normalImage,
                                const std::string& selectedImage,
                                const std::string& normalImageDisabled,
                                const std::string& selectedImageDisabled);
    virtual bool init(const std::string& normalImage,
                      const std::string& selectedImage,
                      const std::string& normalImageDisabled,
                      const std::string& selectedImageDisabled);
};

#endif /* ToggleButton_h */