Skip to main content

🖼️ Lesson 10.1: The 2D Setup: Sprites & Sorting

Everything you built so far lived in 3D space — meshes, perspective cameras, a Z axis you could fly the camera along. The 2D track flips that. Depth still exists, but it stops being about distance and starts being about draw order: which flat picture gets painted on top. This lesson sets up a real 2D project and teaches you the three things that decide what the player sees — the Sprite Renderer, sorting, and the orthographic camera.

🎯 Learning Objectives

By the end of this lesson, you will be able to:

  • Create a project with the 2D (URP) template and recognise the 2D Renderer
  • Place sprites with the Sprite Renderer component
  • Import an image as a sprite and set its Pixels Per Unit (PPU) correctly
  • Control what draws on top using Sorting Layers and Order in Layer
  • Explain how an orthographic camera differs from the perspective camera you used in 3D

Estimated Time: 40 minutes  ·  Prerequisite: Unity Fundamentals (GameObjects, components, the Inspector); the 3D camera work you already know

In This Lesson

Starting a 2D Project

Open the Unity Hub, click New Project, and pick the 2D (URP) template (in Unity 6 it's listed as Universal 2D). Choosing it now saves you a dozen manual tweaks later — it configures the project so 2D is the default in three important ways:

  • The Scene view opens in 2D mode (the little 2D toggle in the Scene toolbar is on), so you look straight down the Z axis instead of orbiting in 3D.
  • The Main Camera is set to Orthographic projection — more on that below.
  • The renderer is the 2D Renderer asset (a URP Renderer Data set up for sprites and 2D lights), and imported images default to the Sprite texture type.

You can build 2D games in a 3D project too, but you'd be swimming against the current — flipping the camera, changing every texture's import type by hand. Start from the 2D template and everything below just works.

📖 Definition

Sprite: a 2D image Unity draws as a flat quad in the world. It's the 2D equivalent of a mesh. A sprite is just a picture with an anchor point (its pivot) and a size in world units, positioned and rotated by its Transform like any other GameObject.

The Sprite Renderer

In 3D, a visible object needs a Mesh Renderer. In 2D, it needs a Sprite Renderer — the component that takes a sprite and draws it in the world. Drag any sprite from the Project window into the Scene and Unity creates a GameObject with a Sprite Renderer already attached and the sprite assigned. Its key fields:

  • Sprite — the image to draw.
  • Color — a tint multiplied over the sprite (and its alpha channel — drop the A to fade a sprite out).
  • Flip X / Y — mirror the sprite without touching its Transform; the classic way to face a character left or right.
  • Sorting Layer and Order in Layer — the draw-order controls we'll dig into shortly.

Here's a small 2D scene assembled entirely from sprites — a background, a ground strip, a character, and a cloud, each drawn by its own Sprite Renderer:

An illustrative 2D scene — background, ground tiles, character, and cloud are each a separate sprite. (Diagram; your Game view will show your own art.)

✅ Pro Tip

Every sprite in your scene is one draw. Sprites that share the same texture (a sprite atlas) and sit next to each other in the sort order can be batched into a single draw call. We'll pack sprites into sheets in the next lesson — that's not just for animation, it's a performance win too.

Importing Sprites & PPU

Drop a .png into your Assets folder and select it. The Inspector shows its import settings. In a 2D project the Texture Type is already Sprite (2D and UI) — that's what turns a plain image into something the Sprite Renderer can use. Here is that Inspector, rebuilt faithfully:

The Sprite import settings in Unity's Inspector A recreation of Unity's Inspector showing texture import settings for a sprite. Texture Type is set to Sprite (2D and UI), Sprite Mode is Single, Pixels Per Unit is 100, Pivot is Center, Filter Mode is Point (no filter), and Compression is None. A preview of a character sprite sits at the bottom with an Apply button. player_idle (Texture 2D) Import Settings Texture Type Sprite (2D and UI) Texture Shape 2D Sprite Mode Single Pixels Per Unit 100 Mesh Type Tight Pivot Center Filter Mode Point (no filter) Compression None Preview — 64 x 64 Apply Revert
Figure 1: The Sprite import settings in the Inspector (faithfully recreated). Pixels Per Unit is highlighted because it's the setting new 2D developers get wrong most often.

Pixels Per Unit is the scale of your whole game

Pixels Per Unit (PPU) answers one question: how many pixels of this image equal one Unity world unit (one metre)? The default is 100, so a 100×100 image is 1×1 unit on screen. A 32×32 pixel-art tile at 100 PPU would be a tiny third of a unit; import it at 32 PPU instead and it becomes a clean 1×1 unit — one tile, one unit, which makes grids and physics line up beautifully.

The rule that saves you endless headaches: pick one PPU and use it for every sprite in the game. If your character is imported at 100 PPU and your tiles at 32, they'll be wildly different sizes in the scene and you'll spend the afternoon rescaling Transforms by hand.

⚠️ Blurry pixel art? Check two settings

Pixel art should be crisp, but Unity's defaults smooth it. Set Filter Mode to Point (no filter) so pixels stay sharp instead of blurred, and set Compression to None so colours aren't mangled. For smooth hi-res art, leave Filter Mode on Bilinear instead. Change a setting, then click Apply — import settings don't take effect until you do.

Sorting Layers & Order in Layer

In 3D the camera sorts objects by distance — near things hide far things automatically. In 2D everything sits on (roughly) the same plane, so Unity needs you to say what's in front. Two settings on every Sprite Renderer decide it, checked in this order:

  1. Sorting Layer — a named, ordered list you manage in Project Settings ▸ Tags and Layers. Layers lower in the list draw later, so they appear on top. A typical set: Background, then Ground, then Characters, then Foreground, then UI.
  2. Order in Layer — an integer breaking ties within a Sorting Layer. Higher numbers draw on top. Two characters on the Characters layer? Give the one that should appear in front a higher Order in Layer.

Below, three sprites overlap. The diagram shows how their Sorting Layer (then Order in Layer) decides the final stack the player sees:

How Sorting Layers and Order in Layer decide draw order A diagram with three overlapping sprites — a cloud on the Background layer, a tree on the Ground layer, and a character on the Characters layer. An arrow shows that layers are drawn from Background first to Foreground last, so the character ends up drawn on top of the tree, which is on top of the cloud. A second small example shows two characters on the same layer sorted by Order in Layer, 0 behind and 1 in front. Sorting Layers (top of list = drawn first = behind) Background Ground Characters Foreground ▼ later layers paint over earlier ones Three sprites, three layers… Cloud · Background Tree · Ground Hero · Characters composited …the player sees this Hero draws over tree over cloud Same layer? Order in Layer breaks the tie (higher = on top) Order 0 Order 1 (in front) Both on the "Characters" layer — the orange sprite (Order 1) wins.
Figure 2: Sorting Layer decides the coarse stacking; Order in Layer breaks ties within a layer. Together they replace the automatic depth-sorting you got for free in 3D.
💡 Why not just move sprites on the Z axis? You can — a sprite with a smaller Z is closer to the camera and draws in front, and it works. But Z-sorting fights with physics and is fiddly to reason about. Sorting Layers are explicit, readable, and the convention every 2D Unity project uses. Reach for them first; save Z for special cases.

The Orthographic Camera

The camera in your 3D projects used Perspective projection: distant objects shrink, parallel lines converge, exactly like a real lens. A 2D game wants none of that — a sprite should be the same size whether it's at the left edge or the right. That's Orthographic projection: no vanishing point, no size-with-distance, just a flat rectangular window onto the scene.

Select the Main Camera and you'll see Projection set to Orthographic. Its key control is Size, which is half the visible height of the screen in world units. A Size of 5 means the camera shows 10 units top to bottom; the visible width follows from your aspect ratio. Want to see more of the level? Increase Size — it's the 2D "zoom out."

📖 Definition

Orthographic Size: half the camera's vertical view, measured in world units. If Size = 5, the screen spans 10 units vertically; at a 16:9 aspect that's about 17.8 units across. This, combined with your PPU, tells you exactly how many sprite pixels fill the screen — the foundation of pixel-perfect 2D.

Here's how the three ideas connect end to end:

flowchart LR A["PNG imported as
Sprite (2D and UI)
at a chosen PPU"] --> B["Sprite Renderer
draws it in the world"] B --> C["Sorting Layer +
Order in Layer
decide draw order"] C --> D["Orthographic camera
captures a flat
window of the scene"] D --> E["What the
player sees"]

Figure 3: The 2D pipeline — import, render, sort, capture.

✅ Pro Tip

Set the camera's Background to a solid colour (or add a background sprite) rather than leaving the URP skybox — a stray gradient sky behind your pixel art looks off. And keep the camera's Z at -10 (the 2D template's default) so it sits behind nothing and sees your whole scene.

Hands-on Challenge

🏋️ Exercise 1: Stack a scene correctly

Objective: Build the Background → Ground → Characters stack from Figure 2 and prove sorting works.

  1. In Project Settings ▸ Tags and Layers, add Sorting Layers in order: Background, Ground, Characters.
  2. Import three sprites (a sky/cloud, a ground/tree, a character). Set them all to the same PPU.
  3. Drag them into the scene so they overlap. Assign each its matching Sorting Layer on its Sprite Renderer.
  4. Confirm the character draws over the ground, which draws over the background — regardless of the order you added them.
  5. Now put two character sprites on the Characters layer and use Order in Layer to decide which stands in front.
💡 Hint: my character is hidden behind the background

Check the Sorting Layer order in Project Settings — layers at the top of the list draw first (behind). Background must be at the top, Characters near the bottom. Assigning the layer isn't enough if the list order is wrong.

✅ Success check

Reordering the objects in the Hierarchy changes nothing about what's in front — the Sorting Layer and Order in Layer alone decide the stack, exactly as they will at runtime.

🏋️ Exercise 2: Frame it right

Import a 32×32 pixel-art tile at 100 PPU and note how tiny it is. Change PPU to 32, click Apply, and watch it snap to 1×1 unit. Then set Filter Mode to Point (no filter) and zoom in — the pixels should be razor sharp. Finally, adjust the camera's Orthographic Size until your scene fills the Game view nicely.

🎯 Quick Quiz

Question 1: Two sprites are on the same Sorting Layer. Which one draws on top?

Question 2: You import a 64×64 sprite and want it to be exactly 2×2 world units. What PPU do you set?

Question 3: Why does a 2D game use an orthographic camera?

Summary

🎉 Key Takeaways

  • Start from the 2D (URP) template so the Scene view, camera, and texture defaults are all set up for 2D.
  • The Sprite Renderer is the 2D counterpart of the Mesh Renderer — it draws a sprite in the world.
  • Pixels Per Unit sets your game's scale; pick one value and use it everywhere. Point filter + no compression keeps pixel art crisp.
  • Sorting Layer sets the coarse stack (later layers on top); Order in Layer breaks ties within a layer.
  • A 2D game uses an orthographic camera — no perspective — whose Size is half the visible height in world units.

🚀 What's Next?

One sprite per image gets old fast — characters and effects usually ship as a single image packed with many frames. In Lesson 10.2: Sprite Sheets & Slicing you'll set Sprite Mode to Multiple, open the Sprite Editor, and slice a sheet into individual frames ready for animation.

🖼️ You can build a 2D scene now

Sprites are your meshes, the Sprite Renderer is your renderer, sorting is your depth, and the orthographic camera is your window. That's the whole 2D foundation — everything else builds on it.