All content in this course uses:

Challenge — Labeling Objects with Text and Images (Intro to UI)

In this challenge, you will be creating a welcome sign using mobile UI. 

Tutorial10_LabelObjectsWithTextAndImages.zip

This challenge will be the first part of our mobile UI system. You will make a welcome sign on a door by adding four images representing buttons. 

You will add multiple Image and Text Components around the Scene. In the Interactive UI tutorial, you will learn how to use these images as buttons and swap your surroundings, representing a world change.

This challenge will help you practice building UI in both the 3D world and on your screen.

Make a sign and place it on the door in World Space

Make four mobile UI images (representing your UI buttons) in Screen Space.

Mobile UI

Add a Panel, convert its Canvas to World Space, and place it on your door. 

GameObject and adjust its layout to stretch across the Canvas.

 Re-position the Canvas on the door model. See the image below for a hint.​​​​​

to a color of your liking; we chose red for this example.

Add a UI Panel to the Scene

Add the text “Welcome to our world!” so the user understands to walk through the portal.

Add Text to the Panel

Make sure the Camera has the appropriate components to make it AR ready.

 Ensure the components match the image above.

Confirm the Camera is Ready for AR

Add a new Canvas and add four new images. (These will eventually be converted to buttons in the Interactive UI tutorial.)

as a child of that Canvas (this will eventually be converted into a button in the Intermediate UI tutorial).

 Duplicate that image three times to create the other three buttons.

 Rearrange the buttons so they fit well on the screen.

When creating multiple similar GameObjects in Unity, it's best practice to create a base version and duplicate it multiple times. In this example, we have created a basic label before duplicating it multiple times. Now the labels only need to have their text changed and lines positioned to point at the relevant objects. Aside from saving you valuable time in development, this process ensures consistency across similar GameObjects.

Add Your Mobile UI Screen Images

Select all of the images and set their anchor point to the bottom-middle of the screen.

 In the Hierarchy, select all four images.

and select the lower-middle dot so the images are all anchored to the lower-middle point of the Canvas. 

 refers to the GameObject’s point of rotation. By default, the Pivot Point is centered in the middle of the 2D or 3D GameObject. However, by modifying the X and Y value, this Pivot Point translates to the new position that the GameObject will rotate around.

is a critical ingredient in responsive UI. It locks the UI to that specified area of the Canvas. If that area moves, so will the Anchor Point and, subsequently, the anchored UI GameObject. 

Make the UI Responsive to Different Screen Sizes

Add Text objects as children of each button and format them accordingly.

 as a child of each image. These images will eventually be buttons swapping the environments, so we need to indicate each button type with text

 Increase the font size to 100. Adjust its 

 button, so the user can purchase tickets or learn more while using the application.

 Make any last adjustments needed to keep the text in the center of each image.

Add Text to Your Images

Convert the Asset images to Sprites so you can add them as the Source Image values. 

 Find and select the images in the Project Window (

 Make any last adjustments that you feel would enhance the UI or the Scene. 

Add New Images to Your Button Placeholders

Mock-up and import your own images to act as the button backgrounds. Try adding a nice white rim around the outside and making the buttons a different color on the inside.

Bonus Challenge!

You've now added text and images in your Scene. You have all of the necessary tools to add labels, logos, and other graphics as needed.

By completing this challenge, you’re now able to:

Add images and text to a 3D Scene (World Space)

Add images and text to a 2D Scene (Screen Space)

Customize the text and images to your liking

Unity Version 2019.3