UI for 2D Projects

You’ve made UI for 3D projects, including creating titles, buttons, sliders, and toggles. In this tutorial, you’ll explore a 2D version of a similar scene. What you'll find is that everything you learned for UI in 3D projects is applicable in 2D projects.

In this step, you'll open the CreativeCore_2D project and then explore the 2D UI demo scene within it.

Instructions

To test out and explore the 2D UI scene, follow these instructions:

1. Download and open the CreativeCore_2D project:

• If you’ve already downloaded the CreativeCore_2D project in a previous unit, open it now using the Unity Hub.
• If you haven’t downloaded it yet, you can download the project here and then open it using the Unity Hub.
• When the project is open in the Unity Editor, verify you see a CreativeCore_2D folder within your Project window, containing several subfolders.

2. Open the CC_UI_2D scene:

• Go to Assets > CreativeCore_2D > Scenes, then open CC_UI_2D_Scene.

3. Enter Play mode and take note of the UI elements:

• Enter Play mode.
• Notice the following:
  • The UI looks and functions similarly to what you would expect in a 3D project.
  • You can open the Settings menu, toggle the music on or off, adjust the volume with a slider, and press buttons to change the lighting mode.
  • There’s a world space text label, “P1”, that follows the player character, including appearing in front or behind other GameObjects depending on the player’s position in the scene.
• Exit Play mode when you’re done.

When implementing UI in Unity 2D projects, you'll find that the implementation is almost exactly the same as it is for 3D projects.

For each of the similarities and differences listed below, explore the project to make sure you understand how each of the features were implemented in 2D.

What's the same?

There’s no meaningful difference in the implementation of UI between 2D and 3D projects. User interfaces are inherently 2D in nature, consisting of flat elements like buttons, text, and images. The technical steps remain consistent whether you're using Unity's original uGUI system or the newer UI Toolkit.

1. In the Hierarchy window, use the foldout (triangle) to expand the Menu_UI GameObject and all of its child GameObjects.

2. In the Inspector window, locate the Button component, the Toggle component, and the Slider component.

What's different?

World Space UI

In 2D projects, World Space UI elements typically don’t have a 3D element. While they can still be placed within the game world and can move with GameObjects, their rendering is usually constrained to a 2D plane without perspective distortion, unlike in a 3D World Space UI. Instead, you can use the Sorting Layer and the Order in Layer properties of the Canvas to control the depth within a scene.

• Enter Play mode and notice how the “P1” label that follows the player goes behind the lightpost and the fire when the player stands behind them, but the label appears on top of those objects when the player is in front of them, just as you’d expect.
• In the Hierarchy window, expand the PlayerRobot GameObject, then select the Canvas_WorldSpace GameObject.
• In the Canvas component, locate the Sorting Layer and the Order in Layer properties and see how the text is configured to render.

You now understand how to implement UI in 3D projects and how that translates almost perfectly to 2D projects. You’re ready to apply these concepts to your own personal projects, be they 3D or 2D.