Small UI library for Phaser 4

[remote cliff]

Hi there,

I’m a software engineer, who has a hobby of occasionally building pet projects. From one of those private projects I recently extracted a tiny UI library built specifically for Phaser 4 (RC6), optimised for ease of use, especially with pixel art games.

Today I’ve published the first version to npm, and opened both the source code on GitHub (https://github.com/skhoroshavin/phaser-pixui) and a demo page on Itch (https://skhoroshavin.itch.io/phaser-pixui). Since every time I build projects based on Phaser Vite template I see message "Tell us about your game! - [email protected]”, I tried to write to that e-mail - but looks like it doesn't exist, so I came here instead 🙂

I understand, that current state is still quite rudimentary - just a simple layout and styling system, some core components as building blocks, plus a small number of styled components like button, progress bar and scrollable text area - but I would be very happy if you could provide at least a brief code review. This is my first front-end project (I’m normally a backend engineer), and it is my first experience with Phaser, so any feedback would be hugely appreciated.

P.S. I'm of course aware of rexui by now, but when I started experimenting with my own UI I wasn't, and after learning about it I still couldn't stop myself - maybe I'm fell victim to NIH syndrome 😂

[cunning rose]

Congrats on making a public package. I haven't digged deep in the repository, and I'm sure I can find what I'm looking for in the example folder, but I'd want to see in the documentation how to use the library. Just one example can go a long way. For example, how would I make a new button with the library?

optimised for ease of use, especially with pixel art games.

If the README.md contained an example of this, I think it would be easier for Phaser devs to more easily pick up the library.

[remote cliff]

Thank you for a feedback! I‘ll add documentation

[remote cliff]

@bleak aspen was it you whom I should thank for post in phaser news, featuring this library? 🙃

[bleak aspen]

Guilty! 😂 But I have to admit, @urban sky was actually the first one to check out your amazing library. 🙂

[remote cliff]

Thank you, that was quite a nice surprise for me 😂 looks like I need to double down a bit on example documentation side and roadmap, and probably creating some „safety net“ with tests 😅 hopefully this weekend I‘ll have enough time for that

[restive dew]

Concept of your ui lib and my rexUI lib are different.
Basic elements of rexUI are 4 kinds of sizer, for placing and resizing. Therefore, the inheritance chain will be relatively long.
Yours will be more simpler.

[remote cliff]

So far no documentation updates unfortunately, as I'm more focusing on core logic and experimenting with functionality. But there is one significant update though - this morning I've released v0.2.0, which includes pretty significant cleanup in core components, reducing amount of functions to be aware of and to be called (for demo project amount of update calls during scene creation has reduced roughly from ~300 to ~60), plus there are two new styled components now:

• Frame - displays nine-slice based frame, and allows putting other components inside it (actually extracted from TextArea, which is now much slimmer)
• Dialog - a "modal" dialog, consisting of Frame and a fullscreen backdrop, that will also block all background interactive elements

Of course, I've updated an example project, and started experimenting with how grouping of components into smaller functions would look like, to avoid huge create functions - this is key to scalability.

Also, in order to move faster and safer, I've implemented E2E screenshot-based tests using Playwright, that also run in CI. So far there is only one primitive "smoke test", but it does its job and already helps immensely.

And of course, big thanks to all people, who provided feedback, and Phaser team featuring this library in their news - this gives a lot of motivation to continue!