Audio Toggle - Pass variable between Scenes in Cocos2d-HTML5 (JavaScript)

cocos2d-x JavaScript
#1

Hi,

Does anyone have a recommendation on setting up an audio toggle and passing the variable for it between scenes in a game? In particular I have created an audio toggle, so the player can decide to have audio on or off. Currently, if a player sets a preference in one scene, then moves to the next scene, I have no way of seeing that variable preference. Please let me know what others have done for this type of situation. This question is specifically for Cocos2d-HTML5 JavaScript.

Thank you

#2

Use CCUserDefault to save and retrieve the setting.

#3

Create a singleton class where you can store your settings.

#4

This maybe a better thread for creating singletons. http://stackoverflow.com/questions/1008019/c-singleton-design-pattern

Basically, singletons can only have one instance of its class. Singletons are usually used as Managers like CCDirector, CCTouchDispatcher, etc. Store your settings in a singleton class and it will still persist even if you change scenes. Hope it helps.

#5

Hi, I was able to resolve my issue, and thought I would edit this post to help others. It wandered a bit from the original topic, so I will delete some answers and post my results so we can mark as resolved.

My original question was concerning the proper way to build an audio toggle for a game. I had been stuck due to a combination of mistakes in my JavaScript and limited knowledge of what this framework allows. That limitation is not helped by the occasional missing or incorrect documentation here. So anyone looking to do the same…

First I created a toggle button to switch audio on and off.

//Create each Audio button      
    btnAudioOff = cc.MenuItemImage.create(s_audio_off_btn);
    btnAudioOn = cc.MenuItemImage.create(s_audio_on_btn);
    btnAudioOn.setAnchorPoint(cc.p(0.5, 0.5));
    btnAudioOff.setAnchorPoint(cc.p(0.5, 0.5));
//Create Audio Toggle, add the buttons to it
    audioToggler = new cc.MenuItemToggle.create(btnAudioOn);
    audioToggler.addSubItem(btnAudioOff);
//this sets the target function of the toggle button
    audioToggler.setTarget(this.toggleAudioFunction, this); 
    audioToggler.setPosition(cc.p((size.width)-109,36));

There are some other ways to do this, but the documentation for cc.MenuItemToggle is limited and has some inaccuracies. This works.

The issue is that in each scene I had to display the toggle again, after removing it from the previous scene. So when I switched scenes, the current state was lost. For this I created a boolean myGameAudio. When the new scene loads, I check if this is true or false. I had set this value in the targeted function mentioned above.

So that is straightforward, but the final step took a little time. When the new scene loads, we have the value, but we need to address the toggle we created, as when it initializes it will go to its’ default state. I needed a way to match it to the value of myGameAudio at init. This is done by addressing the array of images in the toggle. Remember it starts at zero, so:

    if (myGameAudio===true) {
        console.log("start with Audio On");
        audioToggler.setSelectedIndex(0);   //set icon to on
    } 
    if (myGameAudio===false) {
        console.log("start with Audio Off");
        audioToggler.setSelectedIndex(1);  //set icon to off
    }

cc.MenuItemToggle is amazing, but it has complexities not documented, and I believe there is even an error in the 2.1.4 API documentation. I spent a bunch of hours on this, so hopefully it will help someone.

Thanks

#6

One list thing….

Here is a previous request to fix the documentation on the cc.MenuImageToggle. It had not been done yet. It is still incorrect in 2.1.4 and 2.1.6
http://www.cocos2d-x.org/reference/html5-js/V2.1.6/index.html

Use this for the correct information: