Button Music On / Off Change SpriteFrame, when Pressed

Cocos Creator
1

Hi,

Have a button, and trying to change image of Music ON -> Music OFF, however, sprite is not changing…

cc.Class({
extends: cc.Component,

properties: {
//    musicoffsprite:cc.SpriteFrame
},
 
// use this for initialization
onLoad: function () {

this.count = 0;
this.MusicOnOffPress();
},
MusicOnOffPress:function(){
this.node.on(cc.Node.EventType.TOUCH_START, function (event) {
var music = this.getComponent(cc.AudioSource);
music.pause();
this.count++;
var sprite = this.getComponent(cc.Sprite);
sprite.spriteFrame = new cc.SpriteFrame(“assets/Hud Texture/musicoffbuttongraphic.png”);
if(this.count>=2){
music.resume();
this.count = 0;
}},this);},

Any help will be appreciated it…God Bless…

Sincerely,

Sunday

2

Hi, @luke2125

Why not use the Button’s Transition property to set the SpriteFrame and you don’t need to care about the TOUCH_START event. And Button also has a event handler property for you to register a callback to do the heavy lifting.

3

Hi @owen,

Yes, thanks, I’m using it, but I have a quick question, I understand that I can use the AudioSource Component attached to the Button Component, so I managed to changed the Pressed State to pause music, as well as Pressed State - Music Off Sprite, however, how can I add another Target, to resume music? If I add 2 click events, and add pause and resume, the music will just keep on playing…when I pressed the button? Any thoughts? God Bless…

Sincerely,

Sunday

4

I dunno if this is a good practice but you can add the button sprite as a property to your main game component, then write the function to turn off the music in the game components script and within it set the spriteframe for your button using the property. of course that function then has to be called upon button action.

i’m using a similar method to load itemsprites onto a cursor conditionally and it’s really quite simple

hope this helps

cheers