# Every HUD Widget in Every State, Placed Where Players Look > Describe your game and its platform. Layer lays out the HUD for your genre and draws health bars, skill slots and minimap pieces in every state. --- ## Messages to send, and what they made ### “Make a health bar for my dark fantasy action game in full, half, low and empty states.” - ![A dark fantasy health bar at full health, thorned iron frame with a crimson fill](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/37f57012-2eb1-439e-9786-c6cd2c9a48e2/ui_element_shippable_ingame_darkfantasy_mobile_arpg_player_health-2026-09-25-203615.png) - ![The same health bar at half health](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/d8dfb31b-10c8-49f1-829e-e3c1f43e5371/change_only_the_health_fill_to_an_exact_half_state_exactly_50_visible-2026-09-25-203801.png) - ![The same health bar at low health](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/54109cda-05a2-4636-83ce-9fbae77001d7/change_only_the_health_fill_to_a_low_state_exactly_20_visible_crimson-2026-09-25-203801.png) - ![The same health bar empty](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/6e74c678-ff6c-4f0f-9f21-51982a32325d/change_only_the_health_fill_to_an_empty_state_remove_all_crimson-2026-09-25-203801.png) The thorned iron frame is identical in all four states and only the crimson fill moves, so the bar never jumps when your engine swaps one state for the next. ### “Design the HUD for my PC twin-stick shooter at 1080p: ammo, grenades, score and a wave counter. Give me the layout spec, then generate the widgets in their states.” - ![A grenade readout, ready](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/0ecfa6a9-8b8c-43b7-8f31-29a05e24958b/ui_element_create_a_distinct_squareish_grenade_readout_master-2026-09-25-203743.png) - ![The grenade readout recharging, with a segmented perimeter](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/f80f4ad3-3f10-4976-9b1d-a41d00bdcd3a/change_only_the_grenade_state_to_recharging_add_a_segmented_perimeter-2026-09-25-203859.png) - ![The grenade readout unavailable, crossed out and desaturated](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/ae6eb9c8-5931-4df5-9924-67df5278d7c9/change_only_the_grenade_state_to_unavailablezero_desaturated-2026-09-25-203859.png) Recharging and unavailable look like different problems, a segmented perimeter for wait and a crossed-out, desaturated readout for empty. The grenade count itself is left for your engine to draw. ### “Design the HUD for my portrait mobile roguelite: health, XP bar, skill buttons and a minimap. Give me the layout spec and the widgets in their states.” - ![A skill slot in its ready state](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/5dbdb582-4ba4-413d-be08-08c4808131b5/ui_element_reusable_portraitmobile_roguelite_skillbutton_slot-2026-09-25-202358.png) - ![The skill slot in its active state with a cyan rim](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/8bf33a80-80c0-4790-8789-bc24a6ccf555/change_only_the_skillslot_state_to_active_or_toggled_replace_the_ivory-2026-09-25-202629.png) - ![The skill slot locked, with a diagonal shutter](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/2fdb53d7-5180-4aab-ba13-c4aaa43cdfaa/change_only_the_skillslot_state_to_locked_darken_and_desaturate_the-2026-09-25-202625.png) - ![A circular minimap bezel](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/8834752b-445e-43d8-bce1-64dc192d2fc0/ui_element_portraitmobile_roguelite_circular_minimap_bezel_and_mask-2026-09-25-202358.png) - ![An ivory player marker for the minimap](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/3363407c-931e-4bba-b2cc-52a111b68684/icon_portraitmobile_roguelite_minimap_player_marker_a_bright_ivory-2026-09-25-202358.png) - ![A coral-red danger marker for the minimap](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/e5c9d25e-5b2e-4bc2-b618-db0fa2d2cd8b/icon_portraitmobile_roguelite_minimap_elitedanger_marker_a-2026-09-25-202358.png) - ![A gold objective marker for the minimap](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/f1dee0ca-b4d6-4ffa-b912-7f04cebc547e/icon_portraitmobile_roguelite_minimap_objective_marker_a_goldamber-2026-09-25-202358.png) - ![An XP bar in its level-ready state](https://media.app.layer.ai/workspaces/9602107e-865b-47e5-b66e-87b1bec5e3d5/files/55a3ff56-3a9e-4b3e-afea-04773e9a0ca4/change_only_the_xpbar_state_to_levelready_retain_the_full_violetblue-2026-09-25-202732.png) Each skill slot state changes the frame itself, a cyan rim for active and a diagonal shutter for locked. The minimap markers split by role, with ivory for the player, coral red for danger and gold for objectives. --- A HUD gets judged in the worst second of a fight. If the health bar jumps a pixel when it drops, or a cooldown looks the same as being out of mana, players lose track of the one number they needed. Tell Layer the genre, the platform and what the player has to track. You never write a spec or redraw a bar four times by hand. Layer lays the screen out by the conventions players already know for your genre, then draws every widget in the states your engine swaps between. ## Where Each Readout Sits Placement follows the genre. In a twin-stick shooter, your own vitals and ammo sit along the bottom, where a flick of the eyes finds them between waves, and the score and wave counter take the top edge, where nothing needs touching. A portrait mobile game stacks differently: global state at the top, and the skill buttons in a cluster at the bottom center where the thumb already rests. In every genre the center of the screen stays clear, and the minimap takes a corner instead of a second screen's worth of space. ## States That Swap Without a Jump Layer draws each widget complete at its best state, then edits every other state from that image. The frame never moves, and only the part the state changes does. **Two cues per state** Locked, active and recharging each change the shape of the widget as well as its color, since a tint alone gets missed mid-fight. **Wait versus refill** A cooling ability and an unaffordable one get different treatments, because players respond to them differently. ## What Your Engine Still Draws Numbers, fill levels, the cooldown sweep and every timer stay live in your game, so the art leaves room for them and never bakes a value in. Widgets arrive as PNG files on transparent backgrounds, one file per state. For the rest of your interface, see [game UI kits](/use-cases/game-ui-kit), [menu and store screens](/use-cases/game-menu-screens), [game icon sets](/use-cases/game-icon-sets) and [UI mockups on your screenshot](/use-cases/game-ui-mockup). ## Frequently Asked Questions ### Do I get a layout or only the art? Both, when you ask for both. The layout spec places each element for your genre and platform, with safe zones and the center of the screen kept clear, and the widgets are drawn to fit it. Ask for the spec and the widgets in the same message, as in the examples. ### Will the bar shift between states? No. Layer draws the complete widget at its full state first and edits every other state from that image, so the frame and backing stay put and only the fill or the state treatment changes. ### Will a cooldown look different from an empty resource? Yes. Players read one as wait and the other as go get more, so they get different treatments, like the grenade's segmented perimeter against its crossed-out empty state. Each state changes shape as well as color, because a color shift alone gets missed in motion. ### Can I reuse a landscape HUD in portrait? Ask for a new layout instead. Portrait stacks global state at the top and puts the actions in a cluster at the bottom center, inside thumb reach, so Layer lays the screen out again rather than shrinking the landscape version. --- Create a free Layer account and list what your HUD has to show. --- [View original](https://layer.ai/use-cases/game-hud-design) | [All Use Cases](https://layer.ai/use-cases)