Navigation

The September Backers Pack is here!

Published on 25th September 2019

Greetings everyone!

Sorry about the delay in getting this pack released. Technically, it's still September, but I rarely leave it this late in the month to publish. The reason is that I originally started the pack with a nice little demo but it required a Button and a Slider as part of the UI. While I could have used DOM objects for this, I wanted it to be part of Phaser and not in the html. The Button Game Object in Phaser 2 was always really popular, so I figured I could spend a couple of days doing a new Phaser 3 version and then I'd have both a demo and a funky new UI Game Object for everyone as the end result.

Suffice to say, once I got into it, things took a bit longer :) I started by re-creating the original Phaser 2 Button, but it just didn't have enough flexibility. So I added in a lot more options, but then the configuration object was getting massive! So, I refactored that into more distinct button state sections and I was finally pleased with how it all worked and what you could do with it. I then expanded the Button UI component and created a Horizontal Slider component and a Toggle Switch component too!

So this pack is all about the UI. There are 3 brand new Phaser 3 native UI Game Objects for you to use. I'm really pleased with all of them and the power they afford you in your games. For example, Buttons can now have icons and labels, allowing you to use the same background button images but drop a different icon on each one. Or you can use text or bitmap text labels on them. The Slider component is nice and sexy, with track-clicking, easing, notch and snap options. Even the Toggles can have a variety of different effects on them, along with text-based labels that align next to the toggle and can also be clicked.

There's a nice little 'Game Settings Screen' demo, which shows how you can combine lots of the components together on a single screen. And of course, I can use these components in future packs, too :)

The components are fully documented and there are lots of examples - and lots of those have comments in the code as well, so you should get a nice and clear idea of how to use them all. It's not all about UI, though. There are also two examples showing how you can prompt the user to select a local image file and then upload it and use it directly in your game. And finally, talking of games, there's another complete game this month too: Emoji Match. I was genuinely shocked at how a simple 'find the matching pair' game could be made so frustratingly difficult just by using some emoji faces! Have a play and see what you think. Personally, I can rarely make more than 5 matches in total :)

I hope you enjoy this months pack, and again I'm sorry that it's a little late. If you find any issues with the components or have suggestions for future ones, please leave a comment!

phaser-backer-examples-sep2019.zip