Open Source Phaser 3 UI Controls Library – Code With My Son

By now, I’m sure you know that my son and I are working on developing the game he came up with a few years ago – Blob Attack and this game will also be the focus of our book. While we originally planned to complete the book this year, it turns out that making a game is a lot more fun than writing a book.

So, from a simple demonstration game for the book, we are now building a full fledged game that we have submitted to the Google Play Store. While building the game, we needed to build a lot of UI, some of which got quickly cumbersome as we needed to add more and more. Take, for example, buttons. We started out with creating images for each button in PowerPoint, exporting them as two images – one for when the button is up and one for when the button is clicked:

As we got to making a lot of buttons, this quickly became really cumbersome. We tried to find a Phaser UI library and found a couple. One required that we buy Adobe Animate and the other required us to send an image for the button, defeating the purpose because we don’t want to make tons of images. So we set out to build a button class where you can specify what color you want, and it will automatically draw a button just the PowerPoint button and automatically deal with the colors and shadows when up and when pressed. We also wanted to be able to specify the text and the font for the button.

And thus was born the idea that we should make our own UI Library. We started out with our button. Ahan initially wanted to charge for it but was easily convinced to make it open source. I explained the difference between GPL and MIT licences to him and he chose the MIT license!

Last week we pushed out our Button to GitHub –

Today we pushed up our Progress Bar:

Look out for significant improvements to the progress bar (gradients, animations), text positioning, progress bars with dividers etc. in the coming weeks and of course more UI Controls.

And naturally, don’t forget to pre-register for Blob Attack on Google Play:

Leave a Reply

Your email address will not be published. Required fields are marked *