Adding and placing an image in the UI

Since our UIs mostly consist of images, it's very important to learn how to handle them with the Image (Script) components in Unity. In fact, we will use them a lot in all the recipes of this book. In particular, here you can understand how to create a new image and properly place it in your UI.

How to do it...

1. Let's start by importing the image into our project, as we did in the first recipe of this chapter. We can do this by right-clicking on the Project panel and selecting Import new asset. Of course, it is also possible to drag the asset into the same panel and skip the next step.
2. We can navigate through our files to select the image that we want to import.
3. If we select our image in the Project panel, it is possible to see all its properties in the Inspector.
4. In order to use our image as Source Image of our UI, we need to change Texture Type to Sprite (2D and UI) in the Inspector. As you learned in the first recipe, if our project is set in 2D, all the images will have already been imported as sprites.
5. Now, in the Inspector, there are different import settings. There is no need to change the settings for this recipe; it is important to understand these features so that we can properly import all our images into the project. These features include the format, along with the size and the compression method. If, for instance, we need to make the image file size smaller for performance. You can find references to them in the See also section of this recipe. Then, when we are satisfied with our choices, we can click on the Apply button so that the import settings are applied. This could take some minutes if you have changed the settings of many different images at once.
6. Next, we need to create the UI image that will be in the UI. In order to add it to the scene, we have to right-click on the Hierarchy panel and then navigate to UI | Image. We should also ensure that it is inside the Canvas object.

   Tip

   UI components that are outside Canvas will not be drawn by Unity, so ensure that every UI component is always inside Canvas!

   If they are not, we can drag and drop them onto the Canvas object so that they become children, and they appear again.

7. Inside the Image (Script) component, which we can find in the Inspector, we drag the image that we have imported inside the Source Image variable.

   Tip

   If our image is sliced, as we saw in the first recipe of this chapter, we also need to set Image Type to Sliced.

8. As a result, our image appears in the UI, but it has taken the dimensions and scaling of the Image object that we have created. Therefore, if we need to keep its original dimensions, we can click on Set Native Size in order to set them again.
9. So that it is easier to work with the UI, set your scene view to 2D, as shown in the following screenshot, and zoom out and pan until you can clearly see your Canvas. At this stage, it is very large, so don't worry if you zoom out too much. Otherwise, you can use the hotkey F (or double-click on the image in the Hierarchy panel) to focus the camera on it:
   

   In order to scale and place the image, we select the last Transform Tool, which we can find in top-left corner of Unity, as shown in the next screenshot. It is called the Rect Tool, and it can easily be selected by pressing the hotkey T. While we need different tools to translate, rotate, and scale 3D objects, since they have many degrees of freedom, we can perform all of these operations with just one tool when we deal with a 2D object:

   
10. After we have selected the image from the scene view, four blue points appear on the corners. These are the control points of the Rect Tool.
11. We can drag one of them to scale the image.

    Tip

    If you want to keep the images' original proportions, you can hold down Shift while you are dragging the blue points.

    Furthermore, if you hold down Alt instead of Shift, you can simultaneously scale the object in two directions symmetrically.

    Finally, you can also resize the image by clicking on the edges instead of the corners and dragging them.

12. In conclusion, we can place the image wherever we want to by clicking anywhere inside the rectangle and dragging. Again, keep in mind that all the UI elements, including the image, must be inside the Canvas in order to be drawn by Unity and displayed to the player.

How it works...

The new UI system of Unity allows us to add images to the UI in a very simple way. The Image (script) component takes a Source Image and draws it on the screen. However, this happens only if the object to which this component is attached is inside Canvas. In fact, Unity calls functions to draw the UI only if they are inside Canvas.

In the preceding examples, we used the Rect Tool to scale and place the image, because every UI element is represented as a rectangle for the purpose of this layout.

There's more...

Rotating an image it's crucial in designing good UIs. Moreover, all the rotations depends by the pivot point. Thus, the aim of the following section is to give an overview of the concepts to start to experiment and learn how to use properly this tools.

Rotating the image and changing the pivot point

We can also rotate the image by slightly moving the cursor away from the corners until it looks like a rotation symbol. Then, we can click and drag it in either direction to rotate the image. We can also change the pivot point. After selecting the image in the scene view, just click and drag the blue circle at the center of the image. By doing this, we can rotate images in different ways. You can better understand this concept by paying attention to the following image, which shows the same rectangle rotated with two different pivot points:

Tip

The four black squares are our referring points to understand the difference. Both the rectangles are rotated by the same angle. In the upper rectangle, the pivot point (blue circle) is in the middle, whereas in the lower rectangle, it is moved to the left side.

Furthermore, changing the pivot point could lead to an interesting variation in our UI when this is animated or controlled by scripts. For instance, we should definitely try to experiment with different locations of pivot points in the Creating an extendable element with a final fade effect and Creating an extendable and rotating element with a final fade effect recipes in Chapter 5, Decorating the UI.