button Button things

[kevrat]

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)
                }
            });

        }

 

[ldd]

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);

 

[kevrat]

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?