Pixel Art Composition: Story, Mood, Focus and Balance

To compose a pixel art scene, answer four questions in this order. What story does it tell? What mood does it express? Where is the focus? How is it balanced? Then check the scene against SPECC: size, perspective, color and light, composition.

Composition is the last C in SPECC, my planning method. A scene that only shows things is a picture. A scene that tells something makes people curious, and that's what you want from a game. Here is how I answer the four questions on my own mockups from the course.

First-person: a dark room and a floppy disk

Animated first-person game mockup: a dark room with shelves, a computer and a hand holding a floppy disk
  • Story. Someone in a dark room holds a floppy disk. The message says it reads "exit" and asks to insert it. The props tell the rest: a torch means darkness, med packs mean danger, a radio at 7% means resources are running out.
  • Mood. Dark and mysterious, so the colors are dark.
  • Focus. The hand with the disk, the computer and the message. The message asks to insert the disk, the only place for it is the computer, so the eye goes there by itself.
  • Balance. Ceiling and floor meet in a horizon across the middle. The furniture sits in the center, the same distance from left and right. The message at the bottom is balanced by the item counters at the top. Corners can be empty, as long as no side feels too heavy or too empty.
The sprite set behind the first-person scene: a column, a cabinet, a desk, a PC, a lamp, a hand with a floppy disk, med packs, a torch and a radio
The sprite set behind it: every prop drawn on its own first.

SPECC check: 180 by 180 pixels, big enough for texture and highlights, small enough to stay pixel art. Everything in the room is oblique perspective except the hand and the counters.

RPG: a pixel art school in 1991

Animated top-down RPG game mockup: a sage in front of a pixel art school with arcade machines and desks
  • Story. A Terminator 2 premiere poster dates the scene to July 1991. Inside, a pixel art school: desks, an isometric cube on the board that hints at the next class, an arcade machine and snacks for breaks. In the top left, a room with no doors and a "secret level" sign.
  • Mood. Nostalgic and cheerful, with friendly colors.
  • Focus. Not one point but a path: first the sage in front, then the school a few steps away, then the secret room. You can plan your own path for the eye.
  • Balance. The school takes half the width, the wall and pavement the other half. And color balance: grays and oranges make up almost every sprite, so the palette stays consistent.
The sprite set behind the RPG scene: an escalator, a grating, desks, PCs, chairs, bushes, pavement, a cooler, an arcade machine, soda and candy
The sprite set: grays and oranges almost everywhere.

SPECC check: 300 by 300 pixels, top down view.

Platformer: a night city by the water

Animated platformer mockup: a night city by the river with mountains, skyscrapers and a promenade
  • Story. A city at night between the mountains and the ocean. An arcade with 1980s nostalgia, a hot dog stand, apartments, an office, a promenade by the water. It could host many games: fighting villains, building a business, racing.
  • Mood. Romantic, adventurous, a lively night.
  • Focus. The middle ground with the street, and maybe the couple on the promenade.
  • Balance. The middle ground sits in the center, so top and bottom balance. Aerial perspective fades the far buildings and mountains, so they don't compete for attention.
The sprite set behind the platformer scene: mountains, water, road and tracks, a bridge, characters, skyscrapers, an arcade, apartments, a hot dog stand and a wine shop
The sprite set, layer by layer.

SPECC check: 320 by 180 pixels, side view. See how it moves in the parallax lesson.

Isometric: one building with a story on every floor

Animated isometric mockup: a modern condominium with an arcade on the ground floor and a blinking sign on the roof
  • Story. A modern city condominium: an arcade room on the ground floor, small cozy apartments above, a banner on the roof for a bit of nostalgia.
  • Mood. Positive and a little nostalgic. The colors are not too vivid and not too pale.
  • Focus. The animated sign on the roof: motion pulls the eye.
  • Balance. A single building stands on its own, so balance matters less here than in a full scene.
The isometric sprite set: building blocks, a roof window, a banner, air conditioners, a table, a green wall, a soda machine, an arcade, a tent and tiles
The isometric set: building floors, not a building.

SPECC check: 320 by 340 pixels, isometric 2:1 lines. Its pieces are in the air conditioner and vending machine lessons.

Your turn

  • What story does my scene tell? Which props tell it?
  • What mood should it have, and do my colors support it?
  • Where should the eye go first, and what leads it there?
  • Is any side or corner too heavy or too empty?

Start from a story, not from objects. Write one sentence, like "someone wakes up alone in a lab and the door is locked", then pick props that tell it and place them until the four answers feel right.