[Phaser 3] rexUI plugins

Showcase
1

Here are some UI components of phaser3.

Live demos

Sizer

Layout children game objects.

Grid sizer

Layout children game objects in grids.

Label

A container with an icon, text, and background.

Dialog

A container with a title, content, buttons and background.

Tabs

A container with 4 groups of buttons around a center panel.

Grid table

A container with a grid table, slider, and scroller.

Menu

A container with buttons and sub-menu.

Textbox

A container with an icon, (typing and paging) text, and background.

Slider

A container with a track, indicator, thumb and background.

Number bar

A container with an icon, slider, text, and background.

Round rectangle

Round rectangle shape.

25 Likes
2

New sizer – fix-width-sizer : Layout children game objects into lines.

3 Likes
4

Brilliant code support for Phaser 3!! Simply love the variety you’ve provided.

5

Another ui component - pages : A container with pages, only current page is visible.

And here is a list of plugins in my UI plugins package.

6

New ui component - text area : A container with a text, slider, and scroller.

It can show a large amount of text.

1 Like
7

New ui component - scroll-able panel : A container with a panel, slider, and scroller.

Masking of cell in grid table plugin is also rewrote, now grid table will apply less mask, and have better performance.
(Grid table applied mask to all visible game objects before)

1 Like
8

Nice,
Does the table have the ability to enable and disable drag-scroll ?!
And what’s your idea about customizing rows which multiple fields can be placed in each row (Not that, as in the present case, several fields are textually attached and form a row.)?!

9

Add parameter scroller in configuration of grid table, scroll-able panel, text area.
Set it to false could skip installing of drag-scrolling.

@littledemon

Try this feature (scroller: false) in these demos:

1 Like
10

Another problem with the grid table is that sometimes it should be double-clicked on items in order to do something in item click handler O_o
The problem is the focus! When the mouse pointer stays on an item without moving more, after 3-4 seconds the focus is removed from the item and you must click on it again!

Of course, I needed to increase the depth of the table in general, when I did not get it, I increased the depth of the labels and maybe the problem would start from there…

11

Update:

Refactory Grid table, text area, scrollable panel plugins, now they have the same function names of scrolling content.

  • gridTable.setChildOY(oy)
  • gridTable.setT(t)
  • gridTable.scrollToTop()
  • gridTable.scrollToBottom()
  • gridTable.setSliderEnable(enabled)
  • gridTable.setScrollerEnable(enabled)

It is a breaking changing, please update function names if using them.

@littledemon

gridTable.setSliderEnable(enabled) and gridTable.setScrollerEnable(enabled) can enable/disable slider or scroller during runtime.

1 Like
12

The problem is the focus! When the mouse pointer stays on an item without moving more, after 3-4 seconds the focus is removed from the item and you must click on it again!

I could not reproduce this focus issue, focus still there if mouse does not move after 10 or more seconds.

13

You are right, but I do not know why this is happening in Opera and Chrome browsers!
Especially when the mouse is out of the browser window before clicking!
However, in the codepen environment, even if the mouse is outside the window, there will be no problem!
my case …

14

New ui component - Chart : Draw chart on canvas.

15

How does one determine the bottom of the text? I have added MouseWheelUpDown to scroll using the mouse wheel but I’m having trouble stopping the scrolling when you reach the bottom of the text. Which value can I use to determine the bottom edge?

I tried using the textAread height, but no luck

16

I add these descriptions into documents…

  • Top OY
    var topOY = textArea.topChildOY;
  • Bottom OY
    var bottomOY = textArea.bottomChildOY;

Set childOY (textArea.setChildOY(oy)) between Top OY and Bottom OY (bottomOY is less than topOY)

Or, add clamplChildOY: true into config like,

var textArea = scene.rexUI.add.textArea({
    // ...
    clamplChildOY: true,
    // ...
});

Default value of clamplChildOY property is false.

17

Thank you!

18

Whenever the text is too little to require scrolling. I get the error below when the user tries to scroll. How do I prevent scrolling when it is not required?

VM9654:1 Uncaught RangeError: Maximum call stack size exceeded
at fs.as (:1:85954)
at fs.get textHeight [as textHeight] (:1:88848)
at fs.get textVisibleHeight [as textVisibleHeight] (:1:88963)
at fs.get bottomTextOY [as bottomTextOY] (:1:88803)
at fs.textOYExeceedBottom (:1:89151)
at fs.set textOY [as textOY] (:1:89285)
at fs.set t [as t] (:1:89683)
at Ss.set t [as t] (:1:70772)
at Ss. (:1:70173)
at Ue.h.emit (VM9347 phaser.min.js:1)

19

Thanks for finding this bug, although the error messages are not the same in my case.
Now I had fixed the scrolling on a short text. Please get the latest rexUI plugin.

20

Thank you very much. Working now.