Game sprites and icons

Keytween makes small, exact-size PNG sprites with real transparency for games and interfaces: inventory icons, weapons and armour, characters with facings and walk frames, enemies, map props, buildings, seamless ground and wall tiles, battle backdrops and portraits.

Sprites are 8 to 512 pixels a side, square or any shape from 9:21 to 21:9, and land in the image library.

How it works #

Image models cannot draw well at 32 pixels, so each sprite is drawn larger (about three times its size, at least 576 × 576) on a flat key colour. The server then, without any further model:

1. cuts away the key colour connected to the border, together with any shadow or floor strip in the key's hue that touches it, while key-coloured details enclosed inside the subject survive,
2. cleans the anti-aliased fringe and strips the key's tint from the subject's edge,
3. trims to the subject and centres it with a margin, or stands it on the bottom edge (anchor: "bottom"),
4. shrinks it to the exact size; in pixel-art mode every sprite pixel takes the most common colour of the area it covers, so there is no blur and no in-between colour, then adds an optional uniform outline and reduces the colours to an exact palette,
5. checks the result and lists warnings, each with its fix.

The full-size render is kept with every sprite, so edits and re-exports start from it, never from the tiny file.

Parameters #

Unchanged settings carry over: an edit or export of a sprite keeps its key, palette, outline, anchor and the rest unless you pass new values.

Variants and the premium style #

• variants (1 to 4) draws several candidates of one prompt in a single job, for the price of one at most sizes. Keep the best and delete the rest.
• premium: true switches to the premium style: authentic hand-placed pixel art on a true low-resolution grid, at its best for retro characters, items and props from 16 to 128 px. It draws from the prompt alone, so it takes no style_image_ids, style kit images or @references, and edits and animations of a premium sprite use the standard style. Every premium result passes a content filter; a blocked result is refunded.

Prompting sprites #

Long, concrete prose beats keywords. "pixel art sword icon" gives a generic, muddy result; a full description gives clean art.

1. Style first: A 16-bit SNES-era JRPG pixel art inventory icon of…, A hand-painted fantasy RPG inventory icon of…, A flat vector UI icon of…
2. One subject with three or four named colours and materials, and its orientation: drawn diagonally with the hilt in the lower left and the tip pointing to the upper right corner, upright and front-on, seen from the front.
3. A style sentence you repeat word for word across the set: Thick black outline around the whole silhouette, flat colours with one shadow and one highlight per colour, no gradients, chunky readable shapes.

Do not describe a background or scene: the key background and a no-shadow sentence are added for you.

A 16-bit SNES-era JRPG pixel art inventory icon of a steel longsword, drawn diagonally with the hilt in the lower left and the blade tip pointing to the upper right corner. The blade is pale silver with a single bright highlight line, the crossguard is gold, the grip is brown leather and the pommel holds a small round blue gem. Thick black outline around the whole silhouette, flat colours with one shadow and one highlight per colour, no gradients, chunky readable shapes.

• Design for the size. At 32 px and below, ask for very few large shapes; fine detail (spots, notches, dot eyes) disappears. For tiny characters, ask for two big solid black oval eyes set wide apart and a huge head half the body height.
• Name the shape when the material is not enough. a wrapped turban shaped like a crescent rather than a silk turban. If two seeds agree on the wrong design, describe the silhouette part by part: a beetle seen from above: small round head, wing case split down the middle, six short legs.
• Accents need size. A small accent colour can be lost; make it bigger, mention it again, or add it with an edit.
• Clear things (ice, glass, ghosts) cannot be see-through, because sprite pixels are either fully opaque or fully transparent. Draw them as two pale tones with a white facet line.

Choosing the key colour #

Pick the key by material, not only hue: any part of the subject in the key's hue may be cut away, and the key tints dark and neutral tones.

A warning in the result says when pixels in the key's hue survived, which usually means the subject shares the key colour.

Consistent sets #

