Unity UI Cookbook

Unity UI Cookbook

By : Francesco Sapio

Buy this Book

Unity UI Cookbook

By: Francesco Sapio

Buy this Book

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.

Unity UI Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

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

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

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

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

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

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

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

Implementing Advance HUDs

Introduction

Creating a distance displayer

Creating a directional radar

Developing a subtitle shower

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

Creating Minimaps

Introduction

Creating a minimap

Implementing advanced features for minimaps

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Creating an extendable element with a final fade effect

In this recipe, you will learn how to create an extendable UI element with a final fade effect. These kinds of decorative elements are useful in the background with smaller graphics such as nice images or simple shapes. Often, they are used in main or pause menus in order to make the background dynamic and give more life to the menu. Additional techniques about how to animate the menu itself can be found in Chapter 6, Animating the UI.

How to do it...

First of all, we need to create a UI element. In this example, we will use a square, but you can also use a decorative star or another shape that you prefer. To do this, right-click on the Hierarchy panel and then navigate to UI | Image. Rename it to Extendable Element. Of course, it is possible to resize, change the source image, and place an image that we have chosen.
Next, we need to create a script that extends our image on the screen and gradually decreases the alpha channel of the color...

Unity UI Cookbook

By : Francesco Sapio

Unity UI Cookbook

By: Francesco Sapio

Overview of this book

Related Content you might be interested in

Current Title:

Unity UI Cookbook

Creating an extendable element with a final fade effect

How to do it...