Lay out the character select roster and the create flow — layouts, backdrops, card skins, and which details each card shows.
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
| Layout | What it does |
|---|---|
| Wizard rail (default) | Step rail, step content, character preview, summary — four columns |
| Split stage | Preview takes one side, the form the other |
| Focus preview | Preview dominant, the form and summary stacked beside it |
| Compact | One stacked column, top to bottom |
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.
| Option | What it does |
|---|---|
| Return to character select (default) | Back to the roster with the new hero highlighted; the player presses Enter World themselves |
| Enter the world | Straight into the game on the new hero |
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
| Layout | What it does |
|---|---|
| Slot grid (default) | The four-up row of hero cards, empty slots included |
| Card gallery | A wrapping grid of smaller cards — for rosters bigger than four |
| Carousel | One horizontally scrolling row that snaps card to card |
| Hero stage | The selected hero large, with a thumbnail strip to switch |
| List | Compact rows — the most heroes per screen |
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.
| Field | What it does |
|---|---|
| Nav rail | The Characters / Create / Exit column down the left |
| Detail panel | Aside (a column beside the roster), Inline (under it), or None |
| Portrait | Ringed bust (banner behind the sprite), Portrait card (square frame), or Full body (a taller frame, no banner). On the Hero stage layout, Full body goes further: no card at all — the whole animated hero stands large on the backdrop with a ground glow, and the detail portrait loses its box |
| Detail portrait | The square hero portrait inside the detail panel |
| Level | The "Level N" line on cards and in the detail header |
| Class | The class name on cards and in the detail header |
| Class crests | Tints a card's ring and crest with the class color. Off = your theme accent |
| Hero size | How large heroes draw on the roster — slot portraits, carousel thumbnails, the hero stage and the detail bust — as a multiple of the engine size, from 0.5 to 10. Small sprite sheets usually want 1.5–2; the top of the range is for a single hero filling a hero-stage screen |
| Last played | The "Last Played" row in the detail panel |
| Play time | The playtime pill on cards and its detail row |
| Slot counter | A "Slots 2/4" pill in the header |
| Currency pills | The Silver / Gold pills in the header and the Silver detail row |
| Empty slot art | Your own art for an unused slot, instead of the dashed plus |
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, 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.
| Field | What it does |
|---|---|
| Zoom | How far in to crop. 1 (default) is the whole sprite frame; 3 shows a third of its height. Maximum 6 |
| Focus across | Where the window sits horizontally. 0 is the frame's left edge, 0.5 (default) the centre, 1 the right |
| Focus down | Where it sits vertically. 0 is the top of the frame — the head — 0.5 (default) the middle, 1 the feet |
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.
| What shows | Where it comes from |
|---|---|
| Armor, weapons, capes, accessories | The item's Equipment Visual sprite (or its per-character variant). An item with no visual, or a variant set to none, draws nothing — exactly as in the world |
| Weapon stance | The weapon's type. The hero holds the weapon-ready idle, so a sheet whose weapon only exists in stance frames still shows it |
| Level auras | Every aura lit at the hero's level (one per aura group), attached to its authored socket — body, head, feet or weapon |
| Aura glow | A soft glow behind the hero in the aura's colour, standing in for the in-world light |
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.
| Field | What it does |
|---|---|
| Show a spinner while a hero loads | On (default). Off draws nothing while a hero resolves — the hero simply appears |
| Spinner colour | The ring's colour. Blank (default) follows your theme accent, so a retheme carries the spinner with it |
| Spinner size | Diameter in pixels, 12–96. 28 by default — big enough to read in a list row, small enough not to cover a hero-stage portrait |
| Spinner image | Your own art instead of the ring, drawn at the same size. Any image in your media library |
| Rotate the spinner image | On (default). Off for art that already animates |
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); on Studio Web 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.