UI & Levels

Part 3: Creating Levels, Start/End Screens, and Displaying Coins

13 min read 53K+ views Apr 15, 2021
Part 3 of 5 - Visual Scripting Series

In this part, we'll create a complete game with multiple levels, UI, and a start/end screen. This completes the core game from the original 3-part series.

1 Creating the Start Scene

  1. Go to your Scenes folder
  2. Create a new Scene called "Start"
  3. Add UI → Image (this creates a Canvas automatically)
  4. Hold Alt and click the stretch icon to fill the screen
  5. This white image will be our background

Adding the Title Text

  1. Add UI → Text
  2. Name it "Start Game"
  3. Set Width to 800, Height to 100
  4. Set Font Size to 80
  5. Center the alignment
  6. Add a custom font by creating a Fonts folder and importing your font

Scaling UI with Screen Size

  1. Select the Canvas
  2. Change UI Scale Mode from "Constant Pixel Size" to Scale With Screen Size
  3. Set Match to Height
Responsive UI

Scale With Screen Size ensures your UI looks consistent across different screen resolutions.

2 Start Screen Logic

  1. Select your background Image (rename to "UI Background")
  2. Add a Script Machine component (Embedded)
  3. Add On Mouse Input event (Left Button, Down)
  4. Add Scene Manager Load Scene (by build index)
  5. Set the build index to 1

3 Setting Up Build Settings

  1. Rename "SampleScene" to "Level1"
  2. Go to File → Build Settings
  3. Drag your scenes in order:
    • Start (index 0)
    • Level1 (index 1)

4 Creating Prefabs

Before duplicating levels, convert objects to prefabs:

  1. Create a Prefabs folder
  2. Drag these objects into the folder:
    • Coin
    • Obstacle
    • Finish
    • Player
    • Ground
Important: Convert Embedded Graphs

For prefabs with Embedded graphs (like Coin), click Convert in the Script Machine to convert to a Graph asset. This ensures logic updates apply to all instances.

Creating a Level Base Prefab

  1. Create an empty GameObject called "Level Base"
  2. Add Camera, Light, and other scene essentials as children
  3. Save as a prefab for reuse across levels

5 Designing Multiple Levels

  1. Arrange obstacles and coins in Level1
  2. Save the scene
  3. Duplicate Level1 (Ctrl+D) to create Level2
  4. Open Level2 and modify the layout
  5. Use orthographic top-down view for easier level design (click Y axis, then center button)
  6. Repeat for Level3
Level Design Tip

To prevent accidentally selecting the ground, click the lock icon next to it in the Hierarchy to disable selection.

6 Loading the Next Level

Update the Player graph to load the next level instead of restarting:

  1. Open the Player prefab's graph
  2. Replace the restart logic with Scene Manager Load Scene (by build index)
  3. Get the current build index:
    • Add Scene Manager Get Active Scene
    • Add Scene Get Build Index
  4. Add Add unit (add 1 to the index)
  5. Connect to Load Scene

7 Creating the End Scene

  1. Duplicate the Start scene, rename to "End"
  2. Change the text to "Thanks for Playing"
  3. In the Script Machine, replace Load Scene with Application Quit
  4. Add the End scene to Build Settings (it should be the last index)

8 Displaying Coin Count

Creating the UI

  1. Open your Level Base prefab
  2. Add UI → Image (use a circle sprite for a coin icon)
  3. Color it yellow
  4. Anchor to top-left corner
  5. Add UI → Text as a child to display the count

Updating the Count

  1. Add a Script Machine to the text object
  2. On Start and Update, use Set Text
  3. Get the Saved Variable "Coins"
  4. Convert to string with Integer To String
  5. Connect to Set Text

9 Adding Fog

Add depth with fog:

  1. Go to Window → Rendering → Lighting
  2. Under Environment, enable Fog
  3. Set the fog color to match your background
  4. Adjust density to taste
  5. Repeat for each level scene

10 Building the Game

  1. Go to File → Build Settings
  2. Verify all scenes are added in the correct order
  3. Select your target platform
  4. Click Build and Run
  5. Choose a builds folder and wait for compilation

What's Next?

Congratulations! You've completed the core game. The bonus episodes cover:

  • E04: Adding a Level Complete cutscene animation
  • E05: Creating a coin shop to spend your collected coins