RexUI Shapes And States
Use this skill for RexUI visual building blocks: backgrounds, scalable image skins, state-aware button skins, image containers, progress displays, and canvas/chart wrappers.
Use This First
Choose the visual component:
| Need |
Use |
| Common rounded background for labels/dialogs/panels |
roundRectangle |
| Canvas-backed rounded background |
roundRectangleCanvas |
| Scalable textured background |
ninePatch or ninePatch2 |
| Triangle toggle arrow |
triangle |
| Custom vector drawing |
customShapes |
| State-aware image icon |
statesImage |
| State-aware text |
statesText or statesBitmapText |
| State-aware rounded background |
statesRoundRectangle |
| State-aware scalable textured background |
statesNinePatch or statesNineSlice |
| State-aware progress/bar background |
statesBarRectangle |
| Image fitted into a UI box |
imageBox or lazyLoadImageBox |
| Circular or alpha-masked image |
circleMaskImage or alphaMaskImage |
| Circular progress ring |
circularProgress |
| Linear progress bar |
lineProgress |
| Rounded rectangle progress |
roundRectangleProgress; verify gotcha first |
| Custom progress drawing |
customProgress |
| Loading spinner |
aioSpinner |
| Canvas object or Chart.js wrapper |
canvas or chart |
| Full-screen overlay/input layer |
cover, fullWindowRectangle, fullWindowZone |
For layout placement, use rexui-layout-sizers. For button events that drive state changes, use rexui-basic-widgets.
Required Setup
This skill assumes RexUI is available as this.rexUI. If not, use rexui-setup-and-factory.
References
Read these only when needed:
references/shape-catalog.md: component chooser, factory signatures, source files, and factory-name gotchas.references/skin-states.md: active/hover/disable state style fields and button-state wiring.references/progress-recipes.md: progress bars, spinners, custom progress, and image wrappers.
Core Rules
- Prefer
roundRectangle for simple generated UI skins; use ninePatch when the visual must come from a texture.
- Use state-aware objects only for visual state; drive
setActiveState(), setHoverState(), and setDisableState() from button/list/dialog events.
- Do not store selection only in the visual state object. Keep state in the owning button/list model and apply it to the skin.
- Call
.layout() after placing shape/state objects inside RexUI sizers, labels, buttons, dialogs, or panels.
- Create opaque backgrounds before content when manually composing objects that share Phaser display-list depth.
- Use
value, setValue(), or easeValueTo() for progress components; values are normalized from 0 to 1 unless mapped with min/max arguments.
- Use package imports only in full setup examples; local
templates/ui/... paths are source-map paths.
Source File Map
templates/ui/roundrectangle/RoundRectangle.d.tstemplates/ui/roundrectanglecanvas/RoundRectangleCanvas.d.tstemplates/ui/ninepatch/NinePatch.d.tstemplates/ui/ninepatch2/NinePatch.d.tstemplates/ui/quadshape/QuadShape.d.tstemplates/ui/triangle/Triangle.d.tstemplates/ui/customshapes/CustomShapes.d.tstemplates/ui/canvas/Canvas.d.tstemplates/ui/imagebox/ImageBox.d.tstemplates/ui/lazyloadimagebox/LazyLoadImageBox.d.tstemplates/ui/circlemaskimage/CircleMaskImage.d.tstemplates/ui/alphamaskimage/AlphaMaskImage.d.tstemplates/ui/statesimage/StatesImage.d.tstemplates/ui/statestext/StatesText.d.tstemplates/ui/statesbitmaptext/StatesBitmapText.d.tstemplates/ui/statesroundrectangle/StatesRoundRectangle.d.tstemplates/ui/statesninepatch/StatesNinePatch.d.tstemplates/ui/statesnineslice/StatesNineSlice.d.tstemplates/ui/statesbarrectangle/StatesBarRectangle.d.tstemplates/ui/circularprogress/CircularProgress.d.tstemplates/ui/circularprogresscanvas/CircularProgressCanvas.d.tstemplates/ui/lineprogress/LineProgress.d.tstemplates/ui/lineprogresscanvas/LineProgressCanvas.d.tstemplates/ui/roundrectangleprogress/RoundRectangleProgress.d.tstemplates/ui/customprogress/CustomProgress.d.tstemplates/ui/aiospinner/AIOSpinner.d.tstemplates/ui/chart/Chart.d.tstemplates/ui/cover/Cover.d.tstemplates/ui/fullwindowrectangle/FullWindowRectangle.d.tstemplates/ui/fullwindowzone/FullWindowZone.d.ts
Related Skills
rexui-setup-and-factory: plugin setup and factory discovery.rexui-components-catalog: choose the correct component family.rexui-layout-sizers: place visual objects in layouts.rexui-basic-widgets: buttons, labels, tabs, and value controls.rexui-scroll-lists-and-tables: state skins inside reusable cells.rexui-interactions-and-effects: hover/click/gesture effects that drive visual states.
1---2name: rexui-shapes-and-states3description: Use this skill when building RexUI visual skins, shape backgrounds, roundRectangle, ninePatch, ninePatch2, QuadShape, triangle, customShapes, imageBox, lazyLoadImageBox, circleMaskImage, alphaMaskImage, statesImage, statesText, statesBitmapText, statesRoundRectangle, statesNinePatch, statesNineSlice, statesBarRectangle, circularProgress, lineProgress, roundRectangleProgress, customProgress, aioSpinner, canvas, chart, cover, fullWindowRectangle, or fullWindowZone. Triggers on: RexUI skin, RexUI state, RexUI shape, statesImage, statesRoundRectangle, roundRectangle, ninePatch, progress, imageBox.4---56# RexUI Shapes And States78Use this skill for RexUI visual building blocks: backgrounds, scalable image skins, state-aware button skins, image containers, progress displays, and canvas/chart wrappers.910## Use This First1112Choose the visual component:1314| Need | Use |15|---|---|16| Common rounded background for labels/dialogs/panels | `roundRectangle` |17| Canvas-backed rounded background | `roundRectangleCanvas` |18| Scalable textured background | `ninePatch` or `ninePatch2` |19| Triangle toggle arrow | `triangle` |20| Custom vector drawing | `customShapes` |21| State-aware image icon | `statesImage` |22| State-aware text | `statesText` or `statesBitmapText` |23| State-aware rounded background | `statesRoundRectangle` |24| State-aware scalable textured background | `statesNinePatch` or `statesNineSlice` |25| State-aware progress/bar background | `statesBarRectangle` |26| Image fitted into a UI box | `imageBox` or `lazyLoadImageBox` |27| Circular or alpha-masked image | `circleMaskImage` or `alphaMaskImage` |28| Circular progress ring | `circularProgress` |29| Linear progress bar | `lineProgress` |30| Rounded rectangle progress | `roundRectangleProgress`; verify gotcha first |31| Custom progress drawing | `customProgress` |32| Loading spinner | `aioSpinner` |33| Canvas object or Chart.js wrapper | `canvas` or `chart` |34| Full-screen overlay/input layer | `cover`, `fullWindowRectangle`, `fullWindowZone` |3536For layout placement, use `rexui-layout-sizers`. For button events that drive state changes, use `rexui-basic-widgets`.3738## Required Setup3940This skill assumes RexUI is available as `this.rexUI`. If not, use `rexui-setup-and-factory`.4142## References4344Read these only when needed:4546- `references/shape-catalog.md`: component chooser, factory signatures, source files, and factory-name gotchas.47- `references/skin-states.md`: active/hover/disable state style fields and button-state wiring.48- `references/progress-recipes.md`: progress bars, spinners, custom progress, and image wrappers.4950## Core Rules5152- Prefer `roundRectangle` for simple generated UI skins; use `ninePatch` when the visual must come from a texture.53- Use state-aware objects only for visual state; drive `setActiveState()`, `setHoverState()`, and `setDisableState()` from button/list/dialog events.54- Do not store selection only in the visual state object. Keep state in the owning button/list model and apply it to the skin.55- Call `.layout()` after placing shape/state objects inside RexUI sizers, labels, buttons, dialogs, or panels.56- Create opaque backgrounds before content when manually composing objects that share Phaser display-list depth.57- Use `value`, `setValue()`, or `easeValueTo()` for progress components; values are normalized from `0` to `1` unless mapped with min/max arguments.58- Use package imports only in full setup examples; local `templates/ui/...` paths are source-map paths.5960## Source File Map6162- `templates/ui/roundrectangle/RoundRectangle.d.ts`63- `templates/ui/roundrectanglecanvas/RoundRectangleCanvas.d.ts`64- `templates/ui/ninepatch/NinePatch.d.ts`65- `templates/ui/ninepatch2/NinePatch.d.ts`66- `templates/ui/quadshape/QuadShape.d.ts`67- `templates/ui/triangle/Triangle.d.ts`68- `templates/ui/customshapes/CustomShapes.d.ts`69- `templates/ui/canvas/Canvas.d.ts`70- `templates/ui/imagebox/ImageBox.d.ts`71- `templates/ui/lazyloadimagebox/LazyLoadImageBox.d.ts`72- `templates/ui/circlemaskimage/CircleMaskImage.d.ts`73- `templates/ui/alphamaskimage/AlphaMaskImage.d.ts`74- `templates/ui/statesimage/StatesImage.d.ts`75- `templates/ui/statestext/StatesText.d.ts`76- `templates/ui/statesbitmaptext/StatesBitmapText.d.ts`77- `templates/ui/statesroundrectangle/StatesRoundRectangle.d.ts`78- `templates/ui/statesninepatch/StatesNinePatch.d.ts`79- `templates/ui/statesnineslice/StatesNineSlice.d.ts`80- `templates/ui/statesbarrectangle/StatesBarRectangle.d.ts`81- `templates/ui/circularprogress/CircularProgress.d.ts`82- `templates/ui/circularprogresscanvas/CircularProgressCanvas.d.ts`83- `templates/ui/lineprogress/LineProgress.d.ts`84- `templates/ui/lineprogresscanvas/LineProgressCanvas.d.ts`85- `templates/ui/roundrectangleprogress/RoundRectangleProgress.d.ts`86- `templates/ui/customprogress/CustomProgress.d.ts`87- `templates/ui/aiospinner/AIOSpinner.d.ts`88- `templates/ui/chart/Chart.d.ts`89- `templates/ui/cover/Cover.d.ts`90- `templates/ui/fullwindowrectangle/FullWindowRectangle.d.ts`91- `templates/ui/fullwindowzone/FullWindowZone.d.ts`9293## Related Skills9495- `rexui-setup-and-factory`: plugin setup and factory discovery.96- `rexui-components-catalog`: choose the correct component family.97- `rexui-layout-sizers`: place visual objects in layouts.98- `rexui-basic-widgets`: buttons, labels, tabs, and value controls.99- `rexui-scroll-lists-and-tables`: state skins inside reusable cells.100- `rexui-interactions-and-effects`: hover/click/gesture effects that drive visual states.
rexrainbow