Roblox UI: one HUD that works on a phone and on a PC
Most games design the interface for a keyboard and then stretch it onto a phone. In Roblox that priority is upside down. Here is one HUD that is honest on both.
How do you build a Roblox interface that works on both phone and PC?
Build one layout and switch it by input type rather than by screen size. On touch the skill buttons move into an arc under the thumb; on a keyboard, key labels take their place. Prompts change their wording for the device: "Press E" or "Tap". Scale is computed from the short edge of the screen, or the interface looks childish on a tablet.
Most people arrive in a Roblox game on a phone. The interface, though, is usually drawn for a monitor and then stretched down, and on a phone the buttons end up where a thumb cannot reach.
I built a demo HUD the other way round. You can play it.
Switch on input, not on size
The first decision: the layout follows what someone is playing with, not how wide their screen is.
Those are different things. A tablet is as wide as a laptop and played with a thumb. A touchscreen laptop can be either, and both within one session: someone lets go of the mouse and taps the screen.
So the game watches the last input used and rearranges. On touch the skill buttons gather into an arc in the bottom right, under the thumb. On a keyboard the arc disappears and key labels appear on the icons instead.
Scale from the short edge
The second thing most interfaces get wrong: tying scale to width.
A phone held sideways is wide and short, and an interface sized by width eats the whole screen. A tablet is the opposite: everything comes out oversized and childish.
Size from the short edge, and clamp it at both ends. Then an element takes roughly the same share of the field of view on any device, rather than the same share of the screen.
Teach through doing, not through text
The third part is not about layout. It is about what the interface exists for.
On a first run the screen dims around one button, a ring pulses at it, and the prompt matches the device: “Press E” on a PC, “Tap” on a phone. One action, at the moment it is needed, with no list of rules.
Then a short quest: land five hits on a dummy. Every hit pops a damage number, flashes the dummy and moves a bar. Then a completion banner, a new level, and a locked skill opening with an animation.
None of that is decoration. The player learns a mechanic by performing it and gets confirmation after each step. Nobody remembers rules read at the start of a game.
What to settle before drawing anything
Three things that are cheaper to decide early.
Whether the interface reads against a bright background: a health bar vanishes on a light texture unless it carries its own backing. Whether a skill’s state is visible: on cooldown, locked, just unlocked are three different looks, not three captions. And whether the rules live on the server: if the client decides damage, the game breaks on day one.
Everything in the demo is made in Luau, with no third-party assets, and tested in play mode rather than as a picture.
What next
Open it and poke at it: HUD Demo, mobile and PC. What this kind of work covers is on the Roblox UI page.
If you want a HUD or onboarding for your own game, send the game and the screens you need.