Book Image

Unity UI Cookbook

By : Francesco Sapio
Book Image

Unity UI Cookbook

By: Francesco 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 (17 chapters)
Unity UI Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating a slider that changes colors gradually


Here, you are going to learn another type of customization that the player can perform at runtime. With this, the player has more power on how he can customize his own UI to fit suit his needs. In fact, the player will be able to switch between two colors, as in the previous chapter, but gradually and through a slider. We will handle this with a script and, as usual, using the events that are inside the Slider (Script) component.

How to do it...

  1. First of all, we need to create our slider. This can be done easily by right-clicking on the Hierarchy panel, then going to UI | Slider, and renaming it to GraduallyColorSlider. Of course, it is possible to resize the slider, change Source Image, or change the text inside. Finally, place it as you wish, in Canvas.

  2. Next, we can write a script to handle the entire process. To do this, select GraduallyColorSlider. In the Inspector, navigate to Add Component | New Script, rename it GraduallyColorSliderScript...