NUI accessibility and performance
The NUI lessons get an interface on screen. This one makes it good: it does not trap the player's mouse, it scales from 1080p to 1440p to ultrawide, it does not burn frames when idle, and people can actually read it. These are the details that separate a hobby UI from a sellable one.
Make it good, not just visible
Release focus on every close path
Call SetNuiFocus(false, false) on every way the UI can close: button, escape key, and any server-driven close. Test closing it five different ways.
Scale with viewport units, not fixed pixels
NUI renders at the player's full game resolution, so vw and vh map straight to their screen. Size with relative units (vw, vh, rem, %) and clamp(), not hardcoded pixel widths. A panel fixed at 600px is small on a 1440p screen and oversized on 1080p.
Stop rendering when hidden
Hide the page (display: none) when closed and stop any animation loops or timers. A NUI that keeps a requestAnimationFrame loop running while hidden burns frames for no reason.
Make it readable
Sufficient contrast, legible font sizes, clear focus states on buttons, and not relying on color alone for meaning. People read your UI mid-firefight, not in a calm museum.
Keep reading the full lesson
Sign in to start, then unlock every step of this lesson and the full FiveM School with a membership.
- How it works
- Common mistakes
- What you can do now
The remainder of NUI accessibility and performance is available to FiveM School members.