UI Kit Forge – 9-slice kits in your palette


AND IT IS CHECKED ANYWAY Holding by construction is not the same as holding. ... WHAT YOU GET ... Nine colours - surface, raised, sunken, line, accent, danger, ok, ink, dim - because a UI ...


by Rasterloom


Price History +

Twenty-two UI sprites, generated into your project in your own nine colours, with the nine-slice borders already in their import settings - and every one checked so it cannot smear when it stretches.

Six runtime scripts, three editor tools, three documents. Full C# source, nothing obfuscated, no DLLs. No art ships: the demo generates its own.

The drawing, the palette maths and the slice check touch no Unity type at all. They are plain C# on a byte buffer, so they also run in a build step, a test, or a console tool. The package build verifies this rather than claiming it - and it is how every image in this listing was produced.

The recipe is a ScriptableObject. Same recipe, same bytes.

Contrast is computed with the standard relative-luminance formula, so the ratio shown in the window is the one an accessibility checker would give.

Borders are max(radius, outline) + 1. The plus one is not superstition: anti-aliasing at the end of an arc lands one pixel past the radius, and a border that stops exactly at the radius clips it into the stretched strip.

Every border is clamped so it can never meet its opposite number - a sprite with no middle left is one Unity accepts and then draws wrongly.

Unity 6000.0 or newer, built and tested on 6000.6. Nothing added to your project manifest.

A generator, not an art pack.


You give it a style, nine colours, a corner radius and a scale. It writes twenty-two sprites into your project with the nine-slice borders already in their import settings, so an Image set to Sliced simply works. Change one colour and regenerate. The recipe is an asset you keep next to the sprites, so it goes into version control and produces the same bytes again.


- - -


TRY IT BEFORE YOU READ ANYTHING


Window > Rasterloom > Build UI Kit Demo generates a kit and builds a screen out of it in your open scene. Almost nothing on that screen is square, and every sprite in it is - the window, the progress bars and the scrollbar are stretched from the same shapes as the buttons. Press Play and watch the outlined panel breathe: the corners hold their exact pixel size while everything between them moves.


- - -


WHY BOUGHT KITS SMEAR


Nine-slicing does not stretch a sprite. It keeps the four corners as they are, repeats one column of the left strip down the whole left edge, one row of the top strip across the whole top edge, and one pixel of the middle across everything in between.


So a sprite is only sliceable if the left and right strips are the same on every row, the top and bottom strips are the same in every column, and the middle is one colour.


A vertical gradient down a panel breaks all of that at once - and it is the most natural thing in the world to draw. So does a highlight that crosses an edge, or a single stray pixel. None of it is visible at the size the sprite was drawn at. It appears in your game, at whatever size your dialog happens to be, which is why so many kits ship with it.


- - -


THIS GENERATOR CANNOT DRAW THAT MISTAKE


The painter never sees x and y. It is told which band a pixel is in - near an edge, or in the middle - and how far into that band it sits, and nothing about its row. It cannot depend on a row it was never given.


Depth still works. It just has to be expressed in bands: a lighter top strip and a darker bottom strip read as a raised surface, and both are uniform along the axis they stretch on. A bevel is the same idea with four bands. Corner decoration is free, as long as it stays inside the corner block.


- - -


AND IT IS CHECKED ANYWAY


Holding by construction is not the same as holding. Every sprite is verified before it is written, and one that fails is not written at all.


The same check runs on demand from the window, and during the build of this package across 968 sprites - six styles, four scales, sixteen recipes including deliberately awkward ones. Together with a negative control: a sprite is deliberately broken the way a hand-drawn kit breaks, and the checker is required to catch it. A check that has never failed is not a check.


- - -


WHAT YOU GET


Twenty-two sprites, each already sliced: panel, panel-raised, panel-sunken, panel-header, window, button, button-hover, button-pressed, button-disabled, button-accent, field, field-focus, bar-track, bar-fill, bar-fill-danger, bar-fill-ok, tooltip, badge, tab-active, tab-inactive, scroll-track, scroll-thumb.


Six styles: Line (thin outline, flat fill), Soft (a lighter top band and a darker bottom one), Bevel (light on the top and left, dark on the bottom and right), Notch (corners cut at forty-five degrees), Frame (two outlines with a gap), Ornate (a frame with a mark set into each corner).


Nine colours - surface, raised, sunken, line, accent, danger, ok, ink, dim - because a UI has to say more than one thing. A panel and a pressed button cannot be the same colour, and neither can a disabled field and an active one. The window shows the contrast ratio between your ink and your surface while you edit, so text that will be hard to read is caught before the kit is generated rather than after.


Scales 1x to 4x, and a pixel-perfect mode that turns anti-aliasing off entirely.


- - -


THE IMPORT SETTINGS, AND WHY THEY ARE SET


Mesh type Full Rect, because Tight trims transparent border pixels off the sprite and makes every border value wrong. Compression off, because block compression puts colour artefacts along the one-pixel edge where the slices meet. Mip maps off. Extrude zero. And the border itself, written per sprite as x = left, y = bottom, z = right, w = top.


That last line is the one worth having. A kit of PNGs with a table of borders in the readme means opening the Sprite Editor once per sprite and typing four numbers - and again for every colourway and every scale.


- - -


WHAT THIS DOES NOT DO


It draws frames, not icons, and not fonts. It does not lay out your interface and it is not a UI framework: it writes sprites and gets out of the way, so they work with uGUI, with UI Toolkit through a sliced background, and with SpriteRenderer.


It also does not pretend to replace an artist. What it replaces is the hour an artist spends redrawing a bought kit in the game's colours, and the evening somebody loses to a panel that smears.