MenuItemImage: more animations when Image button clicked

We define our MenuItemImage Button as follows:
cocos2d::MenuItemImage::create( “CloseNormal.png”,“CloseSelected.png”,this, menu_selector(HelloWorld::menuCloseCallback));

Can I put the 2nd parameter as a sprite variable, instead of image “CloseSelected.png” .
I want to do this because when the button created with that is clicked it gives very basic animation. But I want to put some different animations when CloseNormal.png is clicked…
For eg: thinki of a button which gives jelly effect when clicked or think of a button whose size increases with a nice effect when the button is clicked
Or if there is another way, then please tell.

THANKS :smile:

@catch_up

You can create as many animations.

  1. Take before click button image(first parameter of MenuItemImage::create) of large dimension and after click small dimension image(second parameter of MenuItemImage::create)) with same canvas. This will make you see the button shrinks when you click on it .
  2. You can put various effects like wave effect, scale in and out effect on MenuItemImage by usingbutton->runAction(yourAction)code.
  3. You can detect the selection of the button whether it is selected or not in update function
void update(float dt)
{
   if( button->isSelected())
  {
         //make your jelly action effect run here
  }
  else
  {
    //stop the effect when button is not selected
  }
}
```
You can't put any variable as the parameter is const char*, it requires you to put a constant string :)
3 Likes

@rajan

Hey… Thanks for that…

FIRST OF ALL SORRY THAT I WRONGLY PUT IT IN C++ CATEGORY…
If possible can you please tell me for cocos2DJS?
or otherwise, if you don’t know cocos2DJS then please try seeing my code or otherwise just go to last of my this post, and tell me the last 2 para Doubts.

Also, if you could explain in C++, the fine.,… I can understand that as well

USING YOUR 2ND METHOD:

I’ve implemented it 2 ways:
Before that please see me Code snippet:
I’ve some doubt in between!

My code snippet is as follows:

Consider doing this for play Button


	//For PlayButton	
	var playButton = new cc.Sprite(resG.PlayBtn_png);
	var playButtonClicked = new cc.Sprite(res.PlayBtnPressed_png);
	
	var playGame = new cc.MenuItemSprite(
		playButton, playButtonClicked, 
						function(){if(!this.pauseBool) this.onPlayGame();},this
		);
			
	var playBtnMenu = new cc.Menu(playGame);
	playBtnMenu.alignItemsInColumns(1);
	playBtnMenu.scale=0.35;

	playBtnMenu.setPosition(cc.p(-centerPos.x/2,-0.44*centerPos.y));
	this.addChild(playBtnMenu, 1);

Now suppose I’ve to run this sequenceActions when the button is clicked…

var easeMoveUp = cc.moveBy(0.7,cc.p(0,winsize.height/18)).easing(cc.easeIn(0.4));
var sequenceActions= cc.sequence(easeMoveUp,cc.delayTime(0.1),easeMoveUp.reverse()).repeatForever();

  1. First, I’ve made my playButtonClicked as variable defined out the ctor() and init() function as playButtonClicked :null
    and then I’ve used this.playButtonClicked everywhere instead of playButtonClicked .
    And then when the function onPlayGame() is called, I am doing

this.playButtonClicked.runAction(sequenceActions)

it is doing animation on my second sprite…
And when I stop pressed the button the effect goes off because instead playButton sprite is active and not playButtonClicked sprite.

NICE AND IMPLEMENTED

2)Secondly, I’ve done as instead of putting animation on the second sprite, I’ve tried to use playGame as the variable outside ctor() and init() as playGame:null, and then used this.playGame instead of playGame wherever in the above code. Now when the button is pressed it it calling onPlayGame() and then I am doing
this.playGame.runAction(sequenceActions);

and when the button is pressed it starts animation on it and when the button is not clicked then also it does the animation, because I’ve not written that do animation when button isSelected…
NICE AND IMPLEMENTED

BUT…

For this 2nd implementation, I wanted to do your way, so
I put
if(this.playGame.isSelected())
{
this.playGame.runAction(sequenceActions);
}
So, ideally, it should do this animation when I playGame is selected. Instead it is doing animation when I am putting
the code as
if( ! this.playGame.isSelected())
{
this.playGame.runAction(sequenceActions);
}
And animation is done when the button is pressed.

AND INTERESTINGLY, IT CONTINUES DOING ANIMATION even I stop pressing it… Well it should not happen like that.
For avoiding this I put else statement following this if with cc.log(“Stop Animation”);
then also it is showing anything on console when the button is stopped getting pressed.

USING YOUR 3RD METHOD

Why to put scheduler updated method?
I mean even the callback event is attached and infact this is efficient way then using scheduler method.

Also, anyways if I were to do this using scheduler method, how to do this can you please do it for me, as I don’t know how to do it without writing global variables. I mean one parameter psender is there inside update:function(psender), how to pass my playGame or playButtonClicked.

Also, the way I implemented your 2nd method is by making them global variables, as I don’t know how to pass the 2nd parameter. Can you also tell me how to pass second parameter inside onPlayGame()

Thanks a lot :smile:

Can anyone tell me the difference/benefits of using MenuItemsSprite vs MenuItemImage?