rexrainbow/phaser3-rex-notes/rexui-interactions-and-effects

RexUI Interactions And Effects

Use this skill when RexUI UI objects need input behavior, gesture recognition, screen anchoring, event isolation, or small visual effects.

Use This First

Core Rules

• Behaviors attach to existing game objects; create and lay out the target first.
• Most behavior factories are under this.rexUI.add.*, but fade, easeMove, requestDrag, and isInTouching are methods on this.rexUI itself.
• Use npm import paths such as phaser4-rex-plugins/templates/ui/ui-plugin.js in generated app code. Source paths in these notes point to this repository only.
• For layout objects, call .layout() before anchoring, hit testing, clickOutside, flip, skew, perspective, or animation that depends on final bounds.
• For pointer-heavy scenes, add extra pointers with this.input.addPointer(count). Pinch and rotate need at least 2 pointers.
• Avoid attaching competing gestures to the same object without a clear priority. Scrollable components already use pointer gestures internally.
• Store behavior instances when they must be enabled, disabled, reused, or cancelled later.

Factory And Helper Boundaries

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.

References

• For gesture selection, events, and reduced input recipes, read references/gesture-behaviors.md.
• For fade, easeMove, flip, shake, skew, and perspective recipes, read references/effect-recipes.md.
• For responsive anchoring, fullscreen buttons, touch event blocking, and layer/input notes, read references/anchor-fullscreen.md.

Source Map

• 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.