// Use when building Phaser RexUI interactions, gesture behaviors, anchors, fullscreen buttons, touch event blocking, drag/click/tap/press/swipe/pan/pinch/rotate handling, or UI effects such as flip, shake, fade, easeMove, skew, and perspective via this.rexUI.add.* or this.rexUI.*.
Use this skill when building basic RexUI widgets such as labels, buttons, gridButtons, fixWidthButtons, tabs, sliders, checkboxes, toggleSwitch, numberBar, knob, badgeLabel, titleLabel, simpleLabel, or settings panels. Triggers on: RexUI label, RexUI button, RexUI buttons, RexUI tabs, RexUI slider, RexUI checkbox, RexUI toggle, RexUI settings panel, RexUI knob, RexUI numberBar.
Use this skill when choosing RexUI components, browsing the RexUI component catalog, answering which RexUI widget or UI element to use, or routing a RexUI request to the right specialized skill. Triggers on: RexUI components, RexUI catalog, which RexUI widget, RexUI UI elements, choose RexUI component, RexUI factory list.
Use this skill when building RexUI dialogs, confirmDialog, confirmActionButton, nameInputDialog, modal overlays, popup panels, menus, dropDownList, simpleDropDownList, toast, or toastQueue flows. Triggers on: RexUI dialog, RexUI confirmDialog, RexUI modal, RexUI popup, RexUI dropdown, RexUI dropDownList, RexUI menu, RexUI toast, modalPromise.
Use this skill when building RexUI layouts with sizer, gridSizer, fixWidthSizer, overlapSizer, nested sizers, RexUI layout(), child proportion, expand, align, padding, spacing, childrenMap, or layout debugging. Triggers on: RexUI layout, RexUI sizer, gridSizer, fixWidthSizer, overlapSizer, this.rexUI.add.sizer, layout(), proportion, expand, RexUI nested layout.
Use this skill when building RexUI scrollable lists, gridTable, scrollablePanel, scrollbar, textArea scrolling, trees, folder, pages, tabPages, inventory UI, item grids, virtualized list cells, or multi-page panels. Triggers on: RexUI list, RexUI scrollablePanel, RexUI gridTable, RexUI scrollbar, RexUI tree, RexUI folder, RexUI pages, RexUI tabPages, inventory UI.
Use this skill when working with RexUI setup, the RexUI UIPlugin, scene plugin registration, mapping: 'rexUI', this.rexUI, this.rexUI.add.* factories, or RexUI factory discovery. Triggers on: RexUI setup, rexUI plugin, UIPlugin, this.rexUI, mapping rexUI, RexUI factory, this.rexUI.add.
| name | rexui-interactions-and-effects |
| description | Use when building Phaser RexUI interactions, gesture behaviors, anchors, fullscreen buttons, touch event blocking, drag/click/tap/press/swipe/pan/pinch/rotate handling, or UI effects such as flip, shake, fade, easeMove, skew, and perspective via this.rexUI.add.* or this.rexUI.*. |
Use this skill when RexUI UI objects need input behavior, gesture recognition, screen anchoring, event isolation, or small visual effects.
| Need | Prefer |
|---|---|
| Button-like click on one object | this.rexUI.add.click(gameObject, config) |
| Close a popup by clicking outside it | this.rexUI.add.clickOutside(panel, config) |
| Tap, double-tap, long press, swipe, pan | tap, press, swipe, pan |
| Two-finger scale or rotate | pinch and rotate |
| Make an object draggable | this.rexUI.add.drag(gameObject, config) or this.rexUI.requestDrag(gameObject) |
| Stop gameplay input under a UI overlay | this.rexUI.add.touchEventStop(gameObject, config) |
| Keep a panel aligned to viewport resize | anchor config or this.rexUI.add.anchor(gameObject, config) |
| Toggle fullscreen from an image/button | this.rexUI.add.fullscreenButton(gameObject, config) |
| Animate opacity or position | this.rexUI.fadeIn, fadeOutDestroy, easeMoveTo, easeMoveFrom |
| Card flip, impact feedback, temporary skew/perspective | flip, shake, skew, perspective, perspectiveCard |
this.rexUI.add.*, but fade, easeMove, requestDrag, and isInTouching are methods on this.rexUI itself.phaser4-rex-plugins/templates/ui/ui-plugin.js in generated app code. Source paths in these notes point to this repository only..layout() before anchoring, hit testing, clickOutside, flip, skew, perspective, or animation that depends on final bounds.this.input.addPointer(count). Pinch and rotate need at least 2 pointers.Use this.rexUI.add.*:
const click = this.rexUI.add.click(button, { mode: 'pointerup' });
const drag = this.rexUI.add.drag(panel, { axis: 'both' });
const stop = this.rexUI.add.touchEventStop(panel, { stopAllLevels: true });
Use this.rexUI.*:
this.rexUI.fadeIn(panel, 200);
this.rexUI.fadeOutDestroy(panel, 200, true);
this.rexUI.easeMoveTo(panel, 300, '+=0', '-=80', 'Cubic');
this.rexUI.requestDrag(panel);
Many RexUI layout/widget objects inherit BaseSizer convenience methods for the common click, click-outside, touching, and bounds-check cases:
panel.onClick((click, gameObject, pointer) => submit());
panel.onClickOutside(() => closePanel());
panel.onTouching((inTouch, gameObject, pointer) => stepValue(1), undefined, { cooldown: 120 });
panel.disableClick();
panel.isPointerInBounds();
Use these methods when the target is already a RexUI sizer/widget and the handler is local to that object. Use explicit this.rexUI.add.click, clickOutside, or inTouching behavior objects when code needs to store the behavior instance, attach to a plain Phaser game object, or share/reconfigure the behavior independently.
Gotcha: fullscreenButton is registered as this.rexUI.add.fullscreenButton(...). Do not use the capitalized type name as the factory call.
Gotcha: in the RexUI factory source, pinch and rotate are scene-level gesture recognizers. Prefer this.rexUI.add.pinch(config) and this.rexUI.add.rotate(config), then apply the returned gesture values to the object you want to transform.
templates/ui/ui-plugin.js: RexUI factory registration and helper methods.templates/ui/ui-plugin.d.ts: public factory names and helper method names.templates/ui/basesizer/BaseSizer.d.ts: inherited click, click-outside, touching, pointer bounds, and child-target convenience methods.templates/ui/click, clickoutside, tap, press, swipe, pan, pinch, rotate, drag, intouching: input behavior wrappers.templates/ui/anchor, fullscreenbutton, toucheventstop, layermanager: viewport, fullscreen, event isolation, and layer helpers.templates/ui/flip, shake, skew, perspective, perspectivecard, fade, easemove: visual effects and motion helpers.