Robot Game Animation Basics

Animation in an arcade game exists to tell you what is happening and what is about to happen. Everything else is secondary, which is why arcade animation looks different from animation intended to look good - it is optimised for being read at speed.

Silhouette does the work

At the speed these games run and the size things are drawn, the outline is what a player actually perceives. Interior detail is largely invisible in motion.

That is why enemy types in a well-built game have genuinely different shapes rather than different colours or textures. A player needs to identify what they are looking at from a glance at the edge of their vision, and only silhouette survives that.

It applies to states as well as to types. A wind-up should change the outline - a shape that grows, contracts or sprouts something - rather than only changing colour, because a colour change in peripheral vision is close to invisible.

Why robots need joints

A specific and slightly odd point: the single most effective thing you can do to make a figure read as mechanical is to make its limbs bend at a point rather than curve.

A limb drawn as a smooth curve reads as flesh; the same limb drawn as two straight segments meeting at a visible joint reads as machinery, even at very small sizes and with no other detail. A small dark dot at the joint strengthens it further.

This is worth knowing because it is a case where a single structural choice does more than any amount of surface decoration. Adding panel lines, rivets and plating to a curved limb will not make it read as a robot; changing how it bends will.

The three phases need three appearances

Where a game has wind-up, active and recovery phases, each needs to look distinct - not merely different in timing.

The wind-up should look like preparation: drawing back, gathering, a growing indicator. The active phase should look like commitment: fast, extended, usually with a trail or arc showing the area covered. The recovery should look like vulnerability: slumped, off-balance, dimmed.

When these are drawn distinctly, a player can read an enemy's state from its pose without any HUD element. When they are not, the player is reduced to guessing from timing, which is far harder and much less satisfying.

Hit feedback is a stack of small tricks

The satisfying feeling when a hit lands is not one effect, it is usually four or five arriving together within a tenth of a second.

• A brief white flash on the target, which confirms the hit registered even in a crowded scene.
• A very short freeze - a few frames where everything stops. This is what makes a hit feel weighty, and it is almost invisible if you look for it.
• Particles from the point of contact, directed along the attack rather than radiating evenly, which conveys direction as well as impact.
• Knockback, which shows force and creates the space that makes the next decision possible.
• A floating number or label, which is the slowest channel and therefore the least important.

Removing any one of these makes hits feel slightly worse in a way players notice without being able to name. The freeze in particular is doing far more work than its visibility suggests.

Respecting reduced motion

Some people find heavy screen motion unpleasant or genuinely unwell-making, and browsers expose a preference for reduced motion that games should honour.

In practice that means disabling screen shake, reducing or removing particle effects and avoiding large sudden camera movements - while keeping everything that carries information. A telegraph must still be visible; a screen shake does not have to happen.

The distinction is the useful one: motion that tells you something stays, and motion that only adds impact goes. A game that removes both has made itself unplayable rather than accessible.

Animating for readability at small sizes

Most arcade animation is viewed at a fraction of the size it was authored at, which changes what is worth animating.

Large-amplitude motion survives downscaling; small detail does not. A wind-up that draws the whole body back is readable at any size, while one that rotates a forearm is invisible at thumbnail scale and marginal even at full size in motion.

Silhouette change survives; internal change does not. An arm extending past the body outline reads instantly; the same arm moving inside the outline reads as nothing at all.

Contrast change survives better than colour change. Something getting brighter is visible peripherally; something changing hue at the same brightness is not, which is why telegraphs use brightness as well as colour.

The practical rule that follows is to animate fewer things further. Three large clear changes communicate more than a dozen subtle ones, and they cost less to draw - which is the rare case where the cheap option and the correct option are the same.

Animation that must never be skipped

When performance drops or reduced motion is enabled, some animation can go and some cannot, and the distinction is worth being strict about.

Anything that communicates state must survive. A wind-up, a stagger, a hit flash, a shield breaking - remove any of those and the game becomes unfair rather than merely plainer.

Anything that communicates only impact can go. Screen shake, particle volume, hit-stop, secondary motion on scenery - all of it makes the game feel better and none of it tells the player anything they cannot get elsewhere.

The test is to imagine the animation removed and ask whether a player could still make correct decisions. If yes, it is decoration and can be cut freely. If no, it is information and must stay at any cost - which is the same test used for whether a sound may be muted.

Frequently asked questions