Character Screens

Two screens sit between the login page and the world: the roster a returning player picks a hero from, and the create flow a new player forges one in. Both are authored in the same place, and both use your theme colors out of the box — an untouched project renders exactly as it always has.

Where to author it#

Settings → UI / HUD → Character Creator. The tab has five sub-tabs: Screen, Brand & Copy, Steps, Card Skins and Character Select. A live preview sits to the right: it is the real create or select screen, drawn by your game client with your unsaved changes and your project's own heroes (three stand-ins until it has any), and it follows the sub-tab you are on (Character Select shows the roster, everything else the create flow). Full size opens it over the editor. While the client is starting — or if it cannot be reached — a sketch stands in and says so. Save is publish — it live-syncs to the running game server.

Setting it up#

1. Open Settings → UI / HUD and pick the Character Creator tab.
2. Tick Custom character creator. Leave it off and you get the engine default (your theme colors still apply either way).
3. On Screen, pick a Layout for the create flow and set the column widths.
4. On Character Select, pick a Layout for the roster and turn off any detail you don't want on a card.
5. On Brand & Copy, set the heading, tagline and logo.
6. On Card Skins, give any surface its own background, frame, corner radius or accent.
7. Save.

Create-flow layouts#

Column widths (Step rail / Step content / Summary) apply to Wizard rail; the preview takes whatever is left.

After creating a hero#

Screen → After creating a hero decides where a freshly forged hero lands.

The create flow's Cancel always works, even for a brand-new account with no heroes: it closes the creator onto the empty roster, which offers Create again and keeps Sign out in its rail.

Roster layouts#

Hero stage and List don't draw empty slots; Create stays in the rail and the action row.

What each card shows#

Every toggle on Character Select is on by default, and each one applies to whichever layout you picked.

Backdrop, brand and card skins#

The Screen sub-tab's backdrop works exactly like the login screen's: Theme color + glows, Gradient, Image, Video (looping) or Particle field, plus a dark-overlay slider and a blur. Brand & Copy sets the heading, tagline, logo (a logo replaces the heading text), title font and glow, and the divider under the header.

Card Skins skins one surface at a time — Stage, Step / nav rail, Choice cards, Preview plinth, Summary column, Starting location cards, Character slots, Empty slots, Detail panel — each with a background image, a 9-slice frame, corner radius, opacity and an accent override.

Inherit skin (on Character Select) reuses the create screen's backdrop on the roster so you only author it once. It only inherits a backdrop you actually set — leaving the create screen on Theme changes nothing.

Portrait framing#

A hero portrait draws one frame of your character's walk sheet — and that frame is a whole body. In a round portrait that puts the character's waist in the middle with their head cropped against the top edge. How much of the frame reads as "the portrait" depends on your art, so you set it once and every portrait in the game follows.

Screen → Portrait framing. A diagram sits under the fields: the sprite frame with the portrait window over it on the left, and what a portrait actually shows on the right.

A face-framed portrait is usually around Zoom 3, Focus down 0.15. Start there and nudge until the diagram looks right.

The framing applies to the create screen's big preview and its summary bust, the character-select slots and the detail portrait — one setting, so no portrait in your game disagrees with another.

Gear and auras on the roster#

Every portrait on the roster — the slots, the carousel thumbnails, the hero-stage star and the detail bust — draws the hero as the world will: wearing their equipped gear, holding their weapon at the ready, and lit by any level aura they have unlocked. A level-50 knight in full plate with a golden aura looks like one before the player presses Enter World, not like the bare level-1 preset.

There is nothing to set up. The roster reads the hero's saved gear and level from the game server and renders through the game's own character renderer, using the same equipment sprites you author on items and the same Level Effects rows — so what the portrait shows is what spawns.

Level-up bursts are a moment, not a state, so the roster never plays them — only auras.

Roster pictures always show one hero. If the project has a portrait picture for that character it is used; otherwise the engine cuts a single front-facing frame out of their sprite sheet — for the slot cards, the hero-stage picker tiles and the list rows alike. A hero with no usable art at all falls back to their initial on a crest, never to the raw sheet.

Hero loading spinner#

A hero's picture does not arrive all at once: the sprite sheet has to decode, and a hero wearing gear then warms up the live equipment portrait. The engine reserves the hero's space before any of that lands — so nothing on the roster shifts — and spins an indicator over it until the hero is there.

Settings → UI / HUD → Character Creator → Character Select → Hero loading spinner.

1. Leave Show a spinner while a hero loads on (it is on by default).
2. Set a Spinner colour, or leave it blank to follow your theme accent.
3. Set the Spinner size in pixels — 28 by default, 12 to 96.
4. To use your own art, pick a Spinner image. It replaces the ring at the same size.
5. If that art is already animated, turn Rotate the spinner image off so it isn't spun twice.
6. Save — the roster picks it up on the next load of the select screen.

Gotchas:

• The spinner is centred inside the hero's own portrait box, so a very large size on a small layout (a list row's 40px icon) will look cropped. Keep it under the smallest portrait on the layout you shipped.
• A spinner image is a media reference like your backdrop: pick it from the media library rather than pasting a file path, or an exported project won't carry it.
• It covers loading, not missing. A hero whose sprite fails to load stops spinning and shows their initial — the spinner is not an error state.
• Turning it off does not make heroes load faster; it only hides the fact that they are loading.

Steps and category mapping#

Steps renames, reorders and hides the create flow's steps. Class and Preset auto-collapse when there is only one option; a per-step toggle overrides that.

The category map assigns a generator pack's categories to a Customize sub-tab (Appearance / Face / Hair / Gear). Without it the engine guesses from the category name, which gets a pack category like "Wings" wrong — map it explicitly and the guess is skipped.

Gotchas#

• Phones always get the stacked layout. Column widths are desktop pixels — the default alone reserves 880px — so a narrow screen renders the create flow as Compact whatever you picked. The roster stacks the same way: the rail becomes a strip and the detail panel drops under the slots.
• New heroes now return to the roster. Games used to drop a freshly created hero straight into the world; the default is now the roster with the hero highlighted. Pick Enter the world under After creating a hero to keep the old behaviour.
• The live preview needs your game client. Locally and in the desktop Studio it starts the client for you (the first open takes a few seconds); in the browser editor it uses your project's play address. If neither can be reached the column shows the sketch and a Retry button.
• Portrait framing can't zoom out past the sprite frame. Zoom starts at 1 — beyond the frame's edge is the next character on the sheet, so a window pushed toward an edge slides back inside rather than showing them.
• Hero stage + Full body ignores Portrait framing. The hero on the stage always shows the whole sprite frame — that is what the option promises — so the zoom and focus apply everywhere else. The Character slots card skin has nothing to skin on that stage either; the backdrop is the surface.
• Live portraits are for dressed heroes. A hero with no equipment visuals and no unlocked aura keeps the lightweight still frame — it looks the same, it just doesn't animate. Live portraits need WebGL; without it (or past eight live portraits on one screen) the still frame stands in, so the roster never goes blank.
• The roster shows saved gear. It reads the hero's last save. Something equipped moments before logging out appears once the save lands — the server saves on logout and on its regular autosave.
• Slot counter is on by default. If you don't want a "Slots 2/4" pill in the header, turn it off.
• A logo replaces the heading. Set one and the heading text stops rendering — its words become the logo's alt text.
• Save is publish. There's no separate publish step, but a save only reaches players on the game server this editor is pointed at. If the editor warns that your live server is on a different database, point the server at this project's database and save again.