Game UI Elements
Customize the in-game UI: timers, level, IQ bar, and any on-screen element — position, scale, colors, and visibility.
Every UI element in the game's in-game experience is included by default. You can reposition, resize, recolor, and show/hide each one.
These are visual (UI Layer) parameters. The underlying values (timer seconds, level number) live in the Config Layer.
What You Can Change on Any UI Element
| Property | What It Does |
|---|---|
| Enable | Show or hide the element |
| Position | Where it sits on screen |
| Scale | How large it appears |
| Color | Tint (sprites) or text color (labels) |
Every in-game UI element exposes these, so you can rearrange the whole HUD without development.
Enable / Disable Rule
| Behavior | What Happens |
|---|---|
| Disable an element | It's hidden from the HUD |
| Disable the UI / timer | All timer functions are automatically disabled too |
Turning the UI off cleanly stops the countdown and its danger effect — you never get a running timer with no display.
Timer
| Property | What You Can Change |
|---|---|
| Text color, size, outline | Styling of the countdown |
| Danger color | Color when time is running out |
| Position, scale, visibility | Placement and on/off |
The timer value (seconds) and danger second (when the warning starts) are Config Layer settings — see Difficulty & Pacing.
Level
| Property | What You Can Change |
|---|---|
| Text color, size | Styling of the level label |
| Position, scale, visibility | Placement and on/off |
The level value is a Config Layer setting — see Config Layer.
IQ Bar
A dynamic bar that fills as the player progresses. It is not tied to a win condition — it's a progress/energy indicator that reacts to gameplay.
| Property | What You Can Change |
|---|---|
| Bar colors | Fill, background, border |
| Font | Select the bar's text font from the built-in font sets (default: Lilita One) — custom font upload is not supported |
| Icon / image | Upload PNG visuals for the bar |
| Position, scale, visibility | Placement and on/off |
Other HUD Elements (Score, Currency, Bars)
Any score counter, currency display, or progress bar in your build follows the same pattern:
| Element | Changeable Properties |
|---|---|
| Score / counter | Text color, size, icon, position, visibility |
| Currency | Icon image, tint, text color, visibility |
| Progress bars | Fill / background / border colors, position, visibility |
What Needs Custom Development
| Element | Requires Development |
|---|---|
| Scoring | Point values and formulas |
| Timer logic | Countdown behavior beyond value/danger-second |
| New HUD widgets | Elements not in your build |
Best Practices
- Match your brand — use brand colors where appropriate.
- Keep it readable — UI must be clear at a glance on mobile.
- Use contrast — numbers visible against the background.
- Be consistent — same style across all UI elements.
Related
- Config Layer — Timer, level, danger-second values
- Difficulty & Pacing — Pacing levers
- Colors — Brand color application