Hudsmith UI Kit - Pixel GUI with 9-Slice Data

Hudsmith UI Kit is a pixel-art HUD and GUI kit built for real use: 231 sprites, every panel, button and bar frame with exact 9-slice margins, complete button states, engine data files and three palettes. It matches the Hudsmith Icons font and the Lanternbit, Pocketpip and Bannerstone pixel fonts.

Halloween 2026 bonus: buyers also get the whole kit recoloured to the spooky Pumpkin Night palette (same file names, sizes and 9-slice data) as an extra download. Want more spooky UI? See the Hudsmith Halloween Kit.

What you get

• 16 panels (plain, inset, raised, titlebar, tooltip, bubble, dialogue, slot, slot selected, card, banner, parchment, metal, wood, glass, danger), plus 2 speech-bubble variants with the tail baked into a corner and 6 tail overlays (down, down-left, down-right, up, left, right)
• 12 button styles x 4 states (normal, hover, pressed, disabled) = 48 buttons: slate, gold, red, green, blue, pill, arcade, small, wood, metal, parchment, ghost. Every state of a style has the same size and margins; hover lifts the face 1 px, pressed sinks it, and each state has its own label rect so text moves with the face
• 24 bar styles, each with frame + fill + damage-ghost fill + flash frame (97 sprites): HP / MP / stamina / XP, thin overhead bars, a 3 px minimal bar, capsule, slanted, boss bar, posture bar, ornate gold, wood, metal, cast bar, vertical bars, segmented cells, heart containers (with half heart), diamond pips and a shield overlay. Fill insets are documented for every bar
• 53 widget sprites: slider (track, fill, knob x 4 states), checkbox, radio and toggle (off / on / disabled), tabs (active / inactive / hover), scrollbars (tracks, thumbs x 3 states, grips, arrow buttons), dropdown field (closed / open) and arrows, list highlight, window buttons (close / minimise / maximise x 3 states)
• 9 cursors at 16x16: pointer, hand, grab, crosshair, text beam, busy (4 frames), with hotspots
• 3 palettes: Slate & Gold, Parchment, Pocket Green. The alternates are exact index remaps of the same pixels

Files and data

• 1386 single PNGs (every sprite, every palette, 1x and 4x) plus one sprite sheet per palette at 1x and 4x
• nine_slice.json: name → sheet rect, left / top / right / bottom margins, content insets, minimum size (1x and 4x versions); ui_data.json: button label colours per state and palette, bar parts and fill insets, speech-tail anchors, cursor hotspots
• Atlas JSON (simple name → x, y, w, h, and the common "JSON hash" frames layout)
• Godot 4: a StyleBoxTexture .tres for each of the 166 9-slice sprites in each palette, and a Theme per palette (buttons with 12 type variations, panels, tooltip, line edit, checkbox, toggle, tabs, scrollbars, popup menu)
• LOVE draw / draw9 helper with a data table; GameMaker and Unity margin tables and Phaser notes in the README; palette files (.hex, .gpl); the 9-slice renderer script used for checking

Made to stretch cleanly

Every edge and centre slice is uniform along its stretch axis, so plain stretch mode is pixel-perfect at any size, in any engine, without tile mode. Before release every 9-slice sprite was rendered at several sizes and compared pixel by pixel; sizes, palette membership, binary alpha and identical layout across palettes were checked by script.

Good to know

• The Godot, LOVE and Phaser files were generated from the same data but not tested inside those engines; GameMaker / Unity are covered by the margin table only.
• Bars and the banner are meant to stretch horizontally and keep their height.
• In Pocket Green the 14 colour slots fold onto 4 shades, so the red / green / blue styles look alike there.
• No text is baked into the sprites. Labels in the screenshots use Lanternbit and Pocketpip (sold separately); the HUD and settings screens are mockups, and the world sprites in them are Hudsmith Icons glyphs.

Free Lite version

4 panels (plain, inset, dialogue, tooltip), 2 button styles x 4 states (slate, gold), 4 bars (HP, MP, stamina, XP) with fill / ghost / flash, checkbox and slider, default palette, same data files. Try it in your engine first.

License

Use it in commercial and non-commercial games, apps and videos, modify it, no credit required. Do not resell or redistribute the files or the sprites as a set. Full text in LICENSE.txt.

How it was made

Drawn as pixel grids in code. A generator script builds the PNGs, sheets and data files from those grids.

Same family (sold separately)

• Hudsmith Cards - card-game UI: deckbuilder frames, a full 52-card deck, chips and dice
• Hudsmith Dialogue - 13 dialogue box styles, name plates, choices, portrait frames, emotes
• Hudsmith Prompts - 151 pixel input prompts for keyboard, mouse and gamepad
• Hudsmith Icons - 169 pixel icons as a font
• Lanternbit - 5x7 UI text font
• Pocketpip - 3x5 HUD font
• Bannerstone - heavy title font

Also by me: Pixel Font Bundle (6 pixel fonts, $9.99), Hudsmith Prompts (151 input icons) and the Hudsmith Halloween Kit.