• Save a style kit. create_style_kit stores up to 3 master sprites, the style sentence, an outline and optionally a strict palette. Pass style_kit_id to generate_sprite, edit_sprite, animate_sprite and generate_walk_sheet; settings in the call win over the kit's. In the app, open a sprite and choose Save as style kit.
• Style images set the look, the prompt sets the subject. style_image_ids (or a kit's sprites) carry pixel size, outline weight, shading and palette to a new subject. A style image can also lend its clothing or props to a similar subject (a skeleton drawn in a knight's style may come out armoured), so name the new subject's own clothing and props.
• The wording carries the style, not the seed. Repeat the style sentence word for word in every prompt. Different seeds change the composition, not the look, so re-rolling a bad sprite never breaks the set.
• Pass outline (e.g. #140c1c) on every sprite. Image models often draw outlines in the subject's own hue, and skip them on pale subjects; the server outline makes every edge match.
• One master per family, variants by edit. Sword → bronze, steel and ember swords or an axe; potion → ether; closed chest → open chest; leather → chain → plate.
• One strict palette (optional). learn_sprite_palette learns a shared palette from the set's characters, items and props (not its tiles, which would crowd out the accents); pass the list as palette. 48 to 64 colours keep the hues of a varied set. Compare before and after; add a lost accent's #rrggbb to the list.
• Review side by side. pack_sprite_sheet puts a set into one picture: outliers in size, outline weight and saturation stand out at once.

Animation from a described action #

animate_sprite takes a sprite and a sentence describing the action, and draws 2 to 8 key poses of the same character in one pass. The server cuts the poses apart, puts every frame on the same scale and the same ground line, and gives them one shared palette, so the animation does not jitter or shimmer.

animate_sprite  image_id <knight>, frames 4,
                action "a sword slash attack facing right in side view: wind-up with the sword raised behind,
                        the swing, and the follow-through with the sword low in front"

• Describe the motion in time order and say which way the character faces. 4 frames suit attacks, hits and spells; 6 to 8 suit walks and idle loops.
• Frames are key poses meant to play at about 8 fps, the way hand-made 16-bit sprites move; they are not tweened in-between frames.
• The result is a packed sheet (with each frame's rectangle and the loop to play) followed by every frame as its own sprite, named <name>_1, <name>_2, and so on. Frames are the source sprite's size unless you give width and height; give a wider frame for wide poses such as a sword swing.
• If a pose is wrong, re-roll with another seed rather than editing one frame, which would break the shared scale and palette. If the result reports fewer frames than asked, re-roll or ask for fewer.

Walk sheets #

generate_walk_sheet draws a classic RPG character sheet on an exact 4 × 4 grid of 32 × 32 frames: rows face down, left, right and up; each row has three walk frames and one extra pose (arms raised, jumping left, jumping right, lying down). Describe the character, or pass image_id to base it on one of your sprites. Frames are named <name>_walk_down_1 and so on, and the sheet lists the walk_down, walk_left, walk_right, walk_up and extras loops.

Characters, facings and single poses #

For a moving character, use animate_sprite or generate_walk_sheet above. For single poses, make the front view first, then derive the rest with edit_sprite on it:

Show the same knight from @frame turned to face left in a side view, standing upright, same chibi proportions with the same big round head, still holding the sword, same cape, same pixel art style, thick black outline and colours.
Show the same knight from @frame seen from behind, facing away from the viewer, same cape, same pixel art style, thick black outline and colours.
Show the same knight from @frame mid-stride in a walking pose facing the viewer, left foot forward, same pixel art style, thick black outline and colours.

• If a facing edit comes back still facing the viewer, retry with another seed.
• For the back view, list only what shows from behind (cape, hood, quiver); a listed face scarf ends up on the back.
• Right-facing view: export_sprite with mirror: true on the left-facing sprite, free. Mirroring swaps held items to the other hand, so make walk frames of characters holding something in one hand by edit instead.
• The same character at another size (battle sprite, portrait): edit_sprite on the small master with a larger width. Identity carries over far better than generating the bigger one from text.
• Your own strips: pack_sprite_sheet with columns set to the frame count packs any sprites into an animation strip.

A game world #

• fit: "trim" scales every subject to fill its canvas, so a bush comes out as big as a tree. Set relative scale with a free re-export at a larger padding (small props 0.15 to 0.25), and give tall or wide things a matching canvas: a lamp post at 32 × 64, a tree at 64 × 64, a house at 96 × 96.
• anchor: "bottom" stands props, characters and buildings on their tile instead of floating in its middle.
• Pieces that join their neighbours (fences, doors set into walls) use padding: 0.
• Buildings for a top-down grid: drawn in flat orthographic front view: the front wall faces the viewer straight on and no side walls are visible, the roof is seen from above so it fills the top half of the picture. Without it you get angled houses with a side wall.

Tiles #

tile makes an opaque tile that repeats seamlessly and warns when it does not wrap.

• scatter for loose features on a flat base (grass, sand, snow, dirt, water). Count large features and keep them inside: a flat medium green base with five bold dark green grass tufts, each about one fifth of the tile wide, placed irregularly at different spots, not in rows. Every tuft sits well inside the tile, away from the edges. Asking for a "texture" gives hundreds of tiny features that average to a flat square. A darker 1 px rim on the render is repaired.
• pattern for bricks, planks and flagstones. The render is treated as a larger patch and the most seamless window of the tile size is cut from it, so describe about four large rows: four rows of large grey stone blocks, each about one third of the wall wide and one quarter tall, each row offset by half a block, separated by thick dark mortar lines.
• Use palette 4 to 6 on ground tiles: small features otherwise blur into in-between shades when scaled down.
• Give every variant of one ground type the same base_color so they mix on a map without a checkerboard.
• Keep walkable ground low in contrast so characters read on top of it; save busy texture for walls.

Opaque backdrops and panels: transparent: false and fit: "full". Battle backdrops read best bright, with the floor clearly lighter than the wall.

Recipes #

generate_sprite  prompt "A 16-bit … health potion …", width 32, outline "#140c1c", name "items/potion"   -> 32 x 32
export_sprite    image_id A, width 16                                                                   -> 16 x 16, free
edit_sprite      image_id A, prompt "Make the liquid in @frame bright blue …", name "items/ether"        -> ether, 32 x 32
pack_sprite_sheet image_ids [A, B, …], name "items_sheet"                                               -> atlas + rectangles, free
get_sprite_links image_ids [A, B, …]                                                                    -> named download links

An existing picture with a plain background becomes a sprite for free with export_sprite (give width). A picture with a busy background goes through edit_sprite with a width: the edit replaces the background with the key colour, then it is cut out.