EMZETT.
Login

Emzett Wiki

Pixel art and sprites: Graphics for small games

Properties1
tagsglossar, spieleentwicklung, grafik

2 min read

Pixel art and sprites: Graphics for small games

In short: Sprites are small images for game characters and objects; pixel art draws them pixel by pixel with few colours and looks clear and charming precisely because of that.

In more detail: A sprite is a 2D image that is moved in the game. In pixel art the individual pixels are visible and deliberately placed. The style arose from the technical limits of old consoles and is especially popular in indie games today because a consistent look can be achieved with little effort.

In Depth

Basics

  • Typical sizes: 16×16, 32×32, 64×64 pixels; the unit stays the same throughout the game.
  • Limit the colour palette (for example 16 to 32 colours). Ready-made palettes: Lospec, PICO-8, Sweetie 16.
  • Light and dark: light comes from one side, shadows with darker tones of the same colour family (hue shifting).
  • No anti-aliasing on edges so they stay sharp.
  • Scale only by integer factors (2×, 3×, 4×) and with nearest neighbour, otherwise it gets blurry. In CSS: image-rendering: pixelated;.

Animation and sprite sheets

Animations consist of individual frames shown quickly one after another (for example walking with 4 to 8 frames, 8 to 12 images per second). All frames lie in a sprite sheet (one image, regularly divided). In the game a section is drawn per frame, for example with ctx.drawImage(sheet, sx, sy, w, h, x, y, w, h) on a canvas. This saves loading time because only one file is loaded.

Tools

Aseprite (paid, popular), LibreSprite (free), Piskel (in the browser), Pixelorama, GIMP/Krita with pixel grid. For tilemaps: Tiled. Free asset sites such as OpenGameArt or itch.io offer sprites, but mind the licence (CC0, CC-BY, attribution).

Rights and creativity

Draw your own sprites or use material with a suitable licence and note the source. Do not copy protected characters (Pokémon, Mario). For beginners: start small, few colours, first one character with idle and walk animation, then the environment.

See also: Game loop and delta time, Creative Commons and image rights, Programming browser games