New UI Framework. Build Phaser 3 UI Components with Adobe Animate.

[Xense]

I am making UI Components Framework for Phaser 3, that is driven by JSFL-generated jsons and atlases.

It means that you can build your UI in Abode Animate, export it with given script, and forget about manual code positioning and building stuff!

Please, try it out.

https://xense.github.io/phaser-ui-comps-docs/tutorial-showcase.html

Docs, examples, tutorials:

https://xense.github.io/phaser-ui-comps-docs

 

There are two basic things in this framework.

First is ComponentClip, which is a view instance, it is recursively self-build by provided json and atlases.

Second is UIComponentPrototype, which is clip controller. It can be easily extended to create any components, windows or whatever you need. Essential meaninig of it is that it doesn't need a clip to exist always. For example, you can change states of a root clip, and child clip can get new clip instances, ore lose them, and nothing bad happen.

Some base components are already included

• UIButton has 4 states, "up", "over", "down", "disable"
• UIButtonSelect same as button, but behaves like checkbox, has 8 states, by adding "_select" suffix to UIButton's states when selected.
• UIButtonRadio Selectable buttons, that can be grouped to select only one of them.
• UIButtonDraggable same as UIButton, but also emits drag event, drag bounds can be self externally.
• UIScrollBar vertical or horisontal bar with draggable thumb and prev/next buttons.
• UIProgressBar Setup only start and end elements positions, scale, rotation or alpha, and this component will interpolate them according to provided progress value.
• UIScrollPanel Helper for scrolling any element with UIScrollBar.
• UIContainer Base container component to add other dynamically created components inside. Can be easily extended to create any types of lists, for example.

I'm still working on new components and extending existing functionality.

 

Tell me, would you use it, what other components you may need, and whatever you think about it.
Any feedback is appreciated! Also I'll be thankful for any collaboration.

Available at GitHub and npm

[Demka]

Hello. Is there any examples of code, where you used this? It a pain to start to use, I don't really understand how to show any of element I have, but looks promising.

[xavax]

Hi, same for me. that seems a very great project and I'm very interresting to use it and even to help. I'm used to make game with Animate and createjs, and I search to have same kind of flow for phaser.
But It's really difficult to start. Could you give us a full code example working with the UI.fla file provided?

[مطورة]

Thank ?

[hameron]

Live example not working. @Xense