Browse the knowledge base
5x · Animals and creatures
Skills
- Take any Aseprite request end to end
- Plan a sprite before drawing it
- Design it first — concept sheet and storyboard
- Create a sprite document
- Choose, build and repair a palette
- Draw a sprite
- Shade a sprite
- Rig a character for animation
- Animate a cycle
- Build a tileset
- Review a sprite before calling it done
- Fix or iterate on existing art
- Export game-ready assets
- Submit a finished sprite to the community gallery
Rule
rules://71-isometric Isometric (2:1)
Isometric fails at the first line: a true 30° edge makes an uneven 2,3,2,3 stair and
the whole scene looks hand-wobbled. Everything below follows from one fact, pixel
isometric is a 2:1 dimetric grid, and from one habit, never eyeball a cube, a circle
or a roof. For the choice between projections see rules://70-perspective.
Rules
#- The edge is 2:1. Two pixels across per one pixel up or down (26.57°). Allowed edge directions: vertical, 2:1 (both ways), 1:1, 1:2 steep (windscreens, tapers), horizontal only for the rare flat rim. Every receding edge in the scene is the same 2:1 line, runs of exactly 2,2,2. A 4,4,4 run is worse than 2,2,2; 2,3,2 is a bug.
- Draw lines with
drawoplinefrom a point to a point with dx = 2·dy, thenlookopasciiand confirm every row has the same run. Keep a ruler: one spare layer with one long 2:1 line you can slide against edges. - A tile is a diamond twice as wide as tall, even sizes only: 16×8, 24×12,
32×16 (the default), 48×24, 64×32 (modern). Every tile in a set has one size.
With a 4 px apex the row width is
min(4·(row+1), 4·(H−row)); apex runs of 2, 3 or 4 px are all seen, pick one and never mix. - A cube is the diamond plus a side of half its width: footprint W×W/2, side
height W/2, silhouette W×W. Row width =
min(W, 4·(row+1), 4·(W−row)). A slab of thickness h replaces the second W/2 by h:min(W, 4·(row+1), 4·(h+W/2−row)). Visible: 3 faces, 9 edges; the far corner is never drawn. - Three values, one light, whole scene. Light from the upper left: top lightest, left face middle, right face darkest. Never flip it per object. Numbers (HSB brightness): top = base, convex edge +10%, left −15%, right −25% (two stacked 15% shifts make 27.75%, not 30%). Warm the top, cool the dark face.
- Edges: an outer convex edge gets a lighter 1 px line just inside the silhouette;
inner concave edges stay darker but readable. Outline last, selective
(
rules://04-outlines-and-edges); "black" objects still need left/right values. - Verticals stay vertical, 1 px per px. No vanishing point, no foreshortening: an object can be moved anywhere on the grid without redrawing.
- Grid arithmetic (tile W×W/2): one step along +x moves the screen by (+W/2, +W/4), along +y by (−W/2, +W/4), one cube up by (0, −W/2). Nearer tiles overlap the ones behind, so draw back to front: ascending x+y, then ascending height.
- Floor circles are 2:1 ellipses (16×8, 24×12, 32×16 …): table and templates in
rules://72-3d-forms.drawopellipsewith that box draws the table exactly. - Circles on a wall are skewed circles. Draw the flat circle, shear it by 1 px per 2 px across (left wall: slope down to the right, right wall: mirror) and repair the first and last rows by hand. Bounding box ≈ d wide by 1.12·d tall. Even tricky shapes (round windows, evenly spaced arches) are planned in front view first.
- Cylinder = two ellipses joined on the vertical. Top flat-lit; body shaded in columns, never rings; the bottom edge is the lower half of the same ellipse shifted down by the height; a taper uses a smaller top ellipse.
- Build from cuboids, then carve (arches, stairs, cut-outs), texture last. Cone and pyramid: base diamond, apex above its centre; find the apex by copying the diamond up and crossing the diagonals. A sphere is a circle anywhere.
- Stairs and ramps: one slope per object: 1 px up per 2 px along the floor axis (26.6°), or 1 px per 1 px for steep ones.
- Tall tiles (walls, towers) share the footprint and extend upward. A water tile is about half cube height so it sits lower. Each of the three faces of a terrain tile must loop on its four sides. Do not mix flat-colour, textured and hi-detail tile sets in one scene.
- Ground every object with a flat shadow: a 2:1 ellipse or diamond in one dark colour toward the lower right (light upper left). Floating objects look pasted without it.
- Characters: the footprint is the diamond; the body is free-hand, a 2:1 stair across a round body looks robotic. Thin body, slightly large head, one shoulder visible, one foot lower on screen, eyes 1 px each with 1 px between, interior lines lighter than the outline. A person is 24–32 px on a 32×16 grid. Mechs at 32 px: torso like a tank front, shoulders higher than the head, leg+foot one unit (skis, talons, not shoes).
- Do not convert flat art with
transform.transformoprotateis clean only at 90° andscaleis integer-only. Map by arithmetic instead: world tile (x, y) and height z in px → screen ((x−y)·W/2, (x+y)·W/4 − z), then draw. - 45° dimetric (1:1 steps) is the alternative when tall structures must not block play; one choice per game, never mixed with 2:1. Iso is poor for twitch games (distances are hard to judge): say so when asked for an iso platformer.
By size
#| Size | What survives |
|---|---|
| 8 | Not worth it: an 8×4 diamond is a smudge. Use plan or 3/4 view. |
| 16 | Tile 16×8 (diamond rows 4,8,12,16,16,12,8,4), cube 16×16 (template). Props ≤ 16 px, 3 values, no inner outline. |
| 32 | Tile 32×16, cube 32×32, character 24–32 px, 1 px edge highlights, ellipse shadows. |
| 64 | Tile 64×32 or 128×64 for detail, texture per face, cars 63×45, windows and trim lines. |
Templates
#iso-lines-2to1 — the four legal edge families (2:1 down, 2:1 up, 1:1, 1:2). Compare any hand line against these runs.
iso-lines-2to1 · 36×6Lline
Grid source
L = line #4d3b6b
---
LL.....................LL.L......L..
..LL.................LL....L.....L..
....LL.............LL.......L.....L.
......LL.........LL..........L....L.
........LL.....LL.............L....L
..........LL.LL................L...Liso-tile-32 — flat ground tile 32×16, 4 px apex, 2 px edge line; the row widths are
min(4·(row+1), 4·(16−row)).
iso-tile-32 · 32×16Otile-edgeTtile-fill
Grid source
O = tile-edge #4d6b3f
T = tile-fill #79a35a
---
..............OOOO..............
............OOTTTTOO............
..........OOTTTTTTTTOO..........
........OOTTTTTTTTTTTTOO........
......OOTTTTTTTTTTTTTTTTOO......
....OOTTTTTTTTTTTTTTTTTTTTOO....
..OOTTTTTTTTTTTTTTTTTTTTTTTTOO..
OOTTTTTTTTTTTTTTTTTTTTTTTTTTTTOO
OOTTTTTTTTTTTTTTTTTTTTTTTTTTTTOO
..OOTTTTTTTTTTTTTTTTTTTTTTTTOO..
....OOTTTTTTTTTTTTTTTTTTTTOO....
......OOTTTTTTTTTTTTTTTTOO......
........OOTTTTTTTTTTTTOO........
..........OOTTTTTTTTOO..........
............OOTTTTOO............
..............OOOO..............iso-cube-16 — plain three-value cube, no outline. The base for blocks, crates, house volumes.
iso-cube-16 · 16×16TtopLleft-faceRright-face
Grid source
T = top #e6d6ac
L = left-face #b79a7d
R = right-face #7e6574
---
......TTTT......
....TTTTTTTT....
..TTTTTTTTTTTT..
TTTTTTTTTTTTTTTT
TTTTTTTTTTTTTTTT
LLTTTTTTTTTTTTRR
LLLLTTTTTTTTRRRR
LLLLLLTTTTRRRRRR
LLLLLLLLRRRRRRRR
LLLLLLLLRRRRRRRR
LLLLLLLLRRRRRRRR
LLLLLLLLRRRRRRRR
LLLLLLLLRRRRRRRR
..LLLLLLRRRRRR..
....LLLLRRRR....
......LLRR......iso-cube-16-outlined — outer outline plus lighter top-edge pixels (E). Stamp it, then retint roles.
iso-cube-16-outlined · 16×16OoutlineEtop-edgeTtopLleft-faceRright-face
Grid source
O = outline #2d2233
E = top-edge #f7efd2
T = top #e6d6ac
L = left-face #b79a7d
R = right-face #7e6574
---
......OOOO......
....OOTTTTOO....
..OOTTTTTTTTOO..
OOTTTTTTTTTTTTOO
OETTTTTTTTTTTTEO
OLEETTTTTTTTEERO
OLLLEETTTTEERRRO
OLLLLLEEEERRRRRO
OLLLLLLLRRRRRRRO
OLLLLLLLRRRRRRRO
OLLLLLLLRRRRRRRO
OLLLLLLLRRRRRRRO
OOLLLLLLRRRRRROO
..OOLLLLRRRROO..
....OOLLRROO....
......OOOO......iso-cubes-pair-16 — two neighbouring blocks (+x step = (8,4)); shows draw order and how the outline separates overlaps.
iso-cubes-pair-16 · 24×20OoutlineEtop-edgeTtopLleft-faceRright-face
Grid source
O = outline #2d2233
E = top-edge #f7efd2
T = top #e6d6ac
L = left-face #b79a7d
R = right-face #7e6574
---
......OOOO..............
....OOTTTTOO............
..OOTTTTTTTTOO..........
OOTTTTTTTTTTTTOO........
OETTTTTTTTTTTTOOOO......
OLEETTTTTTTTOOTTTTOO....
OLLLEETTTTOOTTTTTTTTOO..
OLLLLLEEOOTTTTTTTTTTTTOO
OLLLLLLLOETTTTTTTTTTTTEO
OLLLLLLLOLEETTTTTTTTEERO
OLLLLLLLOLLLEETTTTEERRRO
OLLLLLLLOLLLLLEEEERRRRRO
OOLLLLLLOLLLLLLLRRRRRRRO
..OOLLLLOLLLLLLLRRRRRRRO
....OOLLOLLLLLLLRRRRRRRO
......OOOLLLLLLLRRRRRRRO
........OOLLLLLLRRRRRROO
..........OOLLLLRRRROO..
............OOLLRROO....
..............OOOO......iso-cylinder-16 — barrel, drum, pillar: flat top, column bands (highlight stripe two columns in from the lit edge), 16×8 top ellipse, lower half-ellipse base one body height (9 rows) below it; a 1 px highlight rim marks the front edge of the top.
iso-cylinder-16 · 16×170core-shade1shade2mid3lightTtop-flatHhighlight
Grid source
0 = core-shade #685a6e
1 = shade #8c7480
2 = mid #b29679
3 = light #d4bb93
T = top-flat #e6d6ac
H = highlight #f3e7c4
---
....TTTTTTTT....
..TTTTTTTTTTTT..
.TTTTTTTTTTTTTT.
TTTTTTTTTTTTTTTT
TTTTTTTTTTTTTTTT
3TTTTTTTTTTTTTT0
33HHTTTTTTTTHH00
33HHHHHHHHHH1100
33HH333322221100
33HH333322221100
33HH333322221100
33HH333322221100
33HH333322221100
33HH333322221100
.3HH33332222110.
..HH3333222211..
....33332222....iso-wall-circle-12 — a circle on the left wall face (flip horizontally for the right face): porthole, window, shield boss.
iso-wall-circle-12 · 12×13Cshape
Grid source
C = shape #8c7bb0
---
.CCCCC......
CCCCCCCC....
CCCCCCCCC...
CCCCCCCCCC..
CCCCCCCCCC..
CCCCCCCCCCC.
.CCCCCCCCCC.
.CCCCCCCCCCC
..CCCCCCCCCC
..CCCCCCCCCC
...CCCCCCCCC
....CCCCCCCC
......CCCCC.Procedure
#- Choose tile size and light direction; create a
rulerlayer with one long 2:1 line. - Stamp a cube/tile template with
drawopgrid(transparent: "skip"to overlay existing art), or compute the silhouette from rule 4 for other sizes. - Block the mass from cuboids on one layer per part (
layeropcreate); carve last. - Colour faces top/left/right from one ramp (
paletteopramp,rules://02-shading-and-light). - Add a 1 px light edge on convex corners, a flat shadow ellipse on the ground.
lookopasciion edges to verify 2,2,2 runs;lookoppreviewat 1×; outline last (transformopoutlinesideinsidekeeps the size);validate.
Mistakes
#| Symptom | Cause | Fix |
|---|---|---|
| Jagged, uneven edges | Free-hand or 30° lines | Redraw with draw op line at dx = 2·dy |
| Object looks pasted on | No ground shadow | Add a flat 2:1 shadow |
| Faces read as one blob | Same value on left and right | Left −15%, right −25% |
| Light flips between blocks | Per-object lighting | One light for the scene |
| Round things look oval and flat | Circle eyeballed | Use the ellipse/skew templates |
| Tiles show gaps or double pixels | Mixed apex widths | One apex width per set |
| Stair of cubes looks wrong | Wrong draw order | Ascending x+y, then height |
Review
#- Every receding edge is 2:1 with regular runs; verticals are vertical.
- Three face values, light from one fixed side across all objects.
- Tile and object sizes even and consistent; apex style never mixed.
- Floor circles are 2:1 ellipses; wall circles are skewed, not stretched.
- Shadows on the ground in one direction; draw order back to front.
- Colour and texture level match across tiles in the scene.
Sources
#- Slynyrd, Pixelblog 4, 41, 54, 61 (isometric, cubes, tiles, vehicles, mecha).
- Pixel Logic (Ch. 6: 2:1 line, circles on planes, sprite-to-iso skew).
- Drububu and Pixelbath isometric guides; Tuts+ isometric character and vehicle tutorials.
- Saint11, Isometric tutorial; Cheishiru and Pixnote isometric room guides.
- Robertson & Bertling, How to Draw (forms on a grid, ellipse degrees).