Isometric Pixel Art Guide — Tiles, Sprites & Characters

Isometric pixel art is drawn on a 2:1 diamond grid: every tile is exactly twice as wide as it is tall, and height is drawn as a vertical run of pixels instead of being simulated by a perspective camera. 32×16 is the workhorse tile size, 64×32 for larger scenes, 16×8 for small props and characters. Once you accept the 2:1 ratio, every other decision — sprite footprints, walk cycles, seams, depth sorting — follows from it.

This page goes through the grid, the tiles, the sprites and the four- and eight-direction character sets in the order you actually build them. Then it covers the step most tutorials skip: turning the same diamond grid into a real, walkable 3D world in the browser, where the camera pitch is fixed to match the art and the tiles become geometry. Neta Studio's 3D game builder is the tool we use for that last step, and it is why the projection details here are worth getting exactly right.

Quick Answer: What Makes Pixel Art "Isometric"?

Isometric pixel art is a rotated projection, not a perspective one. The world's X and Y axes both run diagonally on screen — right-and-down for one, left-and-down for the other — and the vertical axis runs straight up in single pixels. Nothing converges, there is no vanishing point, and depth is a convention you maintain by hand: lower on the canvas means closer, a taller run of pixels means higher.

The ratio is 2 across to 1 down on both ground axes, which puts every ground edge at about 26.57° from horizontal. Technically that is a dimetric projection; true isometric has equal foreshortening on all three axes at roughly 35.264° above the horizon and produces a ground tile about 1.732:1. The name stuck because "isometric" is the word people use, and almost every tileset you will find is drawn at 2:1.

The 2:1 Grid

2:1 exists because it maps to square pixels. An edge at 2 across and 1 down is a clean staircase — two pixels right, one pixel down, repeating — so every edge pixel lands on a whole pixel when you stamp the tile. A true 30° projection is a ratio of about 1.732 to 1: for every 2 pixels across you move 1.155 down. That cannot land on a pixel grid, so edges alternate between one-pixel and two-pixel runs and the line wobbles. You can hand-place those pixels for one hero prop; you cannot do it for a tileset that has to stamp thousands of copies.

The failure case people actually hit is rotating a square canvas by 45° and calling the result isometric. A 45° rotated square is still a square: the diamond is equal width and height, the top face and the side faces end up with the same silhouette, and adjacent depth rows stop separating cleanly. Draw the diamond at 2:1 from the first pixel; never rotate a 16×16 or 32×32 sprite to make a tile.

Keep the tile step in your head as an offset. At 32×16, moving one tile east is +32 on x and +16 on y in screen space; moving one tile north is +32 on x and -16 on y. That single pair of offsets is what you use for placement, for sprite movement and for depth sorting.

Drawing Your First Isometric Tile

Draw one tile before you draw a tileset. The goal is a tile you can stamp without re-fixing, which means every edge pixel stays on the 2:1 step and the three visible faces share one value ramp: top face at the base value, one side one step darker, the other two steps darker.

The two side faces are what make it read as isometric. If both sides use the same value the cube flattens into a hexagon and the eye stops reading height. Pick a light direction — upper-left is the convention — and never change it inside a project. Every tile and every sprite then agrees about where the light is.

Isometric Sprites & Sprite Sheets

A side-view sprite has a rectangular footprint and walks horizontally. An isometric sprite has a diamond footprint, and its feet sit inside that diamond. Everything about the sheet follows from that: the anchor is the diamond's centre, or the bottom corner of the diamond if you prefer to think in feet, and the sprite is blitted at the same tile origin as the ground tile it stands on.

Movement on screen is diagonal. Moving one map tile east is +32 pixels right and +16 down; one tile north is +32 right and -16 down. So an east-facing walk cycle is not a horizontal loop — the body drifts along the 2:1 slope while the legs cycle. If the per-frame offsets are drawn on a horizontal line, the character skates across the tile. Test it by placing four copies along a diagonal and confirming the feet track the tile centres.

Lay the sheet out as rows for direction and columns for frame, in a uniform cell. A 32×16 footprint with a 32-pixel-tall character fits in a 32-wide by 48-tall cell: 16 pixels for the diamond, 32 above it for the body. Keep the alpha binary, 0 or 255. Semi-transparent edge pixels pick up whatever is behind them once the sheet is packed or scaled, and you get a light halo around every character against a dark tile.

Isometric Characters (4/8 directions)

Four directions is the standard because the ground grid has four diagonals: south-east, south-west, north-east, north-west. Those facings cover all movement along the map axes. Eight directions adds the screen-cardinal facings — north, south, east and west — which only appear when the character walks diagonally across the grid, along both axes at once. That doubles the art, and the four extra rows are only seen while the player holds two keys.

The engine needs a deterministic lookup. Either row equals the direction index and column equals the frame, or a flat index of directionIndex * framesPerDirection + frame. Write the order down in a text file next to the sheet. The classic bug is a sheet authored east-first and imported south-first, so one direction faces backwards and the report comes back as "the walk animation looks wrong".

Frame counts and timing

A walk cycle reads at 8 to 12 frames per second. Four frames at 8 fps is 125 ms per frame; six frames lets you draw a contact pose and a passing pose and moves more smoothly along the 2:1 diagonal without much extra work. Keep the frame count identical in every direction row unless your metadata stores a per-direction count — a six-frame row next to four-frame rows plays at the wrong speed the moment the code assumes a uniform grid. Idle is one or two frames on a slow loop. Attacks and interactions go on a separate sheet at the same cell size so the pivot never changes.

Flipping is cheaper and usually wrong

Mirroring east to west halves the drawing. It also mirrors the light. If your light comes from the upper-left, a flipped sprite is lit from the upper-right, and asymmetric details — a shield arm, a scabbard, a satchel strap — end up on the wrong side. Mirror only when the character is symmetric and the shading is flat enough that no one notices, and never mirror a sprite carrying a strong directional highlight.

Objects, Props & Height

A prop's art box is taller than its footprint. A tree with a 1×1 footprint (32×16) and 40 pixels of canopy above it needs a cell 32 wide and about 56 tall: 16 for the diamond, 40 for what rises above it. Decide that cell size once and keep every prop inside the same module, or the importer will need a per-sprite offset for each one.

Multi-tile props are drawn on a bigger diamond. A 2×2 building covers four tiles, so its ground footprint is a 64×32 diamond even if the art rises 48 or 64 pixels above it. Keep the origin at the footprint's centre — for a 2×2 prop that is the point where the four tiles meet — not at the centre of the sprite's bounding box. Bounding-box centring puts the base half a tile off, and the building looks like it is floating over one corner of its own plot.

Depth sorting in a 2D isometric renderer is the painter's algorithm: sort by tileX + tileY, then break ties with a per-object priority. Tall props break it. A tower six tiles high placed at row 2 is drawn over a wall at row 5 that should occlude it. Two fixes: split tall props into a base and an upper section and sort each by the rows it actually covers, or give every sprite a per-tile occupancy mask so the renderer knows which rows it overlaps.

Tilesets That Don't Repeat

There are two seams in an isometric set and they need different fixes. The value seam is where a side face meets the top face of the tile below it: if the wall base is lighter than the ground top, you get a bright line along every wall on the map. The pattern seam is where a run of identical ground tiles repeats — the 2:1 step is regular enough that the eye locks onto the rhythm after about three tiles.

Edge variants hide the pattern. The minimum useful set is nine: one centre tile, four tiles with a transition on a single edge, and four with transitions on two adjacent edges. Draw the transition as a soft, broken band of two to four pixels rather than a straight line, or you have moved the seam instead of removing it. Randomise placement with a hash of the tile coordinate rather than a running random number generator, so the same world regenerates identically every time — that matters when the world is rebuilt from a written description.

The adjacency graph is the same as for orthogonal tilesets: four edge neighbours and four diagonal neighbours per tile. That is why the 47-tile blob set transfers unchanged from orthogonal work — only the artwork differs. Do not enable diagonal-only cases unless you have drawn them, or you will get corner artefacts or a one-pixel gap where two ground tiles disagree.

• 47-tile blob setCovers every four- and eight-neighbour combination, including the diagonal-only cases that a nine-tile set leaves out. Same tile count as an orthogonal blob set; only the art changes.
• Nine-tile setCentre, four single-edge tiles, four corner tiles. Cheap to draw, covers most ground transitions, and fails only on diagonal-only cases if your placement rules forbid generating them.
• Mirror variantsFlipping a ground tile horizontally is free variation when the tile has no light cue. Never mirror a wall or a lit prop: the light direction flips with it and the tile stops matching its neighbours.

From 2D Iso to a Playable 3D Iso World

A 2:1 diamond is what you get from an orthographic camera at yaw 45° and pitch 30°. At 30° the vertical shrink is exactly sin(30°) = 0.5, so a square ground tile projects to a diamond twice as wide as it is tall — the same ratio as the pixels you drew. The true isometric pitch of 35.264° gives 1.732:1 and will not match a 2:1 tileset. So a 32×16 tile maps cleanly onto a 1×1 world unit, and the whole 2D set can be used as textures on flat quads or extruded into boxes without redrawing anything.

Two things break when the camera moves. First, free orbit: at yaw 37° the tile edges land between pixels and the entire map shimmers. Lock pitch at 30°, snap yaw to 90° increments, and if you animate a rotation, snap back before it settles. Second, lighting: the art carries a baked upper-left light. If the key light stays fixed in world space and the camera rotates 90°, the shading in the art now disagrees with the scene. Parent the key light to the camera, or bake the shading into the texture and keep the light screen-relative.

If you want the pixel look preserved in WebGL, render at a low internal resolution and scale up with nearest-neighbour filtering, and snap the camera position to whole screen pixels. Otherwise texel centres land between fragments and the art crawls while the character walks, which reads as a texture bug even though the artwork is fine.

Neta Studio's 3D game builder takes a written description and builds a real Three.js world in the browser with an orthographic camera at the fixed pitch — walkable, no local toolchain. Mini World is the small-scale version of that and is the fastest way to test whether a tileset and a character set read correctly before committing to a large map. The Cyclops' Island is a finished example world you can walk around to see the projection working. For characters, Agent Sprite Forge produces sprite sheets at a chosen cell size, which is what keeps the pivot consistent across directions.

Isometric Pixel Art Software

Everything on this page can be done in a raster editor with a grid. What the dedicated tools add is tile awareness: a tile map mode that shows the tile you are drawing against its neighbours, so you see the seam while you paint instead of after you stamp it two hundred times.

Choose by what you have to produce rather than by feature lists. Tiles need a grid, a tile preview and a stable palette. Characters need onion skin, uniform cells and a sheet export that carries a pivot. Maps need a tool that stores tile coordinates, because a PNG is not a map.

• AsepriteRaster editor with a tile map mode, tile grid, onion skin and sheet export with JSON that carries frame tags and pivot. The tile preview is the reason it gets used for tilesets: you can see the seam while you paint it.
• LibreSpriteOpen-source editor from the same codebase. The tile workflow is largely the same; expect fewer of the later features.
• Krita and PhotoshopGeneral raster editors. Grid guides and symmetry get you a diamond, but neither has a tile map mode, so you stamp by hand. The offset filter — shift the canvas by half the tile size and look at the middle — is still the quickest way to find a value seam.
• TiledA map editor, not an art tool. Stores tile coordinates, supports isometric orientation with a 2:1 tile size, and exports the layer data. Draw in one tool, place in another.
• Neta Studio's 3D game builderBrowser-based. A written description becomes a playable isometric world in Three.js, so you skip the local toolchain and the import step entirely and test whether the art reads at the correct camera pitch.
• Agent Sprite ForgeGenerates sprite sheets for characters, which is usually the longest part of an isometric set. Fix the cell size and the direction count before you generate; a sheet built at a different cell size will not fit your tiles.

Walk into the world it belongs to

A sprite is a character with nowhere to stand. The last step is the one nobody else offers: take the sheet you just built and put it in a world someone can walk around in — a small island, a planet, a rainy street corner. Every world on this site was made from one written description and published as a page you can play.

FAQ