Hello guys. I need your help. How to create animated button or add click or touch event to sprite object? Thanks
2 ways…
Use single touch event and put actions on that normal sprite(not menu item sprite) when touch began and when touch ends call a function…
Or else,
create a menu items with 2 images(of course), and then in the update function just do isSelected() which returns a bool or something like this, a function exists… and then in if statement do whatever action you want to run…
They both will work
Thats exactly what I need. Can you add code example or link to API.
haha, you could have said that you need direct code…
Lets do the first method… I would like that you implement it yourself…
header file
declare bool isMyTouchInside which will be required if the touch is touched first time on mySprite
Inside init function
- make a sprite with variable name suppose mySprite(it should be declared in the header file so that this variable can be accessed easily in touchBegan)
Set isMyTouchInside to false.
- Now, add event listeners for single touch and add this listener to te event dispatcher,
onTouchBegan function
3) If isMyTouchInside is false then make it true and detect whether the touch position is inside the boundingBox of mySprite. If the mySprite would not have been declared in header file then you would have to set the sprite’s name or tag and then access this sprite using this->getChildByTag/Name()
If the above condition is true, then declare and define actions inside this if block and then run your actions on your mySprite…
Also, for boundingBox, you mySprite->getBoundingBox().contains(touch->getLocation()
See, you can always use auto suggestion and go through the APIs(functions available)
onTouchEnded function
4) if isMyTouchInside is true then make it false and remove all the actions from the sprite.
and set the if isMyTouchInside to false and call some function whichever you want…
You may also add some action to revert the mySprite if you want.
You could also you callback inside Sequence action so that first the action on this mySprite is over and then only the other function is called.
1 Like
you can use this logic make button sprite
var TouchLayer = cc.Layer.extend({
ctor: function(){
this._super();
// this is left button
var left = this.left = cc.Sprite.create(res.arrow_png);
this.addChild(left, 100);
this.left.y = 50;
this.left.x = 65;
left.scale = .3;
// right button
var right = this.right = cc.Sprite.create(res.arrow_png);
this.addChild(right, 100);
this.right.rotation = 180
this.right.y = 50;
this.right.x = 175;
right.scale = .3;
// up button
var up = this.up = cc.Sprite.create(res.arrow_png);
this.addChild(up, 100);
this.up.rotation = 90
this.up.y = 100;
this.up.x = 120;
up.scale = .3;
// down button
var down = this.down = cc.Sprite.create(res.arrow_png);
this.addChild(down, 100);
this.down.rotation = 270
this.down.y = 10;
this.down.x = 120;
down.scale = .3;
//fire button
this.fire = cc.Sprite.create(res.fire_png);
this.addChild(this.fire, 100);
this.fire.x = winSize.width -150;
this.fire.y = 30;
this.fire.scale = .25;
this.addTouch();
},
addTouch: function(){
// creating an event listener to add on our button sprite
var listener1 = cc.EventListener.create({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches: true,
onTouchBegan: function (touch, event) {
var target = event.getCurrentTarget();
// gets your touch location from world space to node space
var locationInNode = target.convertToNodeSpace(touch.getLocation());
// get Size of target on which event are set i.e is our button sprite
var s = target.getContentSize();
// getting the rectangle in which our sprite lies
var rect = cc.rect(0, 0, s.width, s.height);
// checking touchlocation inside the the bounding box of button sprite
if (cc.rectContainsPoint(rect, locationInNode)) {
// checking which button has pressed
target.parent.checkButton(target);
// decreasing opacity of button to change little view of button sprite
target.opacity = 180;
return true;
}
return false;
},
onTouchEnded: function (touch, event) {
MOVE_PLAYER = false;
gamePlayer.getAnimation().play(‘stop’);
}
});
// adding the above listener to each button sprite
cc.eventManager.addListener(listener1, this.left);
cc.eventManager.addListener(listener1.clone(), this.right);
cc.eventManager.addListener(listener1.clone(), this.up);
cc.eventManager.addListener(listener1.clone(), this.down);
cc.eventManager.addListener(listener1.clone(), this.fire);
},
// it is checking which button has pressed and performing some logic on pressing the button
checkButton: function(target){
if(target === this.left){
MOVE_PLAYER = true;
KEY = cc.KEY.left;
}
if(target === this.right){
// cc.log(“right”);
MOVE_PLAYER = true;
KEY = cc.KEY.right;
}
if(target === this.up){
// cc.log(“up”);
MOVE_PLAYER = true;
KEY = cc.KEY.up;
}
if(target === this.down){
// cc.log(“down”);
MOVE_PLAYER = true;
KEY = cc.KEY.down;
}
if(target === this.fire){
// cc.log(“down”);
MOVE_PLAYER = true;
KEY = cc.KEY.space;
}
}
})
2 Likes
Thank You all
Great answers guys ! Thank you for helping new Cocos2d-JS developers
Thanks and welcome… anytime 