mri-fivem-skills
All skills

mri-game-ux

AAA game UX in FiveM resources

Makes FiveM resource screens and scenes (multichar, character creation, spawn, appearance, loading, cutscenes, NPC conversation) feel like an AAA game.

Goal: the player never sees the seam between NUI, scripted camera and world. Screens enter and leave on purpose, the camera moves like a film shot, sound follows the phase, nothing pops in or out.

Reference: MRI's mri_Qmultichar (title, showroom, creation, arrival).

Flow

  1. Survey (before proposing):
    • map the real flow screen by screen, event by event (NUI message, callback, camera switch, fade, SetNuiFocus), following the code;
    • at each passage, note what shows: cut, fade, glide, pop;
    • find what unmounts on the switch (conditional component, if (!isOpen) return): the cause of flicker and of music that stops.
  2. Short proposal: problem seen, cause in the code, fix with numbers (ms, meters). Recommend one option.
  3. Apply following the subject's reference. Times and distances go to the resource's config (data/*.json), not loose in code.
  4. Verify (references/verification.md): what the browser shows and what only the game shows. Game-only bug: readable log before fixing.
  5. Document the new behavior in the resource README and where to tune it.

Principles

References (read only the one for the subject)

File When
references/transitions.md screens entering and leaving, glide vs cut, ped fade, camera arc
references/camera-scene.md scripted camera, depth of field, handheld camera, area streaming, time and weather, 3D text, NPC conversation
references/sound.md music in phases, crossfade, music with the NUI closed, effects, cutscenes
references/menus.md title, landing, selection, destructive confirmation, gamepad, world prompts
references/nui-pitfalls.md flicker on switch, player that restarts, animation vs transform, loadscreen, legibility over the world
references/verification.md screenshots and measurements in headless Chrome, music check, diagnostic logs

Rules

Maintenance

At the end of each use, follow "Maintenance" in the repo root README.md. A new approved pattern goes into the subject's reference.