Msw Ui System

msw-ui-system

MSW .ui single entry point — design guide + component API + builder invocation + runtime patterns bundled into one skill.

Role division with existing skills:

---

0. Routing

Branch to sub-references based on request keywords.

---

1. Basic Workflow

(1) Clarify intent       Layout sketch (ASCII or verbal) + which group to attach to
(2) Check design guide   Match at least one of ui-fundamentals / ui-hierarchy / component-api §Component Selection Guide
(3) Builder Preflight    Read ../msw-general/references/builder-protocol.md §3 (unified call-protocol entry point)
(4) Match recipe          Select the closest template from layout-recipes.md
(5) Invoke builder        Create/patch via scripts/msw_ui_builder.cjs (protocol: builder-protocol.md §3)
(6) Inject bindings       Auto-inject .mlua property default UUIDs via b.write(path, { bind: {...} }) or b.injectBindings(...) (builder-protocol.md §3.6 Binding Injection)
(7) Self-verify           write() auto-runs scripts/ui_lint.cjs (strict ON by default)
(8) Preview               Visual check via scripts/preview_ui_layout.cjs
(9) Sound pass            For any interactive button, offer click/hover SFX wiring (references/ui-sound.md)
(10) Maker Refresh         Apply to engine

2. Global Rules

NEVER

1. Do not directly edit `.ui` JSON — .ui creation/modification must go through scripts/msw_ui_builder.cjs. Manual editing breaks UUID·ValueType·@components consistency and causes silent drops. 2. Read existing `.ui` files through the builder too — Query via UIBuilder.read(filepath) / .find() / .listEntities(). Do not directly grep/parse raw JSON.

• .ui direct Read and shell commands such as cat / type / Get-Content / rg / grep / sed / awk / cp / mv are blocked by the registered guard. Use UIBuilder.read/load/snapshot for reads and b.write() for writes. Deleting an entire .ui file is a separate explicit deletion action, not a builder mutation.

3. Set Position directly — Use only anchoredPosition (Position is engine-managed) 4. Express size via OffsetMin/Max on fixed anchors (AnchorsMin == AnchorsMax) while also using anchoredPosition — Do not mix the two modes 5. Builder creates new UUIDs but .mlua property defaults are not updated — Binding breaks

ALWAYS

1. Builder Protocol Preflight — read [`../msw-general/references/builder-protocol.md`](../msw-general/references/builder-protocol.md) §3 every turn before any `.ui` mutation (UIBuilder API, write auto-lint, pos / anchor rules, binding injection, coverage gaps). It lives in the same document as .map MapBuilder / .model ModelBuilder — a unified entry point because the cross-flow is interlocked. 2. Check at least one design guide before invoking the builder (ui-fundamentals / ui-hierarchy / component-api §Component Selection Guide) 3. Match a recipe first; build from scratch only as a last resort 4. For edge placement use the formula: pos = ±(margin + size/2) 5. Separate popups and toasts into their own UIGroup, standalone show/hide 6. Verify text Alignment default is UpperLeft(0) — 95% of "I centered it but it sticks to the left" issues 7. Button touch target ≥ 88×88 (mobile support) 8. After creating any interactive button — proactively suggest wiring click/hover SFX via `references/ui-sound.md` (default UI SFX RUIDs available). Skip only if the user explicitly opts out or the button is purely decorative.

---

3. Sub-documents

• `references/ui-fundamentals.md` — Coordinate system, RectTransform 3 elements, anchor mode determination (§1–§8) + Resolution·safe area·PC reserved zones·touch targets·font sizes·platform separation (§9)
• `references/ui-hierarchy.md` — UIGroup / displayOrder / CanvasGroup / Enable vs Visible
• `references/component-api.md` — §"Component Selection Guide" (which/when/why) + full component property/method/event tables (what) + all UI-related enum values (§Enums)
• `references/layout-recipes.md` — Layout template collection
• `references/runtime-patterns.md` — .mlua runtime patterns (popup/toast/HP/grid/drag…) + Runtime UI Caveats
• `references/ui-sound.md` — UI sound integration (_SoundService:PlaySound, click/hover hook, default UI SFX RUIDs)
• `../msw-general/references/builder-protocol.md` §3 — `.ui` CJS builder call protocol (unified entry point) — same document as .map MapBuilder / .model ModelBuilder. panel / text / sprite / button / slider / scroll / script / group / mask / grid / avatar / touchReceive / skeleton / areaParticle / basicParticle, component CRUD, anchor presets, write auto-lint, and .mlua property UUID auto-binding all live in §3 + §3.6.
• `references/templates/templates.md` — Pre-built style bundle index (style-N-* .ui, `ruid-map.md`, Popupbutton.mlua)

4. Scripts

• scripts/msw_ui_builder.cjs — .ui builder core (UIBuilder class). Read `../msw-general/references/builder-protocol.md` §3 (unified entry point) before use.
• scripts/preview_ui_layout.cjs — .ui layout visual check + touch target warnings
• scripts/ui_lint.cjs — .ui file self-verification (auto-called by write())
• scripts/ui_recipe.cjs — Recipe-based scaffolding

---

Out of Scope

• .map / .model / .tileset builders — Outside this skill's scope
• .ui JSON schema (raw field shapes, @type/@components wrapping, AlignmentOption 0–15 mapping, etc.) — Handled internally by the builder. Users/AI do not need to know directly
• Accessibility patterns (alt text, screen-reader hints, focus order) — Not covered
• Error-state UI patterns (disabled-button styling beyond Transition.Disabled, validation messages, loading spinners) — Not covered; design ad-hoc per project
• Automated UI testing / layout assertions beyond ui_lint.cjs and preview_ui_layout.cjs — Not provided
• Custom shader materials (MaterialId) — Field is exposed but authoring shaders is outside this skill's scope

UI Component API Reference

Full list of properties, methods, and events per UI component. Use as a lookup when calling builder patchComponent(...) / addComponent(...), or when accessing a component from .mlua runtime code (property ButtonComponent btn = "uuid" → self.btn.Enable = false).

Before reading or writing a UI component field in .mlua, verify the exact field name here. Do not infer field names from Unity, UGUI, HTML, or other UI frameworks.

Authoring `.ui` files: this reference describes what fields exist. To set them, call the builder (scripts/msw_ui_builder.cjs; protocol in `../../msw-general/references/builder-protocol.md` §3 — unified call entry point). Do not hand-edit .ui JSON.

---

Component Selection Guide

Selection criteria (which/when/why). For exact field/method/event tables, jump to the component sections below.

Quick Decision Tree

