[Phaser 3] rexUI plugins

Showcase
21

Thank you very much

22

I know this might be a stupid question. I am trying to load rexuiplugin.min.js in the game configuration so it is available globaly.

import UIPlugin from ā€˜/apps/vendor/plugins/dist/rexuiplugin.min.jsā€™;

But when I import it I get the following error:

The requested module ā€˜/apps/vendor/plugins/dist/rexuiplugin.min.jsā€™ does not provide an export named ā€˜defaultā€™

Loading it in a specific scene using load.scenePlugin works

    this.load.scenePlugin({
        key: 'rexuiplugin',
        url: '/apps/vendor/plugins/dist/rexuiplugin.min.js',
        sceneKey: 'rexUI'
    });

Any ideas?

23

Sorry I canā€™t reproduce this issue. Import UIPlugin from my plugins/dist/rexuiplugin.min.js file works well in my test environment.

24

Hi Rex

Something you changed in your latest version is causing errors.

When I use

    this.load.scenePlugin({
        key: 'rexuiplugin',
        url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/plugins/dist/rexuiplugin.min.js',
        sceneKey: 'rexUI'
    });

I get the following error:

Uncaught TypeError: this._state.destroy is not a function
at p.shutdown (:1:18773)
at p.destroy (:1:18823)
at fs.h.emit (VM145 phaser.min.js:1)
at fs.destroy (VM145 phaser.min.js:1)
at fs.destroy (:1:101984)
at fs.destroy (:1:42226)
at fs.destroy (:1:91509)
at initialize.destroy (VM145 phaser.min.js:1)
at initialize.shutdown (VM145 phaser.min.js:1)
at initialize.h.emit (VM145 phaser.min.js:1)

When I revert to a local version

    this.load.scenePlugin({
        key: 'rexuiplugin',
        url: '/apps/vendor/plugins/dist/rexuiplugin.min.js',
        sceneKey: 'rexUI'
    });

It works fine.

25

Thank you for this bug report. :+1:
I had fixed this bug, sorry for inconvenience.

26

Add tap and press events into rexUI/Gridtable.
Demo

  • Tap, double taps, or press on any cell
1 Like
27

Add edit method to create an input text object above a text object to edit string content.

scene.rexUI.add.edit(textObject, config);
2 Likes
28

Add video, videoCanvas, here is a demo of video player.

1 Like
29

When I try to import from rexuiplugin.min.js, Iā€™m also getting the error:

ā€˜rexuiplugin.min.jsā€™ does not provide an export named ā€˜defaultā€™

in the latest versions of Chrome, Firefox, and Edge (it halts execution even though it doesnā€™t report an error message), in Windows 10 v1803 build 17134.829, and with no javascript bundler

When I try:

import * as UIPlugin from ā€œ./plugins/rexuiplugin.min.jsā€;

Chromeā€™s dev tools show that the UIPlugin object has no properties, meaning it doesnā€™t find any exports from rexuiplugin.min.js. I think it may be that your bundler/minifier is using ES5 syntax (module.exports) to export the module instead of ES6.

I did some searching and found this thread about a similar problem in a different library:

EDIT:
It looks like that is the case. This is the code exporting the module in rexuiplugin.min.js (ā€˜eā€™ returns the stuff to export and ā€˜tā€™ is the window):

"object"==typeof exports && "object"==typeof module ? 
    module.exports=e()
:
    "function"==typeof define && define.amd ?
        define([],e)
    :
        "object"==typeof exports ?
            exports.rexuiplugin=e()
        :
            t.rexuiplugin=e();

Also, it looks like it creates a global variable ā€˜rexuipluginā€™ if ES5 exporting is not supported. Iā€™ll just use that for now

30

I have to set webpack config file when I use ā€˜importā€™. But I have no idea what is the critical setting to use it.

31

Update plugins to phaser 3.18.1. Please also update phaser to 3.18.1.

32

Add header, footer elements into GridTable, ScrollablePanel, TextArea ui game objects. Demo

33

Update:

  • Fix a bug of rexUI plugin. rexUI game object wonā€™t work correctly when scene shot down.
  • Bbcode text, Tag text object can draw texture within text content. Demo
  • Add toast ui game object, to show text message for a short while. Document, Demo
34

Update:

Add hit-area of words in rexBBCodeText, rexTagText game object.
Demo: Click word in red boxes.

35

Update:

Upgrade rexUI plugins to latest phaer version 3.19.0

36

Update:

  • Add flip behavior, to flip rexUI element by scaling width/height. (Demo)
  • Add circle mask image game object, which apply a circle mask on a texture, without using webgl mask feature, (Demo)
37

Update:

1 Like
38

Updating: Using display size to place objects, instead of original size.
Please reporting bugs here.

1 Like
39

Updat:

Add anchor parameter to each ui game object.
In this demo, try to resize the game window -

anchor: {
    left: 'left+10',
    centerY: 'center',
}
  • Left side of an ui object will be aligned to left side of visible game window.
  • CenterY of ui object will be aligned to center of visible game window.
40

Add installing instructions into document

1 Like