Every UI element you create must be a child of a UI Canvas. To see a list of all UI elements you can create within Unity, select Create | UI from the Hierarchy window, as shown in the following screenshot:

Every one of the UI items highlighted in the preceding screenshot are renderable UI items and must be contained within a Canvas to render. If you try to add any of those UI elements to a scene that does not contain a Canvas, a canvas will automatically be added to the scene, and the item you attempted to create will be made a child of the newly added Canvas. To demonstrate this, try adding a new UI Text element to an empty scene. You can do so by selecting Create | UI | Text.

This will cause three new items to appear in the Hierarchy list: Canvas, Text, and Event System, where the Text is a child of the Canvas.

Now that you have a Canvas in your scene, any new UI...

The main function of UI Panels is to hold other UI elements. You can create a Panel by selecting Create | UI | Panel. Its important to note that there is no Panel component. Panels are really just GameObjects that have Rect Transform, Canvas Renderer, and Image components. So, really, a UI Panel is just a UI Image with a few properties predefined for it.

By default, Panels start with the Background image (which is just a grey rounded rectangle) as the Source Image with medium opacity. You can replace the Source Image with another image or remove the image entirely.

Panels are very useful when you are trying to ensure that items scale and are appropriately relative to each other. Items that are contained within the same Panel will scale relative to the Panel and maintain their relative position to each other in the process.

We will look at the Image component more thoroughly...

Each UI element has a Rect Transform component. The Rect Transform component works very similarly to the Transform component and is used to determine the position of the object on which it is attached.

Any of the Transform tools can be used to manipulate UI objects. However, the Rect Tool allows you to scale, move, and rotate any object by manipulating the rectangle that encompasses it. While this tool can be used with 3D objects, it is most useful for 2D and UI objects.

• To move an object with the Rect Tool, select the object and then click and drag inside the rectangle.
• To resize an object, hover over the edge or corner of an object. When the curse changes to arrows, click and drag to resize the...

Every UI object has a set of Anchor Handles and a Pivot Point. These objects used together will help ensure that your UI is positioned appropriately and scales appropriately if the resolution or aspect ratio of your game changes.

The Anchor Handles are represented by four triangles in the form of an X, as shown in the following diagram:

The Anchors can be in a group together forming a single Anchor, as shown in the preceding diagram, or they can be split in to multiple Anchors, as follows:

The Anchors will always form a rectangle. So, the sides will always line up.

The Rect Transform has properties for Anchor Min and Anchor Max points. These represent the position of the Anchor Handles relative to the parent's Rect Transform, as percentages. So, for example, a 0 in an x value represents all the way to the left, and a 1 represents all the way to the...

You can add a Canvas Group component to any UI object. It allows you to adjust specific properties of the UI object it is attached to and all of its children at once, rather than having to adjust these properties individually. You can add a Canvas Group component to any UI object by selecting Add Component | Layout | Canvas Group (you can also just search for Canvas Group) from the UI object's Inspector.

You can adjust the following properties using a Canvas Group component:

• Alpha: This is the transparency of the UI objects within the Canvas Group. The number is between 0 and 1 and represents a percentage of opaqueness; 0 is completely transparent, while 1 is completely opaque.
• Interactable: This setting states whether or not the objects within the group can accept input.
• Blocks Raycast: This setting determines if the objects within the group will...

It's kind of hard to make any UI examples without using text or images. So, before we cover examples of that discuss layout, let's first look at the basic properties of UI Text and UI Images. UI Text and UI Images are discussed more thoroughly in Chapter 6, Text, Images, and TextMesh Pro-Text.

When you create a new Text object using Create | UI | Text, you will see that it has a Text Component.

You can change the displayed text by changing the words in the New Text box. In Chapter 6, Text, Images, and TextMesh Pro-Text, we'll take a closer look at the individual properties of the Text component, but, for now, it should be fairly obvious what most of the properties do.

When you create a new Image object using Create | UI | Image, you will see that it has an Image component.

Remember that a Panel is essentially an Image, but with a...

Now let's jump into some examples! We'll be creating a layout for a basic heads-up-display (HUD) and a background image that stretches with the screen and scales at multiple resolutions.

Before we begin setting up our UI, let's set up our project and bring in the art assets we will need.

We'll begin by setting up our project:

1. Create a new Unity Project and name it Master Unity UI Project. Create it in the 2D mode.

2. Create three new folders named Scenes, Scripts, and Sprites:
   
   

Wow! This chapter was intense! There was a lot to cover, as this chapter set the groundwork that will be used throughout the rest of this book.

In this chapter, we discussed the following topics:

• Creating UI Canvases and setting their properties
• Creating UI Panels and setting their properties
• Using the Rect Tool and Rect Transform component
• Properly setting anchor and pivot points
• Creating and laying out a basic HUD
• Creating a background image
• Setting up a basic pop-up menu

The next chapter will cover how to create different automatic layouts that will let us line up our UI in grids.