Sorting layers and order in Unity - Mini Project: Build & Apply

Sorting Layers and Order in Unity

📖 Scenario: You are creating a simple 2D game scene in Unity where multiple sprites overlap. You want to control which sprite appears on top by using sorting layers and order in layer.

🎯 Goal: Learn how to set up sorting layers and adjust the order in layer for sprites in Unity to control their visual stacking order.

📋 What You'll Learn

Create three GameObjects with SpriteRenderer components

Assign each GameObject to a specific sorting layer

Set the order in layer for each SpriteRenderer to control overlap

Verify the sprites appear stacked in the correct order in the Scene view

💡 Why This Matters

🌍 Real World

Sorting layers and order in layer are essential in 2D game development to control which sprites appear on top of others, making scenes visually clear and organized.

💼 Career

Understanding sorting layers is important for game developers and UI designers working with Unity to create polished and professional 2D games and applications.

1

Create three GameObjects with SpriteRenderer components

In your Unity scene, create three GameObjects named Background, Player, and Foreground. Add a SpriteRenderer component to each GameObject and assign any sprite to each SpriteRenderer.

Unity

// Create three GameObjects named Background, Player, and Foreground
// Add SpriteRenderer components to each and assign sprites
// Your code here

Hint

Use new GameObject("Name") to create each object and AddComponent() to add the sprite renderer.

2

Create sorting layers for Background, Player, and Foreground

Create three sorting layers named Background, Player, and Foreground in the Unity Editor's Tags and Layers settings. Then, in code, create three string variables named backgroundLayer, playerLayer, and foregroundLayer and assign them the exact layer names.

Unity

GameObject background = new GameObject("Background");
SpriteRenderer backgroundRenderer = background.AddComponent();
// Assign a sprite to backgroundRenderer.sprite here

GameObject player = new GameObject("Player");
SpriteRenderer playerRenderer = player.AddComponent();
// Assign a sprite to playerRenderer.sprite here

GameObject foreground = new GameObject("Foreground");
SpriteRenderer foregroundRenderer = foreground.AddComponent();
// Assign a sprite to foregroundRenderer.sprite here

// Create string variables for sorting layers
// Your code here

Hint

Define string variables with the exact sorting layer names as their values.

3

Assign sorting layers and order in layer to each SpriteRenderer

Set the sortingLayerName property of backgroundRenderer to backgroundLayer, playerRenderer to playerLayer, and foregroundRenderer to foregroundLayer. Then set the sortingOrder property to 0 for background, 1 for player, and 2 for foreground to control their visual stacking order.

Unity

GameObject background = new GameObject("Background");
SpriteRenderer backgroundRenderer = background.AddComponent();
// Assign a sprite to backgroundRenderer.sprite here

GameObject player = new GameObject("Player");
SpriteRenderer playerRenderer = player.AddComponent();
// Assign a sprite to playerRenderer.sprite here

GameObject foreground = new GameObject("Foreground");
SpriteRenderer foregroundRenderer = foreground.AddComponent();
// Assign a sprite to foregroundRenderer.sprite here

string backgroundLayer = "Background";
string playerLayer = "Player";
string foregroundLayer = "Foreground";

// Set sortingLayerName and sortingOrder for each SpriteRenderer
// Your code here

Hint

Use the sortingLayerName and sortingOrder properties on each SpriteRenderer to set layers and order.

4

Verify the sprites appear stacked correctly in the Scene view

Ensure the sprites assigned to backgroundRenderer, playerRenderer, and foregroundRenderer appear stacked in the Scene view with Background behind Player and Foreground on top by confirming their sorting layers and order in layer are set correctly.

Unity

GameObject background = new GameObject("Background");
SpriteRenderer backgroundRenderer = background.AddComponent();
// Assign a sprite to backgroundRenderer.sprite here

GameObject player = new GameObject("Player");
SpriteRenderer playerRenderer = player.AddComponent();
// Assign a sprite to playerRenderer.sprite here

GameObject foreground = new GameObject("Foreground");
SpriteRenderer foregroundRenderer = foreground.AddComponent();
// Assign a sprite to foregroundRenderer.sprite here

string backgroundLayer = "Background";
string playerLayer = "Player";
string foregroundLayer = "Foreground";

backgroundRenderer.sortingLayerName = backgroundLayer;
backgroundRenderer.sortingOrder = 0;

playerRenderer.sortingLayerName = playerLayer;
playerRenderer.sortingOrder = 1;

foregroundRenderer.sortingLayerName = foregroundLayer;
foregroundRenderer.sortingOrder = 2;

// Final verification step - no code needed
// Your code here

Hint

Check the Scene view in Unity to see the sprites stacked in the correct order visually.

Practice

1. What is the main purpose of Sorting Layers in Unity?

easy

A. To apply physics properties to objects

B. To change the physical position of objects in the scene

C. To set the color of objects

D. To group objects and control their visual stacking order

Solution

1. Step 1: Understand Sorting Layers concept

   Sorting Layers are used to group objects so Unity knows which objects appear in front or behind others visually.

2. Step 2: Differentiate from other properties

   Sorting Layers do not move objects physically or change physics or color; they only affect visual stacking order.

3. Final Answer:

   To group objects and control their visual stacking order -> Option D

4. Quick Check:

   Sorting Layers = Visual stacking order [OK]

Hint: Sorting Layers control visual order, not position or physics [OK]

Common Mistakes:

• Confusing sorting layers with object position
• Thinking sorting layers affect physics
• Assuming sorting layers change object color

2. Which of the following is the correct way to set the sorting order of a SpriteRenderer component in Unity C# script?

easy

A. spriteRenderer.orderSorting = 5;

B. spriteRenderer.sortOrder = 5;

C. spriteRenderer.sortingOrder = 5;

D. spriteRenderer.layerOrder = 5;

Solution

1. Step 1: Recall SpriteRenderer property names

   The correct property to set the order within a sorting layer is sortingOrder.

2. Step 2: Check each option for syntax correctness

   Only spriteRenderer.sortingOrder is a valid property; others are incorrect or do not exist.

3. Final Answer:

   spriteRenderer.sortingOrder = 5; -> Option C

4. Quick Check:

   Correct property name = sortingOrder [OK]

Hint: Use 'sortingOrder' property to set order in script [OK]

Common Mistakes:

• Using incorrect property names like sortOrder
• Confusing sorting layer with sorting order
• Trying to set sorting layer with sortingOrder

3. Given two sprites in the same sorting layer with these orders:
spriteA.sortingOrder = 3;
spriteB.sortingOrder = 7;
Which sprite will appear on top visually?

medium

A. spriteB will appear on top

B. spriteA will appear on top

C. Both sprites will appear at the same level

D. Sorting order does not affect visual stacking

Solution

1. Step 1: Understand sorting order within the same layer

   Higher sortingOrder values appear in front of lower ones within the same sorting layer.

2. Step 2: Compare the given sortingOrder values

   spriteB has sortingOrder 7, which is higher than spriteA's 3, so spriteB appears on top.

3. Final Answer:

   spriteB will appear on top -> Option A

4. Quick Check:

   Higher sortingOrder = on top [OK]

Hint: Higher sortingOrder means sprite is drawn on top [OK]

Common Mistakes:

• Thinking lower sortingOrder is on top
• Confusing sorting layer with sorting order
• Assuming sorting order has no effect

4. You set two sprites to the same sorting layer and sorting order, but one still appears behind the other unexpectedly. What is a likely cause?

medium

A. The sprite behind has a higher Z position in 3D space

B. Sorting layers override all other settings

C. Sorting order must be negative to appear on top

D. You must assign different sorting layers to fix this

Solution

1. Step 1: Understand sorting layers and order limits

   Sorting layers and order control 2D visual stacking but Z position can still affect rendering if using 3D or perspective camera.

2. Step 2: Identify cause of unexpected order

   If sorting layers and order are equal, the sprite with lower Z position (closer to camera) appears on top.

3. Final Answer:

   The sprite behind has a higher Z position in 3D space -> Option A

4. Quick Check:

   Z position affects draw order if sorting order is equal [OK]

Hint: Check Z position if sorting order is equal [OK]

Common Mistakes:

• Assuming sorting layers always override Z position
• Thinking sorting order must be negative
• Believing different sorting layers are always required

5. You have three sprites: spriteX on sorting layer "Background" order 0, spriteY on sorting layer "Foreground" order 0, and spriteZ on sorting layer "Background" order 5.
Which sprite will appear on top visually?

hard

A. spriteZ will appear on top

B. spriteY will appear on top

C. spriteX will appear on top

D. spriteX and spriteY will appear on top together

Solution

1. Step 1: Understand sorting layer priority

   Sorting layers have a fixed order set in Unity's editor. "Foreground" layer is above "Background" layer regardless of sortingOrder values.

2. Step 2: Compare sprites across layers and orders

   spriteY is on "Foreground" layer order 0, which is above both spriteX and spriteZ on "Background" layer, even though spriteZ has order 5.

3. Final Answer:

   spriteY will appear on top -> Option B

4. Quick Check:

   Sorting layer priority beats sorting order [OK]

Hint: Sorting layer priority beats sorting order [OK]

Common Mistakes:

• Thinking sorting order overrides sorting layer
• Ignoring sorting layer hierarchy
• Assuming higher order always means on top