Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Unity UI Cookbook
  • Toc
  • feedback
Unity UI Cookbook

Unity UI Cookbook

By : Sapio
4.5 (13)
close
Unity UI Cookbook

Unity UI Cookbook

4.5 (13)
By: Sapio

Overview of this book

With the increasing interest in game development, it's essential to design and implement a UI that reflects the game settings and shows the right information to the player. The Unity system is used to create complex and aesthetically pleasing user interfaces in order to give a professional look and feel to a game. Although the new Unity UI system is powerful and quite easy to use, by integrating it with C# scripts, it's possible to realize the potential of this system and bring an impressive UI to games. This guide is an invaluable collection of recipes if you are planning to use Unity to develop a game. Starting with the basic concepts of the UI components, we’ll take you all the way through to creating complex interfaces by including animations and dynamics elements. Based on real-world problems, these recipes will start by showing you how to make common UI elements such as counters and healthbars. You will then get a walkthrough of how to manage time using timers, and will learn how to format them. You will move on to decorating and animating the UI elements to vivify them and give them a professional touch. Furthermore, you will be guided into the 3D UI world and into HUD scripting. Finally, you will discover how to implement complex minimaps in the interface.
Table of Contents (12 chapters)
close
close
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Sections
Conventions
Reader feedback
Customer support
Free Chapter
1
1. UI Essentials
chevron up
1. UI Essentials
Introduction
Setting up a 2D texture to be a bordered sprite
Resizing the UI according to the screen size and resolution
Adding and placing an image in the UI
Adding a circular mask to an image
Making an image scrollable
Making text scrollable with a vertical slider
Selecting buttons through the keyboard
Using UI layout components
2
2. Implementing Counters and Health Bars
2. Implementing Counters and Health Bars
Introduction
Implementing a score counter
Implementing a lives counter
Creating a modular coin counter
Creating a symbolic lives counter
Implementing a linear health bar
Implementing a radial health bar
Creating a health bar with armor
Using multiple bars to make a multibar
Developing a kingdom hearts health bar style
3
3. Implementing Timers
3. Implementing Timers
Introduction
Implementing a numeric timer
Creating a linear timer
Implementing a radial timer
Creating a mixed timer
Creating a well-formatted timer
Developing a well-formatted countdown that changes
4
4. Creating Panels for Menus
4. Creating Panels for Menus
Introduction
Creating a toggle group
Showing the slider value as a percentage
Adding upper and lower bounds to the slider
Making UI elements affected by different lights
Making a draggable panel
Making a resizable panel
Creating a drag-and-drop element
Developing an MP3 player
5
5. Decorating the UI
5. Decorating the UI
Introduction
Creating an extendable element with a final fade effect
Creating an extendable and rotating element with a final fade effect
Creating bars that go up and down
Making a floating UI element
Adding shadows to text
Adding outlines to text
6
6. Animating the UI
6. Animating the UI
Introduction
Appearing and disappearing menu
Creating a menu with an entrance transition
Creating a menu with an idle animation
Animating a button when the cursor is over it
Creating a pop-up menu
Animating hearts of the symbolic lives counter
Changing animation of the hearts of the symbolic lives counter through the script
7
7. Applying Runtime Customizations
7. Applying Runtime Customizations
Introduction
Making a button that changes color
Creating a slider that changes colors gradually
Creating a slide shower using a discrete slider
Creating a slider that changes a single color channel
Making an input field with personal text validation at runtime
Making an input field for a password with a lower bound limit for characters
Changing the cursor at runtime
8
8. Implementing Advance HUDs
8. Implementing Advance HUDs
Introduction
Creating a distance displayer
Creating a directional radar
Developing a subtitle shower
9
9. Diving into 3D UIs
9. Diving into 3D UIs
Introduction
Creating a 3D menu
Adding a smooth tilt effect
Creating and placing a 3D UI
Making an animated 3D UI warning
10
10. Creating Minimaps
10. Creating Minimaps
Introduction
Creating a minimap
Implementing advanced features for minimaps
11
Index
Index

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:
    How to do 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:

    How to do it...
  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:

Rotating the image and changing the pivot point

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.

End of Section 5
Next Section
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete