Xense

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

Recommended Posts

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

2.jpg

1.jpg

3.jpg

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.