What do you want to display?
├── Text         → TextComponent
├── Image        → SpriteGUIRendererComponent
├── Avatar       → AvatarGUIRendererComponent
├── Input field  → TextInputComponent
└── Group items  → Empty Panel with only UITransform (arrange as children)

What do you want the user to interact with?
├── Simple click (including hover color change)       → ButtonComponent
├── Press, drag, multi-touch                          → UITouchReceiveComponent
├── Slider                                            → SliderComponent
├── Directional input (mobile)                        → JoystickComponent
└── Progress bar (display only)                       → SliderComponent(Interactable=false) or SpriteGUIRenderer(ImageType=Filled)

Do you need to display a list?
├── 10 or fewer items, simple           → Manual placement + reuse empty Panels
├── Tens to hundreds, structured        → ScrollLayoutGroupComponent
└── Thousands, performance-critical     → GridViewComponent (virtualized)

Clipping or shape masking?
└── MaskComponent (e.g., circular avatar frame)

Opacity or grouped interaction control?
└── CanvasGroupComponent

Entity selection priority:

• Colored or imaged background + centered text + click handling → use one b.button(...) entity.
• Use separate b.sprite(...) + b.text(...) only when the text/background must be independent children, or when no click handling is needed.
• Repeated same-shape tiles such as cards, board cells, inventory slots, and menu tabs should default to b.button(...).

Choosing Between Similar Components

ButtonComponent vs UITouchReceiveComponent

How to choose:

• "Click a button to execute something" → Button
• "Drag to move an item" → UITouchReceive
• "Scroll a map" → UITouchReceive
• "Skill button that also triggers with keyboard R" → Button + KeyCode

ScrollLayoutGroupComponent vs GridViewComponent

Decision criteria: If the item count exceeds 100 or may grow dynamically, always use GridView. Inventory, chat logs, and rankings should default to GridView. Use ScrollLayoutGroup only for static lists of 10 or fewer items, such as settings page tabs.

SliderComponent vs SpriteGUIRendererComponent(Filled)

Both can express a "fill" effect, but they serve different purposes.

How to choose:

• Volume/sensitivity control → Slider
• HP/MP bar (read-only) → Sprite(Filled Horizontal)
• Cooldown circular gauge → Sprite(Filled Radial)
• Experience bar → Sprite(Filled Horizontal) + Tween on value change

TextComponent — Alignment Pitfall ⚠️

The default value of TextComponent.Alignment is UpperLeft(0). A common mistake is assuming text is centered when it actually sticks to the upper-left. Always specify alignment explicitly:

• Title/centered text → MiddleCenter(4)
• Left-aligned description → UpperLeft(0) or MiddleLeft(3)
• Right-aligned numbers (e.g., scores) → MiddleRight(5)

Additional considerations:

