Draw Order in 2D Games: What Ends Up on Top and Why

Draw order in 2D games is the order in which the game paints its pictures onto the screen, every frame. Whatever is painted last ends up on top. That one rule decides whether you see a tank, a shot, or the patch of ground the tank is driving over. This guide explains the idea, then shows you the real numbers inside a small browser game so you can check them yourself.

What is draw order in 2D games?

A 2D game screen is flat. There is no real depth. To make one thing look in front of another, the game paints pictures one after another, and each new picture covers what is already there.

Draw order is the list that says who goes first. Early items end up at the back. Late items end up at the front.

The pictures being painted are called sprites. If that word is new, start with our guide to what a sprite is in video games.

The painter's algorithm: paint the far things first

The oldest name for this idea is the painter's algorithm. It sorts shapes by how far away they are, then paints them from the farthest to the closest.

The name comes from how many painters work. They paint the distant parts of a scene first, then paint nearer parts over them. Nothing gets erased. Later strokes simply cover earlier ones.

Martin Newell, Richard Newell and Tom Sancha proposed it in 1972 as a basic way to decide which surfaces stay hidden.

In a 2D game the steps look like this:

1. Start the frame.
2. Paint the thing at the very back.
3. Paint the next thing forward.
4. Keep going until the front thing is painted.
5. Show the finished frame.

Z-order: a number that says what sits on top

You also see the word Z-order. It is an ordering of flat things that overlap, such as windows on a computer desktop. When two of them overlap, the Z-order decides which one appears on top.

The Z comes from the third axis. X runs left to right, Y runs up and down, and Z points toward you, out of the screen.

One way to do this is to give each sprite a number. Sort by that number, then paint in that order, and you have draw order. You do not need to compare every sprite with every other sprite. You only need to pick good numbers.

The real draw order in Tank City Reboot

Tank City Reboot is a free browser tank game. You drive an antivirus tank and defend the CPU core from malware tanks. In its code, every sprite gets its number from one small helper that sets a value called sortingOrder. The game relies on a simple rule: a higher number is drawn later, so it sits on top.

Every layer in Tank City Reboot and its sorting number, read from the game's code. Higher numbers are drawn on top.

Here is the list from back to front:

• 0, the board: circuit traces, firewall, silicon, coolant and data bus.
• 2, the CPU core you are defending.
• 3, the power-up.
• 4, the glow under each tank and each shot.
• 5, the tank body.
• 6, the shield ring, just above its tank.
• 7, shots.
• 8, encrypted zones.
• 9, the arriving sparkle and explosion effects.
• 10, the frame around the field.
• 20 and 21, the side panel, then its icons and text.
• 25 and 27, dimmed screens such as the stage card and game over, then their text.
• 40 and 41, the pause screen and its text.
• 50, scan lines over everything.

Notice that the numbers skip. Nothing uses 1, and nothing sits between 10 and 20. Only the order matters, so the size of each gap changes nothing on screen.

Why encrypted zones hide tanks

Look at where the field lives. The game draws it as two flat pictures, not one. The board sits at 0, under everything that moves. Encrypted zones sit at 8, above tanks at 5 and shots at 7.

That is the whole trick. The game code notes that an encrypted zone hides tanks, and the draw order is what makes it true. A tank inside a zone is still painted. It just gets painted over a moment later.

The rules agree with the picture. Encrypted zones block neither tanks nor shots, so a shot keeps flying through a zone even while you cannot see it. Coolant is different. It stops tanks but not shots. It sits on the board at 0, so shots pass visibly over it.

The zone pixels are not quite solid. Their alpha, the value that says how see-through a pixel is, is 235 or 225 out of 255. So a faint hint of what is below can show through. Our guide to what the alpha channel does explains that number.

A worked example: a tank drives into an encrypted zone

Follow one frame. A power-up is lying on the ground inside an encrypted zone. A malware tank drives into the same zone and fires a shot. An explosion goes off at the edge.

The game paints in this order:

1. The board at 0. The ground under the zone is painted.
2. The power-up at 3, on top of the ground.
3. The tank glow at 4, then the tank body at 5. The tank covers part of the power-up.
4. The shot at 7, on top of the tank.
5. The encrypted zone at 8. It covers the ground, the power-up, the tank and the shot in that square.
6. The explosion at 9, on top of the zone.
7. The frame, the side panel and the scan lines last.

What do you see? The green zone pattern, with only a faint hint of anything under it. The explosion shows clearly, because 9 is higher than 8. The tank and its shot are still there and still moving. You just cannot see them until they leave the zone.

Now swap two numbers in your head. Put the zone at 4 instead of 8. Tanks at 5 would then be painted over the zone, and the zone would hide nothing. Same rules, same map, different picture. Draw order is a design choice, not just plumbing.

Draw order in Tank City Zero Day

The second game, Tank City Zero Day, keeps the same plan. It draws the board at 0 and encrypted zones at 8. Tanks are still 5 with a glow at 4 and a shield at 6. Shots are still 7, with effects at 9 and scan lines at 50.

Zero Day adds one thing: a faint trail on each shot, 2 by 7 pixels at about one third strength, drawn at 6. That is one step below the shot at 7, so the shot is always painted over its own trail.

Keeping the numbers the same across both games has a quiet benefit. Anyone reading the code learns the order once and can use it in either game.

Frequently asked questions

Is draw order the same as Z-order?

They are close. Z-order is the ranking that says what sits on top. Draw order is the actual sequence the game paints in, built from that ranking.

Who came up with the painter's algorithm?

Martin Newell, Richard Newell and Tom Sancha proposed it in 1972. It paints shapes from the farthest to the closest.

Why do explosions show over encrypted zones in Tank City Reboot?

Explosion effects use sorting number 9 and encrypted zones use 8. Higher numbers are drawn later, so the explosion lands on top.

Is Tank City Reboot a course on graphics?

No. It is a game that teaches the idea behind each name, like encrypted zone or CPU core, while you play. It is not a course.

Get started

Open Tank City Reboot in your browser and play to stage 4, ENCRYPTION. Drive into an encrypted zone and fire. Your tank vanishes while the shot keeps going, and now you know why. It is free, it runs on a computer or a phone, and playing never needs an account.