Re-skin and rearrange the in-game interface, panels, nameplates, and top bar.
UI & HUD Editor
The UI editor is where your game stops looking like the engine and starts looking like your game. It controls the whole interface, from the first screen a player ever sees to the last: the login screen, the theme, scale, where elements sit, the minimap, how every panel is chromed, what the top bar contains, how names float over characters' heads, the loading screen, and reusable presets.
Opening, saving, publishing
Open it from Settings → UI / HUD in the studio. It's one window with thirteen tabs (below). Everything writes into a single project setting.
- Save is publish — there's no separate step. Saving writes the config and live-syncs it to the running game server, which pushes it to connected players immediately.
- An Unsaved / Saved pill shows state; Ctrl/Cmd+S saves, Esc closes. Closing with unsaved changes prompts you to discard.
- Revert restores the last-loaded version; Reset to default clears theme overrides.
> One tab, one job. Layout is where things sit. Bars is how the health / mana / stamina / XP bars look. Indicators is the marks drawn on the ground in the world. Bar colors and the target ring used to be buried inside the Layout inspector; they now have their own tabs, and Layout carries placement only.
Theme
One accent-driven theme flows through the entire HUD — panels, bars, buttons and highlights read theme tokens rather than hardcoded colors, so changing one value re-skins the game. A live mock-HUD preview updates as you edit.
- Quick palettes — one click applies Default, Ember, Verdant, Royal, Frost, or Rose Gold.
- Tokens, grouped and each with a swatch + free CSS value + reset:
- Panel Images (global) — a background image for every panel (Cover / Contain / Stretch / Tile) and a 9-slice frame with an adjustable slice size.
Scale & Density
Three live controls for overall HUD sizing:
- UI scale — 75–150% (zooms panel surfaces).
- Font scale — 75–150%.
- Density — Compact / Cozy (default) / Comfortable spacing.
Layout
Where every always-on HUD element sits. Live preview embeds the real game HUD so you drag the actual elements; it falls back to a simple 16:9 canvas (with an amber banner) when the client isn't reachable. Use ⛶ Edit layout for full-screen, real-aspect editing, and Snap for grid alignment.
Placeable elements include: Top Bar, Minimap, Ability Bar, Health / Mana / Stamina bars, XP bar, Territory panel, Level Badge (off by default), Survival bars, Status Effects, Stealth indicator, Quest tracker, Achievement tracker, Chat, and Mount button. Your custom menus appear here too.
Per-element inspector: Anchor (7 positions), X / Y offset, Scale (50–250%), Visible toggle, and per-element show/hide. (A Lock toggle exists but only protects the editor canvas — players can't move the HUD in game, so lock has no in-game effect.)
Anchors — the thing to understand
An anchor is the corner or edge an element's X / Y are measured from. Bottom-right, 48, 16 means "48 px in from the right edge, 16 px up from the bottom" — on every screen, at every resolution. That's the whole point: players don't all run 1920×1080, and an element measured from the nearest corner stays put while one measured from a far corner drifts.
The editor makes this visible and hard to get wrong:
| Behaviour | What it does |
|---|---|
| Anchor marker | Selecting an element draws a ring on its anchor point and a dashed tether to the box, in both the live preview and the canvas — you can see what the offsets are measured from |
| Changing the anchor doesn't move the element | Pick a different anchor and the element stays exactly where it is; only the X / Y numbers change to measure from the new corner |
| Auto anchor (on by default) | Drop an element and it re-anchors to the region of the screen it landed in, keeping it where you put it while shrinking the offsets to a short hop. Turn it off in the toolbar to keep an anchor you picked deliberately |
> Small offsets are good offsets. A box anchored top-left but dragged to the bottom-right carries offsets near 1900 × 1000, and every screen that isn't 1920×1080 lands it somewhere else. Auto anchor exists so you never have to think about that.
What you place is what ships. Elements are positioned by their real measured box, so a right-anchored element's right edge lands exactly the distance you set, whatever that element's true width happens to be. The live preview is the exact article; the simple canvas draws each element at the size it last measured in the live preview (falling back to a nominal size for elements it has never seen).
Bar colors aren't here — a bar's placement is Layout, its look is the Bars tab, and the inspector links straight across.
Bars
How the health, mana, stamina, XP and territory bars look. Pick a bar on the left, style it on the right, and the preview above the controls draws it at its authored size in the exact layer order the game uses.
Every field is an override on top of the engine default — an untouched bar renders exactly as it always has, and Reset style puts any bar back.
| Control | Options |
|---|---|
| Use theme accent | Fill the bar with the theme accent, so it tracks the theme |
| Dynamic color by value | Green → amber → red as the value drops |
| Fill / Track color | Flat fill and background colors |
| Gradient fill | From / To colors (overrides flat fill) |
| Shape | Flat / Rounded / Pill / Segments |
| Segments | 2–20 (when shape = Segments) |
| Height / Width | 4–128 px / 40–960 px |
| Border | Color + width (0–8 px) |
| Fill texture | A tiling image drawn over the fill |
| Label | Value/Max, Value, Percent, or None |
| Opacity | 10–100% |
Bar art
The controls above style a rectangle. These take a bar to authored art — an ornate frame over the fill, a crest or portrait on the end, a slanted body — without touching code.
| Control | What it does |
|---|---|
| Frame | Art drawn over the bar, 9-sliced so ornate corners keep their shape at any width. The middle stays transparent and the fill shows through |
| Frame slice | The 9-slice inset of that art, in source px (0–128). Set it to the width of your frame's decorated border |
| Fill inset | How far the bar body sits inside the frame art (0–48 px) — ornate frames usually need a few px so the fill doesn't cover the border |
| Track art | Art for the empty part of the bar, stretched under the fill |
| End cap | A crest, portrait or heart medallion at one end of the bar |
| Cap side / size / overlap | Which end it sits on, its box in px (8–192), and how far it laps over the bar body (negative pulls it away) |
| Fill direction | Left → right, right → left, bottom → top, or top → bottom. The fill gradient follows, so a vertical bar isn't shaded sideways |
| Slant | Skews the bar into a parallelogram, −35° to 35°. The label stays upright |
| Glossy highlight | The engine's built-in sheen over the fill. Turn it off when your own art already carries the lighting |
To build a framed bar with a crest (the common MMO look): set Frame to your border art and Frame slice to its border width, nudge Fill inset until the fill sits inside the frame, set End cap to the crest with Cap size ≈ the bar's height plus a bit, and turn Glossy highlight off. Set a slant if the art is angled.
The XP bar always shows its exact progress on hover — percentage to one decimal, plus XP into the level and what the level costs — regardless of the Label setting. A thin rail has no room for a label, and "Value" or "None" hides the percentage entirely, so the reading players ask for most lives one hover away instead of being styled out.
Gotchas
- Art is media, not an upload field. Frame, track, cap and texture all pick from the Media Manager — upload there first.
- A frame with no slice looks stretched.
Frame sliceat 0 stretches the whole image across the bar; set it to your art's border thickness. - Cap art can overflow the element's box. That's intended (a medallion should hang off the end), but leave room on the Layout tab so it doesn't collide with a neighbour.
- Height and width are the bar's, not the art's. Frame and track art stretch to fit; the cap uses its own size.
Top Bar
The strip of buttons across the top. The preview shows players' exact render order.
- Built-in buttons — reorder, show/hide, and per button: Label override, Icon (a 29-icon grid or your own image), and keep in the "More" (⋯) menu.
- Add custom buttons — with a label, icon, group, and a When clicked action: open/toggle a panel, run a chat command (e.g. /who), or do nothing.
- Bar chrome — Height (28–96 px), Background (any CSS color/gradient/image), Border color, Floating buttons (drops all bar chrome and chips each button), and Show button labels (default is icon-only).
- Bar info clusters — toggle Silver, Gold, PvP badge, Weather, Time of day, Latency individually.
Nameplates
Authored per entity type — a base for all entities plus overrides for Players, Enemies, NPCs, and Pets — all sharing one renderer. Boolean options are tri-state (Inherit / Show / Hide) so overrides layer cleanly.
| Module | Options |
|---|---|
| Visibility | Nameplate, name text, health bar, level, guild tag |
| Placement | Plate vertical offset, name offset, and "hide beyond N tiles" |
| Name text | Font size, color, outline, and a per-scope font family (including uploaded fonts) |
| Bars | Width / height, Smooth pill vs Segmented cells, HP color mode (single or by-percent), and — for players — mana & stamina bars plus module reorder |
| Cast bar | Overhead progress + ability name while casting/channeling, with its own color |
| Crest / badge | Content (initial letter / level number / uploaded image), shape (Shield, Circle, Diamond, Tag, Hexagon, Banner), body & ring colors |
| Frame / plate | None / Match HUD theme / Soft slab / Ornate |
| Skins | Save the whole assembly as a reusable skin and apply it elsewhere |
Indicators
The marks the game draws on the ground in the world rather than on the HUD frame. They follow an entity or the cursor, so there's nothing to place — styling only. Both are fully optional: Reset clears a block entirely and the engine default comes back.
Selection indicator — the mark under the NPC or enemy a player has targeted.
| Field | What it does |
|---|---|
| Enabled | Off removes the mark entirely |
| Style | Ground ring / Glow pool / Overhead marker |
| Color | The mark's color |
| Opacity | 20–100% |
| Size | 0.5×–2× |
Ability range indicator — two marks drawn while a player hovers or keyboard-focuses an ability on the action bar: a reach ring showing how far it can be used, and an area footprint showing what it hits. The footprint is traced from the ability's own AoE shape, so a cone shows as a cone.
| Field | What it does |
|---|---|
| Enabled | Off hides both marks |
| Style | Ring (outline + faint wash) / Filled (solid wash) / Dashed (outline only) |
| Color | The reach ring's color — a per-ability color overrides it |
| Outline / Fill opacity | The ring's line (10–100%) and wash (0–60%) |
| Thickness | Ring line width, 1–6 px |
| Also show while casting | Keeps the marks up during the cast, not just on hover |
| Show area footprint | Turns the AoE shape off, leaving just the reach ring |
| Harmful / Helpful color | The footprint is colored by intent, so a player reads danger without parsing it |
| Footprint outline / fill | The shape's line (10–100%) and wash (0–70%) |
Hover Cursors
The cursor is already pointing at the thing, so it is the cheapest place to say what that thing is: a sword over an enemy, a hand over an NPC, a pick over a rock.
Author it in UI Editor → Hover Cursors. A shared cursor applies everywhere, and each kind — Players, Mobs, NPCs, Pets, Mounts, Resource Nodes, Dropped Items, Portals, Crafting Stations — can override it.
| Field | What it does |
|---|---|
| Enable hover cursors | Off keeps every authored image but uses the system cursor in game |
| Image | The cursor art. 32×32 or smaller reads best; anything much larger is refused by browsers |
| Hotspot X / Y | Which pixel of the image actually points, measured from its top-left. A sword tip at the bottom-left wants (0, 31); a crosshair wants its centre |
| Use shared | Drops a kind's override so it inherits the shared cursor again |
Overrides inherit field by field: set one shared image and nudge only the hotspot for the kind whose art sits differently. The preview beside each row marks the hotspot with a red dot, which is the part that is easy to get wrong.
Gotchas
- A hotspot outside the image is rejected by the browser and the cursor silently falls back to the default. Values are clamped to 0–128 on save, but keep them inside your art.
- Leave a row empty for the ordinary cursor. An un-authored project uses the system cursor everywhere — nothing to turn off.
- Cursors are part of the UI customization document, so they reach players on the next UI config publish, like nameplates.
Minimap
- Appearance — on/off, Shape (Square/diamond or Circle), Anchor, Size (80–480 px), Opacity, Border color, Zoom (0 = auto-fit).
- Blips — toggle Players, Party, Enemies, NPCs, Resource nodes, Portals.
- Fog of war — Reveal mode (Always visible / Reveal as explored / Event-driven), fog color & opacity, and explore radius. Fog is also driven by "Reveal Map" / "Set Map Fog" event commands; explored tiles are remembered per character.
Panels
Around 37 catalogued panels — Inventory, Character, Skills, Abilities, Loadout, Bank, Chest, Market, NPC Shop, Mail, Trade, Guild, Party, Quest Log, Achievements, Crafting, Build, Settings, Boss Bar, and more — each with per-panel appearance:
| Control | Effect |
|---|---|
| Panel enabled | Turn a panel off entirely (hides it and its top-bar button) |
| Accent color | Borders, highlights, emphasis inside the panel |
| Corner radius | 0–28 px |
| Opacity | 35–100% (ignored when a background image is set) |
| Background image | With a Fit mode (Cover / Contain / Stretch / Tile) |
| 9-slice frame | A scalable ornate border with an adjustable slice |
A Reset appearance button puts any panel back; untouched panels render exactly as before. Panels gated by a feature flag say so in their inspector.
Deep inspectors — a few panels expose gameplay-shaping options with a live preview:
- Inventory — inventory & guest slot counts, bag columns, a drag-arrange equipment layout (show/hide slots, custom slots, placeholder art), slot size, card layout, and more. The in-game panel runs the full height of the screen: leave Slot size unset and the equipment slots size themselves to whatever height the bag doesn't need (bigger on tall screens, smaller on short ones, and the bag scrolls when it can't all fit). Setting Slot size pins them to that exact size instead.
- Hotbar — slot count, slot size, accent, background skin.
- Party / Raid frame — width, max members, compact cards, and which sub-bars show.
Panel recomposition
Five panels — Skills, Quest Log, Character, Enchant, Upgrade — can be recomposed rather than just re-skinned. Turn on Edit body layout and build the panel body from widget nodes: the Stock Body slot, Repeat List rows bound to a collection (e.g. your skills), plus text, images, icons, slot grids, and buttons with actions. It's the same authoring model as custom menus, applied to built-in panels, and it's opt-in — nothing changes until you switch a panel to Custom.
Custom Menus
Author entirely new in-game windows from the same widgets (Panel, Text, Stat Value, Progress Bar, Icon, Slot Grid, Button, Image). Drag them onto a canvas, then in Menu settings choose:
- Trigger — Always on, a Hotkey, or an Event (health/mana/hunger/thirst low with a threshold, on death, on level up, or on entering a zone, with an auto-close timer).
- Placement — anchor + X/Y offset.
Loading Screen
The splash players see while the world loads (the client holds it until the map is actually rendered, so no one sees a half-drawn scene):
- Branding — Title, Tagline, Logo.
- Background — image + Fit + a scrim slider over it.
- Indicator & colors — spinner style (Ring / Progress bar / Dots / None), accent & text colors, and an optional live phase line.
- Rotating tips — a list of tips/tricks/lore with per-tip category and icon, a rotate interval, shuffle vs in-order, and a category badge toggle.
Login Screen
The sign-in page is the one screen every player sees before anything else, so it's the first thing worth making yours. Untouched, it uses your theme colors automatically — the rest of this tab is how far you take it.
- Start from a look — four one-click starters (Classic, Cinematic, Codex, Quiet). Fastest way off the default.
- Layout — the headline choice, picked from thumbnails:
| Layout | Feel |
|---|---|
| Centered card | The engine default — form floats mid-screen |
| Left / Right panel | Full-height column of controls, your art fills the rest |
| Bottom bar | Art-dominant: wordmark up top, form docked low and wide |
| Minimal | No card chrome at all — the fields sit straight on the art |
- Backdrop — theme color, a two-stop gradient, an image (Cover / Contain / Stretch / Tile, with optional slow zoom), or a looping muted video. A darken slider and blur keep text readable, and the drifting particle field can layer over any of them.
- Brand — a logo image, or a two-tone wordmark (title + an accent-colored second part), plus tagline, font, glow, and the divider flourish.
- Card — panel image, 9-slice border frame, corner radius, opacity, accent, and the sign-in button's fill.
- Wording — every label on the screen: tab names, both button labels, field labels and placeholder, the guest button and its note, plus small print under the card.
- Links — a repeatable list (Discord, wiki, rules) shown under the card.
- Show or hide — toggles for the guest button, register tab, social sign-in row, remember-me, and the version stamp.
Like the loading screen, this is delivered to the client before anyone logs in, so it paints on the very first frame rather than flashing the engine default first.
Presets & sharing
- Apply a shipped template (Forge, Arcane Table) as a starting restyle.
- Save current captures your theme + scale + layout + panels + custom menus as a named preset you can re-apply, rename, or delete.
- Export / Import code shares a whole look as JSON between projects.
- Reset everything to engine default starts over.