kevrat Posted February 16, 2017 Share Posted February 16, 2017 Lets say that i want to scale button if i over and scale back if out. And i want to set callback when click. It is my realisation, but she is ugly. Any idea to make it pretty? (put it into phaser sandbox https://phaser.io/sandbox/edit/2) function create() { var button1 = game.add.button(0, 0, 'phaser', function(){console.log(1)}, this); var button2 = game.add.button(0, 50, 'phaser',function(){console.log(2)}, this); var button3 = game.add.button(0, 100, 'phaser',function(){console.log(3)}, this); var menu = game.add.group(); menu.addMultiple([button1, button2, button3]) menu.callAll('events.onInputOver.add', 'events.onInputOver', function(btn){ if (btn.isTweening !== true) { btn.isTweening = true; let coord = { x: btn.scale.x * 1.1, y: btn.scale.y * 1.1 } let tween = game.add.tween(btn.scale).to(coord, 100, Phaser.Easing.Linear.In, true).onComplete.add(function(){btn.isTweening = false}); coord = { x: btn.scale.x * 1, y: btn.scale.y * 1 } btn.events.onInputOut.addOnce(function(){ game.add.tween(btn.scale).to(coord, 100, Phaser.Easing.Linear.In, true) }) } else{ console.log(4) } }); } Link to comment Share on other sites More sharing options...
ldd Posted February 17, 2017 Share Posted February 17, 2017 I tried your code, and it works. I cleaned it up, so tell me what you think function create() { var button1 = game.add.button(0, 0, 'phaser', function(){console.log(1)}, this); var button2 = game.add.button(0, 50, 'phaser',function(){console.log(2)}, this); var button3 = game.add.button(0, 100, 'phaser',function(){console.log(3)}, this); var menu = game.add.group(); menu.addMultiple([button1, button2, button3]); const scaleUp = ({x,y}) => ({x: x * 1.1, y: y * 1.1}); const scaleDown = ({x,y}) => ({x: x / 1.1, y: y / 1.1}); menu.forEach(btn => { btn.events.onInputOver.add( _ => { game.add.tween(btn.scale) .to(scaleUp(btn.scale), 100, Phaser.Easing.Linear.In, true); }); btn.events.onInputOut.add( _ => { game.add.tween(btn.scale) .to(scaleDown(btn.scale), 100, Phaser.Easing.Linear.In, true); }); btn.events.onInputDown.add( _ => { console.log(4); }); }); } and just because ES6 is cool, you could always do const otherArgs = [100, Phaser.Easing.Linear.In, true]; // some code goes here .to(scaleDown(btn.scale), ...otherArgs); // some other code goes here .to(scaleUp(btn.scale), ...otherArgs); Link to comment Share on other sites More sharing options...
kevrat Posted February 17, 2017 Author Share Posted February 17, 2017 Looks nice:), but main issue of old code is - after moving pointer on buttons they have a wrong scale (try it on your code, but moving quickly to get quick result). I fight with this by isTweening var. So is main question - it can be done without isTweening var? Link to comment Share on other sites More sharing options...
Recommended Posts