• BestFit = true + MinSize/MaxSize → Automatically adjusts font size to fit the Rect. Useful for handling text length variations across languages.
• Overflow: Truncate(1) clips text / Ellipsis(2) shows ... / Overflow(0) lets text flow outside the Rect
• SizeFit = true → Rect automatically resizes to fit text length. Be careful with dynamic text + background Sprite (the background won't resize along with it)

SpriteGUIRenderer — ImageType Selection

Button backgrounds, dialog backgrounds, and panels should almost always use Sliced. The sprite asset must have 9-slice borders configured for this to work.

Combination Patterns (Common Component Groupings)

Summary of component combinations to attach per entity. For builder call code and ASCII trees, see `layout-recipes.md`. For runtime code, see `runtime-patterns.md`.

GridView caution — OnRefresh is called frequently during scrolling. Do not call DataStorage; read only from cached tables.

Rarely Used Components

Component Attachment Checklist

When creating a new entity:

• [ ] UITransformComponent is required (for all UI entities)
• [ ] If it's a root, add UIGroupComponent + CanvasGroupComponent
• [ ] If it's an image, add SpriteGUIRendererComponent and set ImageRUID (invisible if left empty)
• [ ] If it's a button, add ButtonComponent + background Sprite on the same entity; Label as a child
• [ ] If it's a list, decide the scroll type first (hundreds or more → GridView)
• [ ] To block input, use CanvasGroup.Interactable or BlocksRaycasts
• [ ] If it's text, specify Alignment explicitly (default UpperLeft is a common pitfall)

---

UITransformComponent

Manages position, size, anchors, rotation, and scale. Required on every UI entity.

Properties

Methods

---

UIGroupComponent

Defines a UI screen (group). Attach to the root entity.

Properties

---

CanvasGroupComponent

Controls the group's overall transparency and interaction.

Properties

---

Commonly Mistaken Unity Analogs

Enable is inherited from the base component and is valid on UI components. Interactable is a CanvasGroupComponent property, not a ButtonComponent property.

---

ButtonComponent

Interactive button. Supports state-transition effects.

Properties

Events

---

TextComponent

Displays text. Supports font, alignment, overflow, drop shadow, and outline.

Properties

Methods

---

SpriteGUIRendererComponent

Renders 2D images / sprites.

See the msw-sprite-ruid skill for ImageRUID native type support (sprite / animationclip), animationclip animated UI, and the thumbnail:// prefix for rendering skeleton / avataritem thumbnails (especially useful for avatar item icons).

Properties

Methods

Events

---

ScrollLayoutGroupComponent

Scrollable list / grid layout.

Properties

Methods

Events

---

GridViewComponent

Virtualization for large lists. Renders only items visible on screen.

Properties

Methods

---

TextInputComponent

Text input field.

Properties

Methods

Events

---

SliderComponent

Slider / progress bar.

Properties

Events

---

UITouchReceiveComponent

Receives touch / mouse input. Just attaching it makes events fire.

Events

---

MaskComponent

Clips child UI to a specific shape.

Properties

---

JoystickComponent

Virtual joystick (mobile). Builder: joystick(name, options) — anchors to bottom-left at (200, 200) with a 300x300 rect by default.

Properties

---

ChatComponent

In-game chat UI. Builder: chat(name, options).

Properties

Events

---

SoftMaskComponent

Soft-edged clipping mask (UGUI SoftMask style). Builder: softMask(name, options). Attach to a sprite entity; child sprites/raw images are clipped with anti-aliased edges. Note: gated by the EnableUnpublishFeature maker authority.

Properties

---

LineGUIRendererComponent

Draws a polyline (HUD lines, guides). Builder: line(name, options) — options.points is an array of { pos: [x, y], color: "#RRGGBB" | Color, width: float }.

Properties

---

PolygonGUIRendererComponent

Draws an arbitrary polygon (speech-balloon tails, custom shapes). Builder: polygon(name, options) — options.points is an array of [x, y]; optional options.uvs for custom UV mapping when use_custom_uvs: true.

Properties

Methods

---

UISpriteParticleComponent

Sprite-textured particle effect (extends UI particle base). Builder: spriteParticle(name, options).

Properties

UISpriteParticleType: None=0, BurstBig=1, SpawnField=2, BurstNova=3, SimpleSpawn=4, Burst=5, Stream=6, StreamSharp=7, AdditiveColor=8.

---

AvatarGUIRendererComponent

Renders avatars in UI.

Properties

Methods

---

UILogic

UI coordinate-conversion utility (singleton).

Properties

Methods

---

WorldUI Sort Fields (Common)

ButtonComponent, TextComponent, SliderComponent, SpriteGUIRendererComponent, ScrollLayoutGroupComponent, and TextInputComponent all expose the same 4-field sorting block. The fields are only meaningful when the parent UITransformComponent.UIMode is World(2).

Builder shortcut: pass world_ui: true to sprite() / text() / button() / slider() / scrollLayout() / textInput() to set override_sorting=true with sorting_layer="UI". Override individual values with sorting_layer="World", order_in_layer=10, ignore_map_layer_check=true.

---

Common Types

Color

Color(r, g, b, a) — 0-1 floats. Static factories: Color.FromHexCode("#RRGGBB[AA]"), Color.FromRGBAInt(0xRRGGBBAA). Static values: Color.red, Color.white, Color.black, etc.

TransitionColorSet

NormalColor, HighlightedColor, PressedColor, SelectedColor, DisabledColor, ColorMultiplier, FadeDuration

TransitionRUIDSet

HighlightedSprite, PressedSprite, SelectedSprite, DisabledSprite

DataRef

{ DataId = "32-char hex" } -- image resource reference.

RectOffset

{ left, right, top, bottom } -- int32 rectangular margins.

---

Enums

All values are int32. Pass numeric values to builder patchComponent(...) or use the enum identifier in .mlua runtime code (e.g. TextAlignmentType.MiddleCenter).

Two "alignment" enums exist — do not confuse them:

- `AlignmentType` (0~15) — anchor presets for UITransformComponent.AlignmentOption. Builder string mapping ("top-left" ↔ 4, etc.) is in `ui-fundamentals.md` §6. Not duplicated here.

- `TextAlignmentType` / `ChildAlignmentType` (0~8) — 9-cell text/child alignment, defined below. Used by TextComponent.Alignment and any ChildAlignment field. Different enum from anchors above.

TextAlignmentType / ChildAlignmentType -- 9-cell alignment (0~8)

Used by TextComponent.Alignment and any ChildAlignment field. Same value mapping for both.

FontType -- Font

FontStyleType -- Font Style (bit flags, combinable)

OverflowType -- Text Overflow

Used by TextComponent.Overflow.

ImageType -- Image Rendering

Used by SpriteGUIRendererComponent.Type.

FillMethodType -- Fill Direction (for ImageType.Filled)

TransitionType -- Button Transition Effect

ButtonState

LayoutGroupType -- Layout Direction

Used by ScrollLayoutGroupComponent.Type.

ScrollBarVisibility

UITransformAxis

GridLayoutAxis / GridLayoutConstraint / GridLayoutCorner

GridLayoutAxis: Horizontal=0, Vertical=1 (child add direction). GridLayoutConstraint: Flexible=0, FixedColumnCount=1, FixedRowCount=2. GridLayoutCorner: UpperLeft=0, UpperRight=1, LowerLeft=2, LowerRight=3 (grid start position).

GridViewFixedType

Used by GridViewComponent.FixedType.

UIModeType -- UI Drawing Mode

Used by UITransformComponent.UIMode.

UIGroupType -- UI Group Type

Used by UIGroupComponent.GroupType.

MaskShape

Used by MaskComponent.Shape.

GradientModes

HorizontalScrollBarDirection / VerticalScrollBarDirection

HorizontalScrollBarDirection: LeftToRight=0, RightToLeft=1. VerticalScrollBarDirection: BottomToTop=2, TopToBottom=3.

UIAreaParticleType / UIBasicParticleType

UI particle preset enums. The builder handles preset names directly — pass numeric particle_type=... to areaParticle() / basicParticle(). Full numeric tables live in `../../msw-general/references/builder-protocol.md` §3.5. From runtime, use the enum identifiers (UIAreaParticleType.FogCalm, UIBasicParticleType.Firework).

Layout Recipes

A collection of layout templates based on this skill's CJS UIBuilder (scripts/msw_ui_builder.cjs; see `../../msw-general/references/builder-protocol.md` §3 for the call protocol — unified entry point).

Each recipe is copy-ready from file creation to placement. In actual use, change only path / size / color / RUID values to match your project.

---

Common Preparation

const { UIBuilder } = require("./scripts/msw_ui_builder.cjs");

• Coordinates: center origin, 1920x1080, Y-axis positive upward
• Default pivot: anchor-matched when omitted (top-left -> [0, 1], middle-center -> [0.5, 0.5])
• Edge formula with omitted pivot: pos = [margin, margin] with signs based on the anchor side

---

Recipe 1 — Basic HUD (Top-Left Score, Top-Right Minimap, Bottom-Left HP)

const b = new UIBuilder("DefaultGroup", 1, true);

b.panel("ScoreBox", { anchor: "top-left", pos: [20, -20], rect_size: [200, 60] });
b.text("ScoreBox/Label", "Score", {
  size: 24,
  color: "#FFFFFF",
  anchor: "middle-left",
  pos: [16, 0],
  alignment: 3,
});
b.text("ScoreBox/Value", "0", {
  size: 40,
  color: "#FFD700",
  bold: true,
  anchor: "middle-right",
  pos: [-16, 0],
  alignment: 5,
});

b.panel("MiniMap", { anchor: "top-right", pos: [-20, -20], rect_size: [180, 180] });
b.sprite("MiniMap/Frame", { anchor: "stretch", image_ruid: "<minimap-frame-ruid>" });

b.panel("HPBar", { anchor: "bottom-left", pos: [20, 20], rect_size: [220, 30] });
b.sprite("HPBar/Bg", { anchor: "stretch", color: "#1A1A1A", alpha: 0.8 });
b.sprite("HPBar/Fill", { anchor: "stretch", color: "#E53935" });
b.patchComponent("HPBar/Fill", "MOD.Core.SpriteGUIRendererComponent", {
  Type: 3,
  FillMethod: 0,
  FillOrigin: 0,
  FillAmount: 1.0,
});

b.write("ui/DefaultGroup.ui");

HP Update at Runtime

See `runtime-patterns.md` §3 HP Bar (Progress Bar). Key point: a single line self.fillImage.FillAmount = hp / maxHp. Property binding is auto-injected via b.write(path, { bind: {...} }).

---

Recipe 2 — Modal Confirmation Popup (Title + Message + OK/Cancel)

const b = new UIBuilder("PopupGroup", 10, false);

b.sprite("Dimmer", { anchor: "stretch", color: "#000000", alpha: 0.6, raycast: true });
b.panel("Panel", { anchor: "middle-center", pos: [0, 0], rect_size: [600, 400] });
b.sprite("Panel/Bg", { anchor: "stretch", color: "#2C2C2C" });
b.text("Panel/Title", "Confirm", {
  size: 48,
  color: "#FFFFFF",
  bold: true,
  anchor: "top-center",
  pos: [0, -50],
  rect_size: [560, 60],
  alignment: 4,
});
b.text("Panel/Message", "Are you sure?", {
  size: 28,
  color: "#DDDDDD",
  anchor: "middle-center",
  pos: [0, 20],
  rect_size: [520, 160],
  alignment: 4,
});
b.button("Panel/BtnOk", "OK", {
  rect_size: [180, 60],
  pos: [-110, 40],
  anchor: "bottom-center",
  font_size: 28,
});
b.button("Panel/BtnCancel", "Cancel", {
  rect_size: [180, 60],
  pos: [110, 40],
  anchor: "bottom-center",
  font_size: 28,
});

b.write("ui/PopupGroup.ui", {
  bind: {
    mlua: "RootDesk/MyDesk/UIPopup.mlua",
    props: {
      popupGroup: "Panel",
      btnOk: "Panel/BtnOk",
      btnCancel: "Panel/BtnCancel",
      message: "Panel/Message",
    },
  },
});

---

Recipe 3 — Toast (Auto-Dismissing Notification)

const b = new UIBuilder("ToastGroup", 20, false);

b.panel("Toast", { anchor: "bottom-center", pos: [0, 140], rect_size: [600, 80] });
b.sprite("Toast/Bg", { anchor: "stretch", color: "#1E1E1E", alpha: 0.9 });
b.text("Toast/Message", "", { size: 28, color: "#FFFFFF", anchor: "stretch", alignment: 4 });

b.write("ui/ToastGroup.ui");

For the mlua-side logic, use the Toast pattern from `runtime-patterns.md`.

---

Recipe 4 — Top Menu Bar (3 Tabs)

const b = new UIBuilder("MenuGroup", 5, false);

b.sprite("Dimmer", { anchor: "stretch", color: "#000000", alpha: 0.7, raycast: true });
b.panel("TopTabs", { anchor: "top-center", pos: [0, -60], rect_size: [1200, 80] });
b.sprite("TopTabs/Bg", { anchor: "stretch", color: "#1A1A1A" });

["Character", "Inventory", "Settings"].forEach((name, i) => {
  const x = -400 + i * 400;
  b.button(`TopTabs/Tab${i}`, name, { rect_size: [380, 70], pos: [x, 0], font_size: 24 });
  b.panel(`Content${i}`, { anchor: "middle-center", pos: [0, -40], rect_size: [1400, 800] });
});

b.write("ui/MenuGroup.ui");

Tab switching logic in mlua: for i, content in ipairs(self.contents) do content.Enable = (i == activeIdx) end.

---

Recipe 5 — Inventory Grid (GridView Virtualization)

const b = new UIBuilder("InventoryGroup", 7, false);

b.sprite("Dimmer", { anchor: "stretch", color: "#000000", alpha: 0.7, raycast: true });
b.panel("Window", { anchor: "middle-center", pos: [0, 0], rect_size: [900, 700] });
b.sprite("Window/Bg", { anchor: "stretch", color: "#2C2C2C" });
b.text("Window/Title", "Inventory", {
  size: 36,
  color: "#FFFFFF",
  bold: true,
  anchor: "top-center",
  pos: [0, -40],
  rect_size: [800, 50],
  alignment: 4,
});
b.button("Window/BtnClose", "X", {
  rect_size: [50, 50],
  pos: [-30, -30],
  anchor: "top-right",
  font_size: 24,
});

b.panel("Window/ItemTemplate", { anchor: "top-left", pos: [50, -50], rect_size: [80, 80] });
b.sprite("Window/ItemTemplate/Frame", { anchor: "stretch", image_ruid: "<slot-frame-ruid>" });
b.sprite("Window/ItemTemplate/Icon", { anchor: "middle-center", rect_size: [64, 64] });
b.text("Window/ItemTemplate/Count", "", {
  size: 20,
  color: "#FFFFFF",
  anchor: "bottom-right",
  pos: [-8, 8],
  rect_size: [40, 24],
  alignment: 5,
});
b.patch("Window/ItemTemplate", { enable: false });

b.panel("Window/Grid", { anchor: "stretch", rect_size: [800, 560] });
b.patchComponent("Window/Grid", "MOD.Core.UITransformComponent", {
  OffsetMin: { x: 50, y: 50 },
  OffsetMax: { x: -50, y: -100 },
});
b.addComponent("Window/Grid", "MOD.Core.GridViewComponent", {
  CellSize: { x: 90, y: 90 },
  FixedCount: 8,
  FixedType: 0,
  Spacing: { x: 6, y: 6 },
  UseScroll: true,
});

b.write("ui/InventoryGroup.ui");

OnRefresh Callback (Runtime)

See `runtime-patterns.md` §5 GridView Large List. Property binding injects two items — grid / itemTemplate — via b.write(path, { bind: {...} }).

Caution: OnRefresh is called frequently during scrolling. Do not call DataStorage; only query the in-memory cache.

---

Recipe 6 — Scroll Chat/Log (ScrollLayoutGroup, Small Scale)

const b = new UIBuilder("ChatGroup", 4, true);

b.panel("ChatBox", { anchor: "bottom-left", pos: [220, 220], rect_size: [400, 300] });
b.sprite("ChatBox/Bg", { anchor: "stretch", color: "#000000", alpha: 0.5 });
b.panel("ChatBox/List", { anchor: "stretch" });
b.patchComponent("ChatBox/List", "MOD.Core.UITransformComponent", {
  OffsetMin: { x: 10, y: 50 },
  OffsetMax: { x: -10, y: -10 },
});
b.addComponent("ChatBox/List", "MOD.Core.ScrollLayoutGroupComponent", {
  Type: 1,
  Spacing: 6,
  ScrollBarVisible: 1,
});
b.addComponent("ChatBox/List", "MOD.Core.MaskComponent", { Shape: 0 });

b.panel("ChatBox/InputArea", { anchor: "bottom-center", pos: [0, 20], rect_size: [380, 40] });
b.sprite("ChatBox/InputArea/Bg", { anchor: "stretch", color: "#222222" });
b.text("ChatBox/InputArea/Text", "", { size: 20, color: "#FFFFFF", anchor: "stretch", alignment: 3 });
b.addComponent("ChatBox/InputArea/Text", "MOD.Core.TextInputComponent", {
  PlaceHolder: "Type here...",
  LineType: 0,
  AutoClear: true,
});

b.write("ui/ChatGroup.ui");

Adding messages at runtime: Create Text entities as children of List via SpawnService; ScrollLayoutGroup auto-arranges them. Pin scroll to bottom: layoutGroup:SetScrollNormalizedPosition(1, 0).

---

Recipe 7 — Settings Slider List

const b = new UIBuilder("SettingsGroup", 7, false);

b.sprite("Dimmer", { anchor: "stretch", color: "#000000", alpha: 0.7, raycast: true });
b.panel("Window", { anchor: "middle-center", rect_size: [700, 600] });
b.sprite("Window/Bg", { anchor: "stretch", color: "#2C2C2C" });
b.text("Window/Title", "Settings", {
  size: 36,
  bold: true,
  anchor: "top-center",
  pos: [0, -40],
  rect_size: [600, 50],
  alignment: 4,
});

[
  ["BGMVol", "BGM Volume", 0, 1, 0.8],
  ["SFXVol", "SFX Volume", 0, 1, 1.0],
  ["UIScale", "UI Scale", 0.8, 1.5, 1.0],
].forEach(([key, label, minValue, maxValue, value], i) => {
  const y = -140 - i * 100;
  b.panel(`Window/Row${i}`, { anchor: "top-center", pos: [0, y], rect_size: [600, 80] });
  b.text(`Window/Row${i}/Label`, label, {
    size: 24,
    anchor: "middle-left",
    pos: [20, 0],
    rect_size: [180, 40],
    alignment: 3,
  });
  b.slider(`Window/Row${i}/Slider`, {
    min_val: minValue,
    max_val: maxValue,
    value,
    anchor: "middle-right",
    pos: [-120, 0],
    rect_size: [320, 30],
  });
  b.text(`Window/Row${i}/Value`, value.toFixed(2), {
    size: 22,
    anchor: "middle-right",
    pos: [-20, 0],
    rect_size: [80, 40],
    alignment: 5,
  });
});

b.button("Window/BtnClose", "Close", {
  rect_size: [200, 60],
  anchor: "bottom-center",
  pos: [0, 40],
  font_size: 26,
});

b.write("ui/SettingsGroup.ui");

---

Recipe 8 — Card-Like Clickable Tile

Use one b.button(...) entity when a repeated tile needs background, label, and click handling. This avoids separate sprite/text entities for every tile.

const b = new UIBuilder("BoardGroup", 3, true);

for (let i = 0; i < 12; i += 1) {
  const x = -330 + (i % 6) * 132;
  const y = 120 - Math.floor(i / 6) * 160;
  b.button(`Tile_${i}`, "", {
    rect_size: [104, 144],
    pos: [x, y],
    anchor: "middle-center",
    font_size: 30,
    color: "#FFFFFF",
  });
  b.patchComponent(`Tile_${i}`, "MOD.Core.SpriteGUIRendererComponent", {
    Color: { r: 0.05, g: 0.12, b: 0.28, a: 1.0 },
  });
}

b.write("ui/BoardGroup.ui");

Runtime update pattern:

method void SetTileFace(TextComponent label, SpriteGUIRendererComponent sprite, string text, boolean faceUp)
    if faceUp then
        sprite.Color = Color(1, 1, 1, 1)
        label.Text = text
    else
        sprite.Color = Color(0.05, 0.12, 0.28, 1)
        label.Text = ""
    end
end

Use this for card games, board cells, inventory slots, quick slots, tabs, and same-shape menu items.

---

Recipe Selection Guide

---

Common Finishing Steps

After running any recipe:

1. Binding Injection — Auto-inject entity UUIDs into the corresponding .mlua property defaults via b.write(filepath, { bind: { mlua, props } }) or b.injectBindings(mlua_path, props). See `../../msw-general/references/builder-protocol.md` §3.6 Binding Injection for details. 2. Preview Check — Visualize the layout with scripts/preview_ui_layout.cjs 3. Maker Refresh — Reflect changes in the engine via MCP refresh 4. Play Mode Verification — Verify on actual resolution and mobile scale

Snapshot:

UIBuilder.snapshot("ui/PopupGroup.ui");   // Backup right before write

UI Runtime Patterns

.mlua patterns for controlling UI from scripts. These are runtime code, separate from .ui file authoring (which goes through the builder — see `../../msw-general/references/builder-protocol.md` §3, the unified entry point).

---

1. Popup Dialog

A modal popup with a message and OK / cancel buttons.

@Logic
@ExecSpace("ClientOnly")
script UIPopup extends Logic

    property TextComponent message = "uuid-text"
    property ButtonComponent btnOk = "uuid-btn-ok"
    property ButtonComponent btnCancel = "uuid-btn-cancel"
    property Entity popupGroup = "uuid-group"

    method void OnBeginPlay()
        self.popupGroup.Enable = false
    end

    method void Open(string msg, any onOk, any onCancel)
        self.onOk = onOk
        self.onCancel = onCancel
        self.message.Text = msg
        self.popupGroup.Enable = true

        self.okHandler = self.btnOk.Entity:ConnectEvent(ButtonClickEvent, function()
            if self.onOk ~= nil then self.onOk() end
            self:Close()
        end)
        self.cancelHandler = self.btnCancel.Entity:ConnectEvent(ButtonClickEvent, function()
            if self.onCancel ~= nil then self.onCancel() end
            self:Close()
        end)
    end

    method void Close()
        self.btnOk.Entity:DisconnectEvent(ButtonClickEvent, self.okHandler)
        self.btnCancel.Entity:DisconnectEvent(ButtonClickEvent, self.cancelHandler)
        self.popupGroup.Enable = false
    end

    method void OnEndPlay()
        self:Close()
    end
end

---

2. Toast Message

A notification that fades out after a fixed duration.

@Logic
@ExecSpace("ClientOnly")
script UIToast extends Logic

    property TextComponent message = "uuid-text"
    property Entity toastGroup = "uuid-group"
    property number duration = 2
    property number fadeDuration = 0.3

    method void OnBeginPlay()
        self.toastGroup.Enable = false
    end

    method void ShowMessage(string msg)
        self.message.Text = msg
        self.toastGroup.Enable = true

        local canvasGroup = self.toastGroup.CanvasGroupComponent
        canvasGroup.GroupAlpha = 1

        if self.timerId then
            _TimerService:ClearTimer(self.timerId)
        end

        local time = 0
        local preTime = _UtilLogic.ElapsedSeconds

        self.timerId = _TimerService:SetTimerRepeat(function()
            local delta = _UtilLogic.ElapsedSeconds - preTime
            time = time + delta
            preTime = _UtilLogic.ElapsedSeconds

            if time >= self.duration + self.fadeDuration then
                canvasGroup.GroupAlpha = 0
                self.toastGroup.Enable = false
                _TimerService:ClearTimer(self.timerId)
                self.timerId = nil
            elseif time >= self.duration then
                canvasGroup.GroupAlpha = 1 - (time - self.duration) / self.fadeDuration
            end
        end, 1/60)
    end

    method void OnEndPlay()
        if self.timerId then
            _TimerService:ClearTimer(self.timerId)
        end
    end
end

---

3. HP Bar (Progress Bar)

Implement an HP bar with SpriteGUIRenderer's Filled type.

@Component
@ExecSpace("ClientOnly")
script HPBar extends Component

    property SpriteGUIRendererComponent fillImage = "uuid-fill"
    property TextComponent hpText = "uuid-text"

    method void UpdateHP(number current, number max)
        local ratio = current / max
        ratio = math.max(0, math.min(1, ratio))
        self.fillImage.FillAmount = ratio
        self.hpText.Text = tostring(math.floor(current)) .. " / " .. tostring(math.floor(max))

        -- color transition: green -> yellow -> red
        if ratio > 0.5 then
            self.fillImage.Color = Color(0, 1, 0, 1)
        elseif ratio > 0.2 then
            self.fillImage.Color = Color(1, 1, 0, 1)
        else
            self.fillImage.Color = Color(1, 0, 0, 1)
        end
    end
end

Note: Set the SpriteGUIRenderer Type to Filled(3) and FillMethod to Horizontal(0).

---

4. Scroll List + Item Cloning

Hide a template and add items via Clone.

@Logic
@ExecSpace("ClientOnly")
script ScrollList extends Logic

    property Entity itemTemplate = "uuid-template"
    property ScrollLayoutGroupComponent scrollLayout = "uuid-scroll"

    method void OnBeginPlay()
        self.itemTemplate:SetEnable(false)  -- hide template
        self.items = {}
    end

    method void AddItem(string text)
        local clone = self.itemTemplate:Clone("Item_" .. #self.items)
        clone:SetEnable(true)
        clone.TextComponent.Text = text
        table.insert(self.items, clone)
    end

    method void ClearAll()
        for _, item in ipairs(self.items) do
            item:Destroy()
        end
        self.items = {}
    end

    method void ScrollToBottom()
        self.scrollLayout:SetScrollNormalizedPosition(UITransformAxis.Vertical, 0.0)
    end

    method void OnEndPlay()
        self:ClearAll()
    end
end

---

5. GridView Large List

For 100+ items, use GridView instead of ScrollLayout.

@Logic
@ExecSpace("ClientOnly")
script InventoryGrid extends Logic

    property GridViewComponent gridView = "uuid-gridview"

    method void OnBeginPlay()
        self.data = {}
        -- initialize data
        for i = 1, 200 do
            table.insert(self.data, "Item " .. tostring(i))
        end

        self.gridView.TotalCount = #self.data
        self.gridView.OnRefresh = function(index, entity)
            -- index is 0-based
            entity.TextComponent.Text = self.data[index + 1]
            entity.SpriteGUIRendererComponent.Color = Color.white
        end
        self.gridView.OnClear = function(index, entity)
            -- clean up items that scrolled off-screen (optional)
        end
        self.gridView:Refresh(true, true)
    end

    method void RefreshData()
        self.gridView.TotalCount = #self.data
        self.gridView:Refresh(false, true)
    end
end

---

6. Tab UI (Toggle Group)

Activate only one tab at a time.

@Logic
@ExecSpace("ClientOnly")
script TabUI extends Logic

    property Entity tab1Content = "uuid-content1"
    property Entity tab2Content = "uuid-content2"
    property Entity tab3Content = "uuid-content3"
    property ButtonComponent tab1Btn = "uuid-btn1"
    property ButtonComponent tab2Btn = "uuid-btn2"
    property ButtonComponent tab3Btn = "uuid-btn3"

    method void OnBeginPlay()
        self.tabs = {self.tab1Content, self.tab2Content, self.tab3Content}
        self.tab1Btn.Entity:ConnectEvent(ButtonClickEvent, function() self:SelectTab(1) end)
        self.tab2Btn.Entity:ConnectEvent(ButtonClickEvent, function() self:SelectTab(2) end)
        self.tab3Btn.Entity:ConnectEvent(ButtonClickEvent, function() self:SelectTab(3) end)
        self:SelectTab(1)
    end

    method void SelectTab(number index)
        for i, tab in ipairs(self.tabs) do
            tab.Enable = (i == index)
        end
    end
end

---

7. Runtime Z-Order / Sibling Reorder

Use _UILogic:SetSiblingIndex(targetUITransform, index) on the client to reorder UI siblings at runtime. There is no entity.SetAsLastSibling() pattern in the public mlua API; reorder through the target entity's UITransformComponent. The index is 1-based; a deliberately high index moves the target to the front among siblings.

@Logic
script UIStackOrder extends Logic

    property UITransformComponent draggingCard = nil

    @ExecSpace("ClientOnly")
    method void BringToFront(UITransformComponent target)
        if target == nil then
            return
        end

        _UILogic:SetSiblingIndex(target, 1000000)
    end

end

Use this when creation order is not enough:

• Card/table stacks where later gameplay changes which card should receive input first.
• Dragging an entity that must render above its siblings while held.
• Popup-over-popup flows within the same UIGroup.

Prefer build-time displayOrder for static layouts. Use runtime sibling reorder only for dynamic overlap.

---

8. Drag and Drop

Implement drag with UITouchReceiveComponent.

@Component
@ExecSpace("ClientOnly")
script Draggable extends Component

    method void OnBeginPlay()
        self.dragHandler = self.Entity:ConnectEvent(UITouchDragEvent, self.OnDrag)
    end

    method void OnDrag(UITouchDragEvent event)
        local transform = self.Entity.UITransformComponent
        local pos = transform.anchoredPosition
        transform.anchoredPosition = Vector2(
            pos.x + event.TouchDelta.x,
            pos.y + event.TouchDelta.y
        )
    end

    method void OnEndPlay()
        self.Entity:DisconnectEvent(UITouchDragEvent, self.dragHandler)
    end
end

---

9. Text Input + Chat

@Logic
@ExecSpace("ClientOnly")
script ChatUI extends Logic

    property TextInputComponent chatInput = "uuid-input"
    property TextComponent chatLog = "uuid-log"
    property ScrollLayoutGroupComponent scrollLayout = "uuid-scroll"
    property Entity messageTemplate = "uuid-template"

    method void OnBeginPlay()
        self.messageTemplate:SetEnable(false)
        self.submitHandler = self.chatInput.Entity:ConnectEvent(
            TextInputSubmitEvent, self.OnSubmit)
    end

    method void OnSubmit(TextInputSubmitEvent event)
        local text = event.text
        if text == "" then return end

        local msg = self.messageTemplate:Clone("Msg_" .. self.msgCount)
        msg:SetEnable(true)
        msg.TextComponent.Text = text
        self.msgCount = self.msgCount + 1

        -- scroll to bottom
        self.scrollLayout:SetScrollNormalizedPosition(UITransformAxis.Vertical, 0.0)
    end

    method void OnEndPlay()
        self.chatInput.Entity:DisconnectEvent(TextInputSubmitEvent, self.submitHandler)
    end
end

---

10. Cooldown Display (Radial FillAmount)

@Component
@ExecSpace("ClientOnly")
script CooldownUI extends Component

    property SpriteGUIRendererComponent cooldownOverlay = "uuid-overlay"
    property TextComponent cooldownText = "uuid-text"

    method void StartCooldown(number duration)
        self.cooldownOverlay.Entity:SetEnable(true)
        local time = 0
        local preTime = _UtilLogic.ElapsedSeconds

        self.timerId = _TimerService:SetTimerRepeat(function()
            local delta = _UtilLogic.ElapsedSeconds - preTime
            time = time + delta
            preTime = _UtilLogic.ElapsedSeconds

            local remaining = duration - time
            if remaining <= 0 then
                self.cooldownOverlay.FillAmount = 0
                self.cooldownOverlay.Entity:SetEnable(false)
                self.cooldownText.Text = ""
                _TimerService:ClearTimer(self.timerId)
                return
            end

            self.cooldownOverlay.FillAmount = remaining / duration
            self.cooldownText.Text = tostring(math.ceil(remaining))
        end, 1/60)
    end

    method void OnEndPlay()
        if self.timerId then
            _TimerService:ClearTimer(self.timerId)
        end
    end
end

Setup: SpriteGUIRenderer Type=Filled(3), FillMethod=Radial360(4), translucent black.

---

11. World UI (Overhead Name Tag)

Place UI at world coordinates with UIModeType.World.

@Component
@ExecSpace("ClientOnly")
script NameTag extends Component

    property TextComponent nameText = "uuid-text"

    method void OnBeginPlay()
        self.nameText.Text = self.Entity.Name
    end

    method void OnUpdate(number dt)
        -- follow the entity position
        local worldPos = self.Entity.TransformComponent.WorldPosition
        local uiTransform = self.nameText.Entity.UITransformComponent
        local screenPos = _UILogic:WorldToScreenPosition(Vector2(worldPos.x, worldPos.y + 1.5))
        local uiPos = _UILogic:ScreenToUIPosition(screenPos)
        uiTransform.anchoredPosition = uiPos
    end
end

---

Event Handler Skeletons

Quick skeletons for the most common UI events. Always store the handler return and DisconnectEvent in OnEndPlay.

Button click

property ButtonComponent btnOk = "uuid"
property any clickHandler = nil

@ExecSpace("ClientOnly")
method void OnBeginPlay()
    self.clickHandler = self.btnOk.Entity:ConnectEvent(ButtonClickEvent, self.OnClick)
end

method void OnClick() end

method void OnEndPlay()
    self.btnOk.Entity:DisconnectEvent(ButtonClickEvent, self.clickHandler)
end

Text input

property TextInputComponent input = "uuid"
property any submitHandler = nil

method void OnBeginPlay()
    self.submitHandler = self.input.Entity:ConnectEvent(TextInputSubmitEvent, self.OnSubmit)
end

method void OnSubmit(TextInputSubmitEvent event)
    local text = event.text
end

Slider

property SliderComponent slider = "uuid"
property any sliderHandler = nil

method void OnBeginPlay()
    self.sliderHandler = self.slider.Entity:ConnectEvent(SliderValueChangedEvent, self.OnValueChanged)
end

method void OnValueChanged(SliderValueChangedEvent event)
    local value = event.Value
end

Touch / drag

-- attach UITouchReceiveComponent on the entity first (use the builder's touchReceive())
entity:ConnectEvent(UITouchDownEvent, handler)
entity:ConnectEvent(UITouchDragEvent, handler)
entity:ConnectEvent(UITouchUpEvent, handler)

---

Runtime UI Caveats

Hard rules that show up as "UI doesn't respond" or "Server can't see UI". Memorize.

Hard constraints (silent failure if broken)

1. UI entities are client-only. If an @Component on a UI entity defines @ExecSpace("Server"), @ExecSpace("ServerOnly"), or @ExecSpace("Multicast") methods, the runtime emits '<entity>' is client only. '<component>.<method>' doesn't work normally. and RPCs do not work. @Sync properties are also not synchronized. Route UI-to-server communication through an @Logic outside the UI entity, or a map entity @Component, then call the Server RPC. 2. No UI entity access from server. Referencing a UI entity in @ExecSpace("Server") / @ExecSpace("ServerOnly") returns nil. For server-to-UI updates, route through an @ExecSpace("Client") RPC. 3. All UI Logic / Component must declare `@ExecSpace("ClientOnly")` — default ExecSpace doesn't guarantee client-only execution. 4. Do not attach UI components (ButtonComponent, etc.) to map / world entities — UI-only. Trying to attach via builder/runtime silently misbehaves. 5. `UIGroup DefaultShow=false` — not visible until Enable=true. Also, if DefaultShow=false AND the group has no controller script outside to flip Enable, scripts inside the group never run OnBeginPlay / OnUpdate (typical symptom: "level-up popup never shows"). See `ui-hierarchy.md` for the standard pattern.

Movement / fade / visibility

6. Move via `anchoredPosition` — never set Position directly (engine treats it as a derived cache, your writes get overwritten). 7. Fade via `CanvasGroupComponent.GroupAlpha` — don't tween individual element alphas. One write covers the whole subtree consistently. 8. Show/hide via `Enable` — popupGroup.Enable = true/false. Visible = false keeps clicks alive and OnUpdate running (see `ui-hierarchy.md` §5).

Resource cleanup

9. Always `DisconnectEvent` in `OnEndPlay` — otherwise event handlers leak across script reloads / popup re-opens. 10. `_TimerService:ClearTimer` in `OnEndPlay` — store the timer ID returned by SetTimerRepeat and clear it.

Animation timing

11. Use a 1/60 repeating timer for per-frame UI animation (_TimerService:SetTimerRepeat(fn, 1/60)). MSW doesn't expose a global UI Update hook. 12. Measure delta with `_UtilLogic.ElapsedSeconds` — diff between frames, never assume the timer interval is exact.

Style 1 — RUID Map

Use these ImageRUID.DataId values when applying this template's visual style.

UI Frame / Panel Backgrounds

Buttons

Icons & Decorations

Items & Slots

Selection & Indicators

Toast

Style 1 (Black) — UI Structure

Format: Name | Alignment | (x, y) | WxH | [Components] | (state)

============================================================
  ButtonGroup.ui  (13 entities)
============================================================
ButtonGroup | GroupOrder=3 | StretchAll | 1920x1080 | [UIGroupComponent]
  1 | Center | (-829, 196) | 235x88 | [Button, script.Popupbutton]
    UIText | Center | (-1, 7) | 100x100 | [TextComponent] | "Popup 1"
  2 | Center | (-829, 97) | 235x88 | [Button, script.Popupbutton]
    UIText | Center | (-1, 7) | 100x100 | [TextComponent] | "Popup 2"
  3 | Center | (-829, -4) | 235x88 | [Button, script.Popupbutton]
    UIText | Center | (-1, 7) | 100x100 | [TextComponent] | "Popup 3"
  4 | Center | (-829, -104) | 235x88 | [Button, script.Popupbutton]
    UIText | Center | (-1, 7) | 100x100 | [TextComponent] | "Popup 4"
  5 | Center | (-829, -201) | 235x88 | [Button, script.Popupbutton]
    UIText | Center | (-1, 7) | 100x100 | [TextComponent] | "Popup 5"
  6 | Center | (-829, -295) | 235x88 | [Button, script.Popupbutton]
    UIText | Center | (-1, 7) | 100x100 | [TextComponent] | "Popup 6"

============================================================
  DefaultGroup.ui  (3 entities)
============================================================
DefaultGroup | GroupOrder=1 | StretchAll | 1920x1080 | [UIGroupComponent] | (disabled)
  UIChat | TopLeft | (369, -252) | 698x439 | [ChatComponent]
  UIJoystick | BottomLeft | (310, 230) | 200x200 | [JoystickComponent]

============================================================
  HUDGroup.ui  (22 entities)
============================================================
HUDGroup | GroupOrder=0 | StretchAll | 1920x1080 | [UIGroupComponent]
  QuestHUD | TopCenter | (-486, -25) | 465x220 | [Button]
    QuestDescription | StretchAll | (1, -28) | 463x165 | [TextComponent] | "Defeat Orange Mushroom  0/10
Defeat Slime 0/10"
    Title | HStretchTop | 465x57 | [TextComponent] | "Main Quest"
    bg_title | HStretchTop | (-0, -0) | 465x55
  UIMatch | TopCenter | (90, -38) | 540x340
    Title | HStretchTop | 510x70 | [TextComponent] | "Mini Game Open!"
    img_pattern | StretchAll | 510x310
    matchBtn | HStretchBottom | (81, 38) | 300x70 | [Button]
    matchCancelBtn | HStretchBottom | (81, 38) | 300x70 | [Button]
    textMatchGame | HStretchTop | (0, -103) | 510x50 | [TextComponent] | "Mini Game Name"
    textMatchInfo | HStretchTop | (0, -148) | 510x50 | [TextComponent] | "Max Players: 1~10"
    textRecommendedLevel | HStretchTop | (0, -193) | 510x50 | [TextComponent] | "Recommended Level: LV 5 ↑"
    textWaitInfo | BottomLeft | (43, 43) | 157x61 | [TextComponent] | "0"
    timer | TopLeft | (31, -20) | 82x91

============================================================
  PopupGroup.ui  (131 entities)
============================================================
PopupGroup | GroupOrder=4 | StretchAll | 1920x1080 | [UIGroupComponent]
  AchieveUI | Center | (0, -0) | 1408x680 | (disabled)
    Panel_slot | StretchAll | (0, -35) | 1328x530 | [GridViewComponent]
    TitlePanel | HStretchTop | 1408x100
  BasicPopup | Center | (8, 5) | 981x508 | (disabled)
    PopupBtnCancel | Center | (206, -155) | 415x105 | [Button, TextComponent] | "Cancel"
    PopupBtnOK | Center | (-206, -155) | 415x105 | [Button, TextComponent] | "OK"
    PopupMessage | Center | (0, 80) | 780x260 | [TextComponent] | "Popup Message"
    deco_line | HStretchCenter | (0, -70) | 945x2
    img_deco | StretchAll | (0, -0) | 955x482
    img_pattern | StretchAll | 951x478
  InventoryUI | Center | (-32, -11) | 740x1046 | (disabled)
    BottomPanel | HStretchBottom | (0, 13) | 714x80
    CategoryPanel | HStretchTop | (0, -124) | 646x88 | [ScrollLayout]
    ContentPanel | StretchAll | (40, 93) | 660x718 | [ScrollLayout]
    TopPanel | HStretchTop | 732x97
  MonsterDexUI | Center | (0, -18) | 1455x1066 | (disabled)
    AchieveBG | HStretchBottom | (0, 60) | 1351x17
    CategoryPanel | TopLeft | (62, -124) | 602x86 | [ScrollLayout]
    MonsterDexBG | StretchAll | (0, 10) | 1455x1046
    Panel_info | TopRight | (-62, -124) | 700x829
    Panel_slot | StretchAll | (40, 103) | 615x728
    TitlePanel | HStretchTop | 1455x100
  QuestUI | Center | (0, -26) | 1376x954 | (disabled)
    LeftPanel | StretchAll | (-344, -38) | 623x811 | [ScrollLayout]
    QuestUITitle | HStretchTop | 1376x97
    RightPanel | VStretchRight | (-366, -48) | 706x831
  ShopUI | Center | (-14, 31) | 1600x800 | (disabled)
    CategoryPanel | VStretchLeft | (43, -115) | 200x642 | [ScrollLayout]
    ContentsPanel | StretchAll | (-43, -115) | 1277x642 | [ScrollLayout]
    TopPanel | HStretchTop | 1592x97

============================================================
  ToastGroup.ui  (2 entities)
============================================================
ToastGroup | GroupOrder=2 | hidden | StretchAll | 1920x1080 | [UIGroupComponent] | (disabled)
  Toast_message | TopCenter | (0, -64) | 210x79 | [TextComponent] | "message"

Style 2 — RUID Map

Use these ImageRUID.DataId values when applying this template's visual style.

UI Frame / Panel Backgrounds