[Phaser 3] rexUI plugins

Showcase
41

Great! Brilliant! Thanks a lot, @rexrainbow, for your job/plugins/whatever!

42

@rexrainbow man you make great work, not only with this plugins, but you are a good developer. Thanks for your contribs.

43

GridTable: Add cell swipinig events (‘cell.swipeleft’, ‘cell.swiperight’, ‘cell.swipeup’, ‘cell.swipedown’)

Demo

  • Swipe-left, swipe-right any cell to trigger ‘cell.swipeleft’, ‘cell.swiperight’ events
44

Update:

  • Add sizer.moveFrom(duration, x, y), sizer.moveTo(duration, x, y) methods (Document)
  • Add scene.rexUI.waitEvent(eventEmitter, eventName) method (Document)

Now user can chain asynchronous actions by Promise. Here is a demo - ease in, wait click, ease out.

45

Codepen is bad for checking out with phone.
Are they going to be as examples on official web site?

46

Now that this is an npm package I have gotten a ton of use out of this, thanks so much! All of the features are great.

47

Orientation for Text-Top, for Icon?
Example: “bottom-to-top” = Put icon at bottom side, and text at Top side.

48

There are 3 elements in a Label game object.

  1. Icon
  2. Text
  3. Action

Set Text and Action

var label = scene.rexUI.add.label({
    orientation: 'y',

    background: backgroundGameObject,
    text: textGameObject,
    action: imageGameObject,
});

To place a text game object above an image/sprite game object.

1 Like
49

Amazing, Thank You

50

Is it possible to change the font color of a label or button text. I can see the fontsize getting updated, but not the color.

51
  1. Get text game object
    var textObject = label.getElement('text');
  2. Change font color, assume that it is built-in text game object
    textObject.setColor(color);  // 'red' , or '#ff0000'
52

Sorry, when I use the UI-plugins by installing from minify file (link)
and load it into my script like this
image

I got an error
image

Is ther any suggestions can help me

53

Use the latest phaser3.50.1

54

thanks ! the previous question is solved.

now I’m trying to set up the padding between two objects which in gridTable.
isn’t it change the value in space.table ?
I did it but nothing happened.

var gridTable = scene.rexUI.add.gridTable({
    scrollMode: 0,
    ...
    
    space: {
        ...

        // table: 0, // Space between table object and slider object

         table: {
            top: 0, // padding space of table object.
            bottom: 30, // padding space of table object.
            // left: 0,
            // right: 0,
         },
    },
});

image

55

In your case, assume that the display cell height is h, and the padding space is s :

  • Set table.cellHeight in config to h+s
  • Create the cell game object with height to h
56

Hi, i have a Grid with Sprites.
I remove a Sprite: gridSizer.removeAt(2, 0, true);
Und want to rearrange the Grid.
But, “layout()” not working?

JSFiddle

57

Game object of a cell has been removed and destroyed, but the size of grid dose not changed. Thus you will see an empty cell.

You might try fixed-with sizer to rearrange items after some items has been removed.

1 Like
58

Thanks, it woks with “fixed-with sizer”

59

How can I set z axis, or depth for say - grid button
setDepth seems to bring the background to top

60

rexUI dose not control depth of each game object, you can set depth of background, sprite, image, text game object directly.
Or create game objects from background to front-end children.