Devlog

Why AI Art Isn't Ready to Use

Making Games with AI · Part 8

Making Games with AI, part 8: Why AI Art Isn't Ready to Use. Historical Kibble Street TD screenshots and development diagrams.

This article revisits development in June–July 2026 and early August, using records through August 2, 2026. References to “current” behavior, values, images, candidates, and validation describe that historical snapshot, not today's released game.

Previous: Why Keep Reworking the UI After the Game Is Playable?

Generating an image that looks like finished game art is relatively easy. Turning it into an asset that an interface can use reliably, across different states and future changes, takes much more work.

In Kibble Street TD, looking good and being ready for the game were separate standards. A usable asset needed accurate meaning, readability at its actual size, clean transparency, compatibility with existing components, and—in the interface at this stage—a shared structure across cat and dog variants. Changing text, prices, or state should not require repainting the whole image.

Importing art before answering those questions only increased the cost of later revisions.

A good-looking image is not yet an asset

The upgrade page needed a new set of ability icons. The first base-health candidate was rich and complete: a house, heart, and medical symbol conveyed the idea, and the enlarged illustration looked polished.

At the real 96×96 display size, roof tiles, fences, plants, a bowl, and wood grain competed for attention. The essential meanings—base and health—became less clear. The problem was its suitability as a frequently read icon, not the quality of the illustration.

Three base-health candidates show the difference between detail, excessive simplification, and a design that works at the intended size.
Three base-health candidates show the difference between detail, excessive simplification, and a design that works at the intended size.

The asset needed a specific contract: a 256×256 source, a 96×96 runtime display, a transparent background, a small margin against clipping, and a subject that otherwise filled the canvas. No text, numbers, faction symbols, or interface border. Both faction upgrade pages needed the same meaning.

Those conditions made the question concrete: which candidate could do its job in the actual slot?

Define its job before asking AI to draw

A model can give a plausible answer to “base-health icon” without knowing the slot size, adjacent colors, cross-faction use, or symbols already assigned to another ability.

The work therefore started with a wireframe and semantic limits: source dimensions, safe margins, display size, required symbols, and prohibited content. The icon set also needed a comparison so luck, rewards, attack, and health remained distinguishable.

A wireframe fixes canvas, safe margin, display size, meaning, and exclusions before image generation.
A wireframe fixes canvas, safe margin, display size, meaning, and exclusions before image generation.

A wireframe did not need to look beautiful. It turned an open-ended request into checkable boundaries. More polished candidates could not resolve a meaning or size that had never been decided.

Style needs more than an adjective

“Polished cartoon game art” leaves line weight, lighting, materials, colors, and detail density open to interpretation. Different generations can satisfy that description while looking unrelated.

The project instead drew references from assets already used in the game. Existing ability icons established outlines, palette, and detail density. Cat and dog slots established the surrounding interface and faction colors. Each reference had a specific job; old drafts and unapproved candidates were not a project-wide style standard.

Runtime assets provide distinct constraints for outlines, color, materials, information density, and the surrounding slot.
Runtime assets provide distinct constraints for outlines, color, materials, information density, and the surrounding slot.

A useful style reference set defined practical conditions: dark outlines that survived reduction, consistent gold highlights, cyan and orange as major distinctions, and details that did not collapse into noise. AI received clean reference images and their roles. Human review used annotated comparisons and written constraints.

This did not guarantee the first attempt would work. It gave failures specific causes and kept the next revision from starting with another guess at the style.

Split a screen into maintainable components

A single generated shop or results image permanently joins borders, icons, words, prices, states, and background. A changed price, a longer translation, or a disabled button then calls for another image.

The ad-loading button followed a component approach. Its plate and rotating indicator were separate images; the game controlled text and interaction state. The plate held its border and material around a minimal stretchable center. The same resource could serve 260×56, 230×140, 240×64, and 300×92 placements.

A separate button plate and spinner can serve four differently sized placements while the game controls text and state.
A separate button plate and spinner can serve four differently sized placements while the game controls text and state.

Images supplied stable visual elements. Code supplied changing text, values, animation, and state. That reduced duplication and clarified what a revision affected: copy could change without repainting a button, and a new placement did not require another complete asset set.

Approval ends generation and begins deterministic processing

Asking AI to “make the approved candidate transparent and the right size” can unintentionally trigger a redraw. Proportions, silhouettes, and small details may change, leaving a different image from the one approved.

Once a static candidate was accepted, the next steps were deterministic: background removal, edge cleanup, cropping, resizing, transparency checks, and nine-slice borders where needed. Another generation could not silently replace the approved visible content. Import used a stable descriptive filename and recorded dimensions, purpose, and runtime references.

After approval, the same visible artwork goes through transparency, edge, size, and nine-slice processing before import.
After approval, the same visible artwork goes through transparency, edge, size, and nine-slice processing before import.

The third base-health candidate reached a balance between clutter and excessive simplification. After approval, its visible design was preserved in a 256×256 transparent image, then displayed at 96×96 inside the two 140×140 faction slots. The remaining checks concerned edges, dimensions, background, and readability—not choosing another drawing style.

Passing technical checks does not authorize adoption

A later ad-loading-button candidate was brighter. It kept the same geometry and component dimensions, and passed transparency, nine-slice-center, and brightness checks. At the August 2, 2026 evidence cutoff, it was still a candidate and had not replaced the runtime version.

Automatic checks could establish that the files met technical requirements. They could not decide whether the brighter result suited a subdued loading state, competed with normal buttons on a dark screen, or fit its neighbors.

Technical validation and human visual approval are separate steps; a technically valid candidate can remain outside the game.
Technical validation and human visual approval are separate steps; a technically valid candidate can remain outside the game.

AI helped propose directions, produce constrained candidates, and repeat checks on dimensions, transparency, naming, and references. The human defined meaning and style, judged the real composition, chose acceptance or revision, and authorized import.

Who is responsible for this part?

The human owns the interface task, wireframe, approved references, visual tradeoffs, and final acceptance. AI organizes existing assets, translates requirements into dimensions and exclusions, prepares comparable candidates, and performs deterministic production checks.

The key distinction is who decides what enters the product. AI makes each candidate and revision easier to inspect; it does not make adoption automatic.

Where to start

Choose a real placement before writing a generation prompt. Record the source and display dimensions, background requirements, one essential meaning, and prohibited elements. Pick two or three assets already used in the product and say whether each constrains shape, color, or material. Inspect the result in a composition at its true size. Process the final transparent file only after approval.

An image becomes a usable game asset when it can be composed, reused, verified, and traced through later changes.