Phaser Animated Buttons

This post is in response to a Phaser Game Makers Group member’s question. The question arose from trying to convert a flash slot game into Phaser. Now most of us coming from flash remember that it is quite easy to make a button in flash with the IDE tool. By dragging images we were able to quickly define up, down and over states. Phaser also includes a way to define a button in this way.

game.add.button(x,y,imageKey,clickFunction,this,over_frame,normal_frame,down_frame)

In this case, what the programmer is trying to copy is a button that looks as if it is being pressed on its own, to try to draw the attention of the player into pressing it. So for this example, I will not be using a Phaser button, but instead a sprite. Now I want to stress at the start, that there are so many different ways to do this. This is simply the first one that came to mind.

I was sent two different images, but I have replaced them with my own, just for demonstration purposes, and combined them into 1 sprite sheet.

I will be using a function to make a copy of the buttons, so I can have 1 normal, and 1 animated button. You can see more about this technique in my Complex Objects Tutorial. I will also funnel all button events through 2 central functions. If this were a full game or app, I would simply make a switch statement inside the buttonPressed function.

var StateMain = {
    preload: function() {
        //load the sprite sheet
        game.load.spritesheet("buttons", "images/buttons.png", 144, 68, 2);
    },
    create: function() {
        //just some debug text
        this.text1 = game.add.text(game.width / 2, 0, "0");
        this.text1.anchor.set(0.5, 0);
        this.text1.fill = "#ffffff";
        //create 2 buttons
        this.button1 = this.makeButton(game.width / 2, game.height * .25, 1);
        this.button2 = this.makeButton(game.width / 2, this.button1.y + this.button1.height * 1.1, 2);
        //add animation to the 2nd button
        //add more zeros to slow down the animation
        //use less zeros to speed up the animation
        this.button2.animations.add("auto", [0, 0, 0, 0, 0, 0, 1], 3, true);
        this.button2.animations.play("auto");
    },
    /**
     * Function to make a copy of the button template
     */
    makeButton(xx, yy, index) {
        var button = game.add.sprite(xx, yy, "buttons");
        button.index = index;
        button.anchor.set(0.5, 0.5);
        button.inputEnabled = true;
        button.events.onInputDown.add(this.buttonPressed, this);
        button.events.onInputUp.add(this.buttonReleased, this);
        return button;
    },
    buttonPressed(target) {
        //show the down frame
        target.frame = 1;
        this.text1.text = target.index;
    },
    buttonReleased(target) {
        //show the up frame
        target.frame = 0;
        this.text1.text = 0;
    },
    update: function() {}
}

And Here is the result