Displaying an image

There are many cases where we wish to display an image onscreen, including logos, maps, icons, and splash graphics. In this recipe, we will display an image centered at the top of the screen.

The following screenshot shows Unity displaying an image:

Getting ready

For this recipe, we have prepared the image that you need in a folder named Images in the 01_07 folder.

How to do it...

To display an image, follow these steps:

1. Create a new Unity 2D project.
2. Set the Game panel to a 400 x 300 size. Do this by first displaying the Game panel, and then creating a new Resolution in the drop-down menu at the top of the panel. Click the plus symbol at the bottom of this menu, setting Label = Chapter 2, Width = 400, and Height = 300. Click OK and the Game panel should be set to this new resolution:

Alternatively, you can set the default Game panel resolution through menu Edit | Project Settings | Player and then the Resolution and Presentation width and height in the Inspector (having turned off the Full Screen option).

3. Import the provided Images folder. In the Inspector tab, ensure that the unity_logo image has the Texture Type set to Default. If it has some other type, then choose Default from the drop-down list, and click on the Apply button.
4. In the Hierarchy panel, add a UI | RawImage GameObject named RawImage-logo to the scene.

5. Ensure that the RawImage-logo GameObject is selected in the Hierarchy panel. In the Inspector for the RawImage (Script) component, click the file viewer circle icon at the right side of the Texture property, and select image unity_logo, as shown in the following screenshot:

An alternative way of assigning this Texture is to drag the unity_logo image from your Project folder (Images) into the Raw Image (Script) public property Texture.

6. Click on the Set Native Size button to resize the image so it is no longer stretched and distorted.
7. In Rect Transform, click on the Anchor Presets square icon, which will result in several rows and columns of preset position squares appearing. Hold down Shift + Alt and click on the top row and the center column.
8. The image will now be positioned neatly at the top of the Game panel, and will be horizontally centered.

How it works...

You have ensured that an image has the Texture Type set to Default. You added a UI RawImage control to the scene. The RawImage control has been made to display the unity_logo image file.
The image has been positioned at the top-center of the Game panel.

There's more...

There are some details you don't want to miss:

Working with 2D Sprites and UI Image components

If you simply wish to display non-animated images, then Texture images and UI RawImage controls are the way to go. However, if you want more options on how an image should be displayed (such as tiling, and animation), the UI Image control should be used instead. This control needs image files to be imported as the Sprite (2D and UI) type.

Once an image file has been dragged into the UI Image control's Sprite property, additional properties will be available, such as Image Type, and options to preserve the aspect ratio.

If you wish to prevent the distortion and stretching of a UI Sprite GameObject, then in the Inspector panel, check the Preserve Aspect option, in its Image (Script) component.

See also

An example of tiling a Sprite image can be found in the Revealing icons for multiple object pickups by changing the size of a tiled image recipe in Chapter 3, Inventory UIs.