Isometric pixel art for games — grids, sprites, and tilesets

Why isometric?

Isometric pixel art fakes 3D on a flat screen. You're not looking at objects from the side like a platformer, and you're not staring straight down like a top-down game. You're seeing things at an angle — roughly 30 degrees from horizontal — and that angle gives everything depth without needing actual 3D rendering.

SimCity 2000 did it. Diablo II did it. Hades does it. There's a reason this perspective keeps coming back: it looks incredible for pixel art, and it communicates spatial information way better than a flat side view.

The catch? Isometric art has rules. Break them and your tiles won't line up, your characters will float above the ground, and everything will look slightly wrong in a way that's hard to pin down. So let's get the fundamentals right.

The grid (get this right or nothing works)

The 2:1 pixel ratio

True isometric is 30 degrees. But 30-degree lines look terrible in pixel art — they create uneven, jagged diagonals. So pixel artists use a 2:1 ratio instead: for every 2 pixels you move horizontally, you move 1 pixel vertically.

    ╱╲
   ╱  ╲
  ╱    ╲
 ╱      ╲
╱        ╲
╲        ╱
 ╲      ╱
  ╲    ╱
   ╲  ╱
    ╲╱

That diamond shape is the foundation of everything. Every tile, every building, every character sits on top of diamonds like this.

What size should your tiles be?

Notice the pattern: width is always 2x the height. That's the 2:1 ratio showing up again at the tile level.

64×32 is the sweet spot for most projects. Small enough to be manageable, detailed enough to look good. Start there unless you have a specific reason not to.

Alignment matters more than you think

Every tile corner has to sit at exactly the right spot. A single pixel off creates visible seams when tiles are placed next to each other, and once you notice the seams you can't un-notice them.

The four corners of your diamond:

• Top: Center top
• Left: Left point
• Right: Right point
• Bottom: Center bottom

Every object you place on the grid anchors to these points.

Drawing your first isometric tile

Let's make a 64×32 grass tile. Nothing fancy — just getting the process down.

Step 1: Draw the diamond outline. Your four corners are at (32, 0), (63, 15), (32, 31), and (0, 15). Connect them with 2:1 diagonal lines.

Step 2: Fill it with your grass color. Something like #4a8f4a works.

Step 3: If you want depth (making it look like a raised block rather than a flat surface), draw vertical lines down from the left and right corners, connect the bottom, and fill the sides with darker shades.

Step 4: Add surface detail. Subtle color variation, small texture marks. But keep the edges clean — if the edges don't match neighboring tiles, you'll get seams.

That's it. Your first tile. Now make four more and place them next to each other to see if they actually tile correctly. If they don't, fix the edges before moving on. Catching alignment issues early saves enormous pain later.

Isometric characters

Here's where it gets tricky. A side-view character only needs to face left and right. An isometric character needs multiple angles.

How many directions do you actually need?

The minimum that looks acceptable: 2 hand-drawn directions (SE and NE) plus their mirrors. That gives you 4 apparent directions with half the work. For a finished game you'd want all 8, but for prototyping and game jams, 2+mirrors is plenty.

Anyone who's manually drawn walk cycles in 8 directions for a single character knows this is where the time goes. It's also why tools like PixelLab that auto-generate directional rotations are genuinely useful for isometric projects.

Proportions

Isometric characters are wider and shorter than side-view sprites. They're drawn at the same angle as the ground plane, which compresses their height. Common sizes:

• 32×32 for small characters on 64×32 tiles
• 48×48 for larger, more detailed characters
• 64×64 when you want real detail

The key alignment rule: your character's feet (the "ground point") should sit exactly on tile intersections. Get that wrong and they'll look like they're hovering.

Objects and props

Everything follows the same 2:1 grid. But different objects need different approaches.

Boxes and crates are the simplest isometric object and great practice. Draw the top diamond, add a left face going down-left, a right face going down-right. Light comes from the top-left (that's the standard convention), so: top surface is lightest, left face is medium, right face is darkest.

Trees and tall objects need careful grounding. The trunk grows straight up in screen space (not at an angle), and the canopy can extend beyond the base tile. Add a shadow to show where the base actually is.

Buildings and large objects spanning multiple tiles are the hardest part. Plan the footprint first — figure out exactly which tiles it covers. Draw the base aligned to all those tiles. Then build upward. Test in your engine early, because misalignment in multi-tile objects is painful to fix later.

Building tilesets that work

A tileset is only useful if the tiles actually connect. Here's what you need at minimum:

Ground tiles (3-5 types): grass, dirt/path, water, stone. Plus transition tiles for where grass meets dirt, dirt meets water, etc. Transition tiles are tedious but they're what make a tileset look professional instead of like a checkerboard.

Edge tiles: cliffs, water edges, wall bases. These handle elevation changes and boundaries.

Decoration: 2-3 tree variants, rocks, basic structures. Enough variety that the world doesn't look copy-pasted.

Making tiles not look repetitive

Create your base tile, then duplicate it 3-4 times and make subtle changes to each copy. Different grass blade positions, slightly shifted stone arrangements, small color variations. Place these variants randomly in-game and the repetition mostly disappears.

Testing seamless tiling

Place your tile in a 3×3 grid. Stare at the edges. Do they match perfectly in all four directions? Any visible seams? Fix those before finalizing. It's tempting to skip this step — don't. Tiling bugs compound fast when you're building actual levels.

Height and elevation

Most isometric games aren't flat. You need ways to show different levels.

Stacking tiles is the standard approach: ground tile at the base, a cliff or wall tile showing the side face, and a top tile for the upper surface. Tile height is typically half the tile width — so 64×32 tiles get 16px of height per level.

Ramps connect heights smoothly. They need to maintain the 2:1 ratio on the slope while matching both the lower and upper level tiles at their edges. They're fiddly to get right.

Depth sorting is the engine's job, but you need to understand it when designing. Objects further from the camera draw first, closer objects draw on top. Characters need to sort correctly with the environment. Every engine handles this differently, and it's worth setting up early because depth sorting bugs look terrible.

Using AI for isometric sprites

AI sprite generators can handle isometric art, but you need to be specific in your prompts or you'll get side-view output.

Prompt structure that works

Always include "isometric" and "2:1 perspective." Without those keywords, most generators default to side view.

isometric pixel art wooden crate, game asset,
2:1 perspective, 64x64, simple shading

isometric pixel art knight character, game sprite,
facing south-east, 2:1 perspective, 48x48

isometric pixel art tree, game asset,
stylized, 2:1 perspective, fantasy style

Mentioning "game asset" or "game sprite" signals you need clean, usable output — not an artistic illustration.

Generate isometric sprites →

Where AI needs help

AI gets the general isometric look right but struggles with precision. You'll likely need to manually fix:

• Grid alignment (edges rarely line up pixel-perfect)
• Tile seams (AI doesn't know your tiles need to connect)
• Exact dimensions
• Seamless tiling

The workflow: generate the base with AI, then refine edges and alignment in a pixel editor. It's still much faster than drawing from scratch.

Engine-specific setup

Unity

Set Pixels Per Unit to match your tile size. Use the Tilemap component with "Isometric" grid type. Sorting mode should be "Custom Axis" with (0, 1, -0.26). For characters, set Sprite Sort Point to the feet.

Godot

Create a TileMap node, set tile shape to "Isometric," configure your tile dimensions (e.g., 64×32). Enable Y Sort for proper depth — characters need Y Sort Enabled too, or they'll render on top of everything regardless of position.

GameMaker

No built-in isometric support, so you'll handle it manually. Convert grid coordinates to screen position:

screen_x = (grid_x - grid_y) * (tile_width / 2)
screen_y = (grid_x + grid_y) * (tile_height / 2)

Sort draw order by grid_x + grid_y and you're set.

Mistakes that'll cost you hours

Wrong angle. Using 45 degrees instead of 2:1 creates jagged, ugly diagonals. Count your pixels: 2 horizontal, 1 vertical. Always.

Inconsistent lighting. If one tile has light coming from the top-left and another from the top-right, the scene looks broken even if you can't immediately explain why. Pick a direction (top-left is standard) and stick to it for everything.

Tile seams. The number one frustration in isometric art. Edge pixels must match exactly between adjacent tiles. There's no shortcut here — test in a grid.

Characters too big for tiles. Feet should fit comfortably on one tile. Head can extend beyond, that's fine. But if the character's body covers three tiles, your depth sorting will be a nightmare.

Forgetting depth sort. Set it up in your engine before you have a hundred objects on screen. Retrofitting depth sorting is miserable.

Practice exercises

1. Basic tile: 64×32 grass tile. Place 9 copies in a 3×3 grid. No seams allowed.
2. Isometric cube: Three visible faces with consistent shading. Get the 2:1 angles right.
3. Simple character: South-east facing, under 32×32. Feet aligned to the grid.
4. Mini tileset: 5 tiles — grass, dirt, water, a grass-to-dirt transition, and one tree. Test them together.

Resources

Palettes: Lospec Isometric Palettes

Games worth studying: Hades (action RPG with gorgeous isometric art), Into the Breach (clean tactical isometric), Bastion and Transistor (stylized isometric action).

Generate isometric sprites:

• Create isometric character →
• Create isometric tile →
• Create isometric object →

The 2:1 grid is the whole secret. Once you internalize that ratio, isometric pixel art stops being mysterious and starts being systematic. Draw the diamond, follow the angles, test your tiles early and often.

Related posts

Blog

2D pixel art for games: complete style guide

A practical style guide for 2D pixel art in games. Covers pixel art styles from 8-bit to modern HD, resolution choices, color theory, and keeping your assets consistent.

Blog

Anime pixel art — the JRPG tradition that never left

How anime pixel art evolved from SNES JRPGs to modern indie games. Techniques for eyes, hair, poses, and palettes at small scales.

Blog

How to make a pixel art game — the practical roadmap

A step-by-step plan for making your first pixel art game. Engine choice, art pipeline, scope control, and the tools that save the most time.