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 a circular mask to an image

Often in games, UI elements are not designed to be rectangular. Thus, a quick way to change their shape is through masking. One of the basic shapes is a circle. Therefore, in this recipe, you will learn how to make an image circular. This could be useful, for example, to surround a character icon circularly or to create special circular buttons. In order to achieve this, we will use the Mask component.

How to do it...

  1. First of all, we need to create a mask, which in this case should be circular. Since the mask is just another image, let's open a graphic program that we have. Then, we need to create a new image with the same pixels for the height and width so that the drawing canvas is a square.
  2. This step and the following step depend on the graphics program that you are using. Now, we have to draw a white circle in the middle of the image.
  3. Furthermore, we should also ensure that the background is transparent. From the following screenshot, you can get an idea of what the final outcome will look like (the program used for this is Photoshop):
    How to do it...

    Tip

    If you are using Photoshop, you can easy create this mask using the ellipse tool. While holding down the Shift key, click on the top-left corner and drag it to the bottom-right corner.

    If you don't have a graphics program or you don't want to use a graphics program, you can use the image provided along with the code featured in this book.

  4. The next step is to import this mask into the project. To do this, right-click on the Project panel and select Import new asset.
  5. Unity will ask us to select the mask that we have just created. Therefore, locate the folder where you saved it and then import it.
  6. In order to see the settings of the imported mask as an image in the Inspector, we need to select it in the Project panel.
  7. Thus, if our project is not set in 2D, we should change the Texture Type in Sprite (2D and UI) in the Inspector and then click on Apply.
  8. Now, we need to create a new panel. We can do this by right-clicking on the Hierarchy panel and then going to UI | Panel. We should also ensure that we have it inside the Canvas object.
  9. Inside the Image (Script) component, we need to set our mask to the Source Image variable.
  10. In order to get the exact shape that we created in our graphics program, we need to bring the image back to its original proportions. This can be done by clicking on Set Native Size and then scaling uniformly (keeping Shift pressed) if needed.
  11. The next thing to do is transform our panel into a mask. So, we need to add the Mask (Script) component to our panel.
  12. Then, we need an image to put the mask on. Therefore, let's create an image inside the panel. To do this, we need to right-click on the Hierarchy panel and then go to UI | Image.
  13. Inside the Image (Script) component of the image, we need to select the picture that we want to mask. This can be done by dragging it into the Source Image variable of the component. As a result, it will be masked with a circle.
  14. If needed, we can click on Set Native Size and scale it uniformly.
  15. In this case, by using an ancient map, we can see what the final outcome should look like in the following picture:
    How to do it...

How it works...

As we have seen, Unity uses another image to create the mask. This is the reason the Mask (Script) component is attached to the object that has an Image (Script) component. As a result, it is possible to create any shape that we want for the mask. In fact, the only thing we need to keep in mind is that the white sections of the mask texture will be the parts that are visible.

See also

End of Section 6
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