Design Docs

RPG98 › Design Docs › Page 10 — Art Style, UI-UX & Visual Direction

Reaver’s Rest Design Document

Page 10: Art Style, UI/UX & Visual Direction

Overall Visual Style

Reaver’s Rest uses a retro 16×16 pixel aesthetic scaled 2× on the Miyoo Mini Plus (resulting in 32×32 pixel tiles on screen). The tone is gritty fantasy survivor — worn, patched-together, and dangerous.

Asset Strategy

All visuals are built exclusively around the Super Retro set by Gif as the primary tile set. No additional major tile sets will be introduced.

  • Town (Blackthorn Hollow): Warm lighting from lanterns and braziers. Palisade walls show repeated repairs. Paths are a mix of dirt and scavenged stone. Reaver’s Rest, Ironvault, and Aether Forge serve as strong visual landmarks.
  • Dungeons: Darker and more oppressive overall. Use variations and layering of the Super Retro tiles to create mood and depth.
  • Reavers: All three classes (Warrior, Skirmisher, Arcanist) use sprites that include physical shields with dedicated shield-walk animations. These are mechanically meaningful and visually consistent.
  • UI: Extremely clean and minimal. Large, readable fonts. High contrast. Glanceable information only. No cluttered HUD.

UI/UX Principles for Miyoo

  • Screen Resolution: 640×480 logical area (with scaling/letterboxing for different Miyoo models).
  • Controls: D-pad + face buttons + shoulder buttons. No mouse or touch assumed.
  • Information Density: Very low. Important numbers (health, mana/energy, Crux/Aether count) must be large and always visible.
  • Menus: Context-sensitive and proximity-based where possible. Full-screen menus only when necessary (e.g., group formation at the Dungeon Portal or inventory screen).
  • Loading Screens: Simple progress bar with flavor text (“Preparing the dungeon…”, “The void stirs…”) during static map baking and asset loading.
  • Performance Target: Maintain 30+ FPS even with many entities on screen. This is achieved by baking the static background into one or two large off-screen buffers and drawing only dynamic entities on top.

Technical Rendering Approach

  • Static layers (Ground + Mask) are baked client-side into one or two large textures/buffers at dungeon load time.
  • Dynamic elements (Fringe animations, doors, boulders, spike traps, breakable rocks, players, enemies, effects) are drawn individually on top.
  • Respawn at Reaver’s Rest uses the same simple visual style as the rest of town.

Tone Consistency

  • Town feels hard-won and fragile.
  • Dungeons feel genuinely threatening and oppressive.
  • Combat and extraction moments should feel tense and rewarding on the small screen.

Design Guardrails

  • All visuals must remain cohesive using only the Super Retro set by Gif.
  • Prioritize readability and performance over visual complexity.
  • Shield-walk animations must remain visually prominent for all three classes.
  • Seasonal variations must remix existing tiles rather than require new assets.
  • Keep UI minimal and controller-friendly at all times.

Version 0.4 • April 2026 Previous: Page 9 – Play Seasons & Content Roadmap Next: Page 11 – Technical Implementation & Client Optimization