Toolkitly

How to make a sprite stand out against a busy background

The sprite looked fine on its own and disappears into the tilemap. An outline is the standard fix and it usually works — but it is worth ten minutes to find out what the problem actually is, because three of the alternatives are better when they apply.

1. Take the colour away

Screenshot the sprite standing on the background it disappears into, and convert that screenshot to greyscale. This takes a minute and settles the question.

If the sprite still separates in greyscale, readability is not your problem. Something else is bothering you — the sprite reads but does not feel attached to the ground, or its colours clash with the palette, or it is simply smaller than you remember. Those are different fixes and an outline will not touch them.

If the sprite vanishes in greyscale, the sprite and the background share a brightness. This is the actual problem in almost every case, and it is worth naming precisely: hue and saturation contribute far less to whether two things separate than brightness does. A red sprite on a green background of the same brightness is nearly invisible at a glance, and no amount of choosing a different red will fix it.

2. Check the silhouette separately

Fill the sprite with one flat colour and look at the shape alone. This is a different test from the greyscale one and it catches a different failure.

A character whose silhouette is a vague blob is hard to read even on a plain background, and outlining it produces a clearly delineated blob. The fix there is the artwork: a hat, a weapon held out, a distinctive stance — something that makes the shape identifiable before any of the interior detail is visible.

This is worth doing before the outline, because an outline is cheap and can hide that the underlying shape is the problem. It will look better and still be wrong.

3. The three fixes that are not an outline

Push the background's brightness away. If the tiles and the characters occupy the same middle band of brightness, the readable answer is usually to darken the background rather than to lighten the sprites — a darker environment reads as depth, while brighter sprites read as glowing. In practice this means the background art, not a shader.

Drop the background's saturation. Foreground objects that matter can be the only saturated things on screen. This is why so many pixel games have grey-brown environments and vivid characters: it is not a style choice first, it is a readability decision that became a style.

Widen the sprite's own value range. A sprite painted entirely in mid-tones has nothing to grab. Adding a genuinely dark shadow side and a genuinely light lit side makes it separate from anything of a single brightness — and it makes the sprite better independently of the background.

All three are changes to the art rather than a filter over it, and all three keep working when the background changes. An outline solves the specific pairing in front of you.

4. Outlining, properly

When the background genuinely varies — a busy tilemap, a parallax layer, anything the sprite moves across — an outline is the right answer, because it works against everything rather than against one background.

Not pure black. A black outline on a sprite whose darkest colour is a deep blue reads as a sticker pasted onto the scene. Use a very dark version of the sprite's own dominant hue instead: dark enough to separate from any background, related enough to belong to the artwork. Pixel Art Palette Converter reads the palette out of a sprite, which is the fastest way to find that colour.

One pixel, cross corners. At one pixel the outline should follow the four cardinal directions, leaving the diagonal corners open — filling them makes the outline visibly thicker exactly at the corners. Above one pixel the outline starts to read as part of the design rather than as a border, which is a decision rather than a default.

Consider outlining selectively. A full outline all the way round is the flat, uniform look. Outlining only the edges that face the busy part of the screen — or only the outside of the silhouette and not the internal edges — keeps more of the artwork and still separates. Full outlining is a style; selective outlining is usually what a careful artist does by hand.

Outline before you scale. A one-pixel outline enlarged 4× is a four-pixel outline. Either outline at the size the sprite will be seen, or let the engine scale at draw time.

5. If it reads but floats

A separate complaint that gets mistaken for readability: the sprite is perfectly visible and does not look like it is standing on anything.

The fix is a contact shadow — a small, dark, partly transparent ellipse under the feet, drawn on the ground rather than attached to the sprite. It does not need to be physically correct; it needs to touch the sprite where the sprite touches the ground. A drop shadow offset down and to one side does the same job for a UI element or an item lying on the floor.

Worth knowing because the symptom — “something is wrong with how this sits in the scene” — is the same, and an outline does nothing for it.

Common problems

The outline made it look like a sticker

Pure black against artwork with no pure black in it. Use a very dark version of the sprite's own dominant colour.

Outlined, and still hard to see

The problem was value contrast, not edge definition. Check it in greyscale: if the sprite and the background are the same brightness, the outline is the only thing separating them and one pixel is not enough.

The outline is thicker at the corners

The corner style is filling the diagonals. Switch to the cross.

It reads on grass and disappears on stone

A single outline colour cannot suit every background. Either raise the value contrast of the environments themselves, or accept a darker outline that works against the lightest tile you have.

The outline appears inside the sprite

There is a transparent or nearly transparent area in there. Whether or not you wanted the outline, the alpha in that region is not what you think it is.

Everything got a black rectangle around it

The sprites have an opaque background rather than a transparent one, so the silhouette being outlined is the rectangle.

Try it now