Canvas and render modes in Unity - Mini Project: Build & Apply

Canvas and Render Modes in Unity

📖 Scenario: You are creating a simple user interface (UI) in Unity for a game menu. The UI needs a canvas to hold buttons and text. You will learn how to set up a canvas and change its render mode to control how it appears in the game.

🎯 Goal: Build a Unity script that creates a Canvas object, sets its render mode to Screen Space - Overlay, and then changes it to World Space. This will help you understand how different render modes affect UI display.

📋 What You'll Learn

Create a Canvas GameObject in a Unity script

Set the Canvas render mode to Screen Space - Overlay

Change the Canvas render mode to World Space

Print the current render mode to the console

💡 Why This Matters

🌍 Real World

Game developers use Canvas and render modes to control how user interfaces appear in games, such as menus, HUDs, and interactive elements.

💼 Career

Understanding Canvas and render modes is essential for Unity UI design, a key skill for game developers and interactive application creators.

1

Create a Canvas GameObject

Write a Unity C# script that creates a new GameObject called canvasObject and adds a Canvas component to it. Store the Canvas component in a variable called canvas.

Unity

// Your code here to create canvasObject and add Canvas component

Need a hint?

Use new GameObject("Canvas") to create the object and AddComponent<Canvas>() to add the Canvas component.

2

Set Canvas Render Mode to Screen Space - Overlay

Add code to set the renderMode property of the canvas variable to RenderMode.ScreenSpaceOverlay.

Unity

using UnityEngine;

public class CanvasSetup : MonoBehaviour
{
    void Start()
    {
        GameObject canvasObject = new GameObject("Canvas");
        Canvas canvas = canvasObject.AddComponent();
        // Set renderMode to ScreenSpaceOverlay below
    }
}

Need a hint?

Use canvas.renderMode = RenderMode.ScreenSpaceOverlay; to set the render mode.

3

Change Canvas Render Mode to World Space

Add code to change the renderMode property of the canvas variable to RenderMode.WorldSpace.

Unity

using UnityEngine;

public class CanvasSetup : MonoBehaviour
{
    void Start()
    {
        GameObject canvasObject = new GameObject("Canvas");
        Canvas canvas = canvasObject.AddComponent();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        // Change renderMode to WorldSpace below
    }
}

Need a hint?

Set canvas.renderMode = RenderMode.WorldSpace; to switch the render mode.

4

Print the Current Render Mode

Add a line to print the current renderMode of the canvas variable to the Unity console using Debug.Log.

Unity

using UnityEngine;

public class CanvasSetup : MonoBehaviour
{
    void Start()
    {
        GameObject canvasObject = new GameObject("Canvas");
        Canvas canvas = canvasObject.AddComponent();
        canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        canvas.renderMode = RenderMode.WorldSpace;
        // Print the current renderMode below
    }
}

Need a hint?

Use Debug.Log("Current Render Mode: " + canvas.renderMode); to print the render mode.