Buttons in Phaser 3

Phaser 3
1

So there’s no built-in Button class in Phaser 3 and I know it’s not TOO hard to make your own sloppy, imperfect button, and there’s quite a few examples of it out there, my question is really one of the philosophical status of such a class.

  • First, has anyone made a Button class that is self-contained and easy to reuse yet? I see lots of code snippets here and there but none of them constitute a nice, tested, re-usable object that plays nice with others in my opinion. I have also run into Rex Rainbow’s plugins which have some great GUI things in them but they go way beyond buttons and require a lot of baggage to use.
  • Second, are there any plans to put Button back in the main Phaser library (or to provide an official plugins) down the road? I don’t remember seeing this in the roadmap but I could have missed it.

I’m sure providing even just a single button would lead to a million requests for all the other possible GUI widgets out there and that’s not what Phaser is supposed to be, but a button, the most fundamental among those GUI widgets, sure would solve a lot of people’s basic UI needs.

Sloppy buttons are easy (just take a look at the many examples of Phaser 3 buttons out there) but as soon as you try to deal with the user moving off the button without releasing their click it gets tricky. It’s a classic UI system design problem that I’ve had to solve myself a few times back when OpenGL programmers would always roll their own GUIs. The devil’s always in the details.

Seth B.

2 Likes
2

Are you searching for a button class where you can add your own images like this or a button class that draws the buttons with a Graphics and Text GameObject?

3

I have written several classes for buttons in phaser 3, here is the first one I wrote

2 Likes
4

Something like this?

5

I read your tutorial, however, there are complications for desktop when you click a button, and then release it outside the canvas. This could be bad aesthetically, but it’s very bad if the user doesn’t mean to confirm.

I’m sure there are better strategies, but I only have a couple buttons.

I did this:

var cursorInButton = false;

Button.on('pointerdown', () => {
    ButtonPressed.setAlpha(1);
    Button.setAlpha(0);
});

ButtonPressed.on('pointerout', () => {
     cursorInButton = false;
     Button.setAlpha(1);
     ButtonPressed.setAlpha(0);
});

 Button.on('pointerover', () => {
     cursorInButton = true;
 });

this.input.on('pointerup', () => {
    Button.setAlpha(1);
    ButtonPressed.setAlpha(0);

    if (cursorInButton === true) {
                      Do Things
            }
        });
    }
});

However, this solution doesn’t play nice with hovers. Phaser 3 has some weird jitter with them.

1 Like
6

This looks very handy! I will check it out. Thanks to @yannick also for sharing his! Nice to have these collected here. If anyone else has something similar feel free to comment with a link.

7

While all different GraphicsObject types of buttons would be useful, my experience leads me to think the spritesheet based one would fit the best in the game design pipeline where an artist can just make frames for the different states and then you can plug them in and indicate which frames are what (just like the old Phaser CE one worked).

2 Likes
8

True!
I will first finish the graphics based one and if I have time maybe (and if no one else did it) I will make another class based on frames.

9

Hi @wclarkson,

The button class of Phaser 2 is actually very simple. I have just rebuilt action-on-click and button-using-texture-atlas in Phaser 3.

3 Likes
10

I had not considered releasing outside the canvas, but you are right that could cause problems. My games are either full browser on mobile, or in pop-ups on desktop, so that one got by me.

11

Looks good!