Your complete step-by-step walkthrough — follow at your own pace, tick every box
Course: Game On (9GAMZA)Lesson: T1 — L04Time: ~75 minUnity: 2022.3.xOutcomes: G5-1, G5-2, G5-3
TOTAL XP0/ 50 XP
1
Create Your 2D Project
~10 min • Set up a brand-new 2D project in Unity Hub.
+10 XP
▶
Key Terms for This Section
2D Game
A flat game where everything is images (sprites), not 3D models. Think Terraria, Hollow Knight, Celeste.
Template
A pre-made project setup with the right settings already configured for a specific type of game.
Sprite
A 2D image used in a game — characters, backgrounds, tiles, and objects are all sprites.
Orthographic Camera
A flat camera with no perspective distortion — everything stays the same size regardless of distance.
1.1
Open Unity Hub (the launcher app, not the Unity Editor itself).
Can't find it? Look for the Unity Hub icon on your Desktop or taskbar. If it's not there, click the Windows Start button and type "Unity Hub".
1.2
Click "New project" (blue button, top-right corner of Unity Hub). Make sure Unity 2022.3.x is selected in the "Editor Version" dropdown at the top.
1.3
In the template list, find and click "2D Core". This is different from 3D!
If "2D Core" doesn't appear: Click the download icon next to it — templates sometimes need to be downloaded first. If you still can't find it, try "2D (Built-in Render Pipeline)" instead.
1.4
Name your project. Type MyFirstGame (or your own name — avoid spaces). Choose a save location (the default is fine).
1.5
Click "Create project". Unity will open and import assets. This takes 1–2 minutes. Do NOT click anything while it loads — watch the progress bar at the bottom.
1.6
Unity is open! You should see a mostly empty 2D scene. The Scene View background is a solid colour (usually dark blue). Notice: no 3D objects, no robot, no playground — this is your blank canvas!
What you should see
Unity Editor with an empty 2D scene. The Scene View is flat with a white rectangle outline (the camera view). The Hierarchy shows only "Main Camera".
✓
Checkpoint: "I have a 2D project open in Unity. The Scene View looks flat, not 3D."
⚠
Troubleshooting:
2D Core template missing? Close Unity Hub, reopen it, check for updates. OR try "2D (Built-in Render Pipeline)" template instead.
Project stuck on loading? Be patient — first-time setup takes longer. If frozen for 5+ minutes, close and reopen Unity Hub.
See a 3D scene instead? You picked the wrong template. File → New Project → choose "2D Core" this time.
2
The 2D World
~10 min • Understand coordinates, the orthographic camera, and how 2D differs from 3D.
+10 XP
▶
Key Terms for This Section
Cartesian Plane
The X/Y coordinate grid used to position everything in 2D space.
X-axis
Horizontal — left is negative, right is positive.
Y-axis
Vertical — down is negative, up is positive.
Origin (0, 0)
The exact centre of the 2D world where X and Y both equal zero.
2.1
Look at your Scene View (centre panel). Notice it's flat — no depth, no 3D perspective. This is because 2D games use an Orthographic camera.
2.2
In the Hierarchy (left panel), click on "Main Camera". Look at the Inspector (right panel). You'll see a Camera component. Find the field that says "Projection: Orthographic".
3D vs 2D cameras: In L03's 3D project, the camera used "Perspective" projection — far things looked smaller. In 2D, "Orthographic" means everything stays the same size regardless of distance. No depth illusion!
2.3
Still looking at the Camera component in the Inspector, find "Background" — it shows a colour swatch. Click the colour swatch to open the colour picker. Choose a sky blue or any colour you like!
This background colour is what the player sees behind all your sprites. A sky-blue (#87CEEB) works well for platformers, dark blue (#1a1a2e) for space games!
2.4
Understand the coordinate system. In 2D Unity:
X = horizontal (positive = right, negative = left)
Y = vertical (positive = up, negative = down)
Origin (0, 0) = the dead centre of the world
Position (5, 0) = 5 units to the right of centre
Position (0, -3) = 3 units below centre
Position (-2, 4) = 2 units left and 4 units up
2.5
Click on Main Camera in the Hierarchy. Look at the Transform component in the Inspector. The Position should be X: 0, Y: 0, Z: -10.
Wait — Z: -10? In 2D, the camera sits "behind" the scene at Z = -10, looking forward at Z = 0. Everything in your game lives on the X/Y plane at Z = 0. You won't usually touch the Z value of the camera.
2.6
In the Scene View, check the Scene view gizmo (colourful cube, upper-right corner). In 2D, the camera should be looking straight at the XY plane. If your scene looks weird, click the blue cone (Z) on the gizmo to snap to the front view.
What your Inspector should show
Main Camera selected. Camera component with Projection: Orthographic. Background colour changed to your chosen colour.
✓
Checkpoint: "I understand that 2D uses X/Y coordinates. I changed my camera background colour."
💡
3D vs 2D quick comparison: In 3D you use X, Y AND Z to position objects in space. In 2D you mainly use X and Y. The Z axis is only used for layer ordering (which sprite appears in front). Think of 2D like a flat painting — everything is on the same wall, arranged left/right and up/down.
3
Import Your First Sprites
~15 min • Find sprites, import them into Unity, and place them in your scene.
+10 XP
▶
Key Terms for This Section
Sprite Renderer
The Unity component that displays a sprite image on screen. Every sprite in the scene has one.
Pixels Per Unit
How many pixels in the image equal 1 Unity unit. Default is 100. Higher PPU = smaller sprite in scene.
Sorting Layer
A named layer that controls what appears in front — like layers in Photoshop.
Order in Layer
A number within the same Sorting Layer. Higher number = displayed in front.
📦
Before you start: Your teacher has uploaded a sprite assets pack to Google Classroom. Go to Google Classroom now, find the assets link for this lesson, and download the pack before continuing.
3.1
Download your sprites. Open Google Classroom and find the assets link for T1-L04. Download and unzip the sprite pack to a folder you can find easily (e.g. Desktop or Downloads).
Want more sprites? You can also browse kenney.nl/assets for free game art — packs like "Platformer Art Deluxe" or "Simplified Platformer Pack" include player characters, ground tiles, backgrounds, and props.
3.2
In Unity, look at the Project window (bottom panel). You should see an Assets folder. Right-click on Assets → Create → Folder. Name it "Sprites".
Organisation tip: Keeping your project organised from the start is a great habit! Professional game developers always use folders for sprites, scripts, scenes, etc.
3.3
Open File Explorer (Win+E). Find the sprite images you downloaded. Select all the images (Ctrl+A) and drag them from File Explorer directly into the Sprites folder in Unity's Project window.
Unity will import them automatically
You'll see a brief progress bar at the bottom
Each image becomes a Sprite asset in Unity
3.4
Click on any imported sprite in the Project window. Look at the Inspector — you'll see the Sprite Import Settings:
Texture Type: Sprite (2D and UI) — already correct since you're in a 2D project
Pixels Per Unit: 100 — 100 pixels in the image = 1 Unity unit
Filter Mode: Point (no filter) for pixel art, or Bilinear for smooth art
3.5
Place your first sprite in the scene! From the Project window, drag a sprite directly into the Scene View (centre panel). A new GameObject appears!
The Hierarchy now shows a new object with the sprite's name
The Inspector shows a Sprite Renderer component
The sprite is visible in the Scene View!
3.6
Click the sprite in the Scene View (or Hierarchy). Look at the Inspector → Sprite Renderer component. Find these fields:
Sprite — which image is displayed
Color — you can tint the sprite (leave as white for normal)
Flip X / Flip Y — mirror the sprite horizontally or vertically
Sorting Layer — which layer (Default by default)
Order in Layer — number within the layer (0 by default)
3.7
Add a second sprite. Drag another image from the Project window into the Scene. Position it using the Move tool (press W, drag the coloured arrows).
Remember from L03: Red arrow = X (horizontal), Green arrow = Y (vertical). The blue arrow is Z — don't touch this in 2D!
3.8
Test the layering. Move one sprite on top of the other. Which one is in front? The one with the higher Order in Layer number wins. Try it: select a sprite → Inspector → Sprite Renderer → Order in Layer → type 1 instead of 0.
What you should see
Scene View showing 2+ sprites placed in your scene. Inspector shows Sprite Renderer with Sorting Layer and Order in Layer fields visible.
✓
Checkpoint: "I have at least 2 sprites imported and placed in my scene. I understand that Order in Layer controls which is in front."
⚠
Troubleshooting:
Sprites look blurry? Select sprite in Project window → Inspector → Filter Mode → change to "Point (no filter)" → click Apply
Sprites are HUGE or tiny? Check Pixels Per Unit. For pixel art, try 16 or 32 instead of 100. For HD art, keep 100.
Can't see the sprite? It might be off-camera. Select it in the Hierarchy, press F to frame it, then move it within the camera view.
4
Build Your Game World — Lab
~25 min • Create a complete 2D scene with sorting layers, background, ground, player, and decorations.
+10 XP
▶
🎮
Lab Goal: Build a simple 2D game world with a background, ground/platform, player character, and at least 2 decoration sprites — all correctly layered!
4.1
Set up Sorting Layers. Go to Edit menu (top) → Project Settings → Tags and Layers (left sidebar) → expand Sorting Layers. Add these layers IN THIS ORDER (click the + button):
Background (add first — this will render at the back)
Midground
Foreground
Player (add last — this will render in front)
How Sorting Layers work: Layers at the TOP of the list render BEHIND layers at the BOTTOM. So "Background" (top) is behind everything, and "Player" (bottom) is in front of everything. Like stacking sheets of paper!
4.2
Place your background. Drag a background sprite (sky, clouds, or a scenery image) into the Scene. In the Inspector → Sprite Renderer → set Sorting Layer to "Background". Use the Scale tool (press R) to make it fill the camera view.
4.3
Create ground. Drag a ground/platform sprite into the Scene. Set Sorting Layer to "Midground". Position it near the bottom of the camera view using the Move tool (W).
Tip: You can duplicate a ground sprite with Ctrl+D and place copies side by side to create a longer platform!
4.4
Place your player character. Drag a character sprite into the Scene. Set Sorting Layer to "Player". Position them standing on top of the ground. Rename the GameObject: click the name in the Hierarchy → type "Player".
4.5
Add decorations. Drag 2–3 more sprites in (trees, bushes, clouds, coins, anything!). Set their Sorting Layers appropriately — things behind the player go on "Midground", things in front on "Foreground".
4.6
The Identity Sprite Challenge! Select your Player character. Duplicate it 3 times (Ctrl+D three times). Now modify each copy:
Copy 1: Use Scale (R) → make it 2x bigger (set Scale to 2, 2, 1 in the Inspector)
Copy 2: Use Scale (R) → make it half size (set Scale to 0.5, 0.5, 1 in the Inspector)
Copy 3: In Inspector → Sprite Renderer → tick Flip X to mirror it horizontally
Position all 4 versions in a row. Take a screenshot of this!
4.7
Clean up. Delete the 3 extra copies (select each → press Delete key). Keep just your original Player character and your scene layout.
4.8
Save your scene! Press Ctrl+S. If Unity asks for a name, type "Level1" and save it in your project's Scenes folder.
4.9
Test in Play Mode! Click the ▶ Play button at the top centre. You should see your scene through the camera. Nothing moves yet (we'll add that next lesson!), but check: Is the layering correct? Can you see all your sprites? Click ■ Stop when done.
Your completed scene should have
A background covering the camera view, ground along the bottom, a player character standing on the ground, and 2-3 decoration sprites. Everything layered correctly — background behind, player in front.
✓
Checkpoint: "My scene has a background, ground, player, and decorations. Sorting layers are correct — background is behind, player is in front. Scene is saved!"
💡
Layer check: Click on each sprite and look at the Sorting Layer field in the Inspector. Background sprites should be on "Background", ground on "Midground", player on "Player". If something looks wrong, change the Sorting Layer — it updates instantly!
5
Extension Challenges
If time permits • Push your skills further with these bonus challenges.
+10 XP
▶
These are bonus challenges. Only do them if you've finished Sections 1–4. Pick whichever sounds fun!
5.1
Challenge 1: Complete Level Design. Add 5+ more sprites to create a complete, believable game level. Add platforms at different heights, background details (clouds, mountains, sun), and foreground details (bushes, rocks).
5.2
Challenge 2: Parallax Layers. Create 5 sorting layers: Sky, FarBackground, Background, Midground, Foreground. Place clouds on Sky, mountains on FarBackground, trees on Background. This creates visual depth — like a parallax effect!
5.3
Challenge 3: Unity Asset Store. Open Window → Asset Store (or go to assetstore.unity.com in your browser). Search for "2D platformer". Download a FREE asset pack and import it into your project. Use the new sprites in your scene!
5.4
Challenge 4: Second Scene. Create a completely new scene: File → New Scene. Build a different environment (underwater? space? desert?). Save it as "Level2". You now have 2 levels!
🏆
Speed Challenge: How many sprites can you place, layer, and organise in 10 minutes? Keep it looking good — quantity AND quality!
🎮
Research: Look up "parallax scrolling" in 2D games. How do games like Hollow Knight or Celeste create a sense of depth with flat sprites? Write a short paragraph explaining it.