Unity UI Cookbook Over 60 recipes to help you create professional and exquisite UIs to make your games more immersive Francesco Sapio BIRMINGHAM - MUMBAI Unity UI Cookbook Copyright © 2015 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: December 2015 Production reference: 1181215 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78588-582-2 www.packtpub.com Cover image by Francesco Sapio and Lauren S. Ferro Credits Author Project Coordinator Francesco Sapio Nidhi Joshi Reviewers Proofreader Jack Donovan Safis Editing Lauren S. Ferro Indexer Commissioning Editor Rekha Nair Neil Alexander Graphics Acquisition Editor Jason Monteiro Nadeem Bagban Production Coordinator Content Development Editor Aparna Bhagat Mayur Pawanikar Cover Work Technical Editor Aparna Bhagat Deepti Tuscano Copy Editor Vikrant Phadke About the Author Francesco Sapio obtained his computer science and control engineering degree from the Sapienza University of Rome, Italy, with a couple of semesters in advance, scoring summa cum laude. Now he is studying a master's of science and engineering in artificial intelligence and robotics. Besides this, he is a Unity3D expert and skilled game designer, as well as an experienced user of the major graphics programs. Recently, he has been a reviewer of the book Unity Game Development Scripting, Packt Publishing. Francesco is also a musician and composer, especially of soundtracks for short films and video games. For several years, he worked as an actor and dancer. He was a guest of honor at the theatre Brancaccio in Rome. In addition, he is a very active person, having volunteered as a children's entertainer at the Associazione Culturale Torraccia in Rome. Also, he gives private lessons in mathematics and music to high-school and university students. Finally, Francesco loves math, philosophy, logic, and puzzle solving, but most of all, creating video games — thanks to his passion for game designing and programming. You can find him at https://linkedin.com/pub/francesco-sapio/b8/5b/365. I'm deeply thankful to my parents for their infinite patience, enthusiasm and support for me throughout my life. Moreover, I'm thankful to the rest of my family, in particular to my grandparents, since they always encouraged me to do better in my life with the Latin expressions "Ad Maiora" and "Per aspera ad astra". Besides this, I would like to thank my old Acquisition Editor for introducing me into this world and my current Content Developer for his kindness and patience. Finally, a huge thanks to all the special people are around me who I love, in particular to my girlfriend; I'm grateful for all your help in everything. About the Reviewers Jack Donovan is a game developer and software engineer who has been working with the Unity3D engine since its third major release. He studied at Champlain College in Burlington, Vermont, USA, where he received a bachelor of science in game programming. Jack currently works at IrisVR, a virtual reality start-up in New York City, where he is developing software that allows architects to generate virtual reality experiences from their CAD models or blueprints. Before IrisVR, he worked on a small independent game team with fellow students. At that time, he also wrote the book OUYA Game Development By Example by Packt Publishing. Lauren S. Ferro is a gamification consultant and designer with 10 years of experience designing interactive game and game-like applications across a variety of contexts. She has worked on, designed, and implemented strategies for a range of different purposes, from professional development to recommendation systems and educational games. She is an active researcher in the area of gamification, player profiling, and user-centred game design. Lauren runs workshops for both the general public and companies that focus on designing user-centered games and game-like applications. She is also the developer of the game design resource Gamicards (which will soon be available for purchase). You can contact her on Twitter at @R3nza. Her website is www.laurensferro.com and her e-mail ID is [email protected]. www.PacktPub.com Support files, eBooks, discount offers, and more For support files and downloads related to your book, please visit www.PacktPub.com. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. TM https://www2.packtpub.com/books/subscription/packtlib Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books. Why Subscribe? f Fully searchable across every book published by Packt f Copy and paste, print, and bookmark content f On demand and accessible via a web browser Free Access for Packt account holders If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access. Table of Contents Preface v Chapter 1: UI Essentials 1 Introduction 1 Setting up a 2D texture to be a bordered sprite 2 Resizing the UI according to the screen size and resolution 5 Adding and placing an image in the UI 6 Adding a circular mask to an image 10 Making an image scrollable 12 Making text scrollable with a vertical slider 14 Selecting buttons through the keyboard 20 Using UI layout components 23 Chapter 2: Implementing Counters and Health Bars 27 Introduction 27 Implementing a score counter 28 Implementing a lives counter 32 Creating a modular coin counter 36 Creating a symbolic lives counter 42 Implementing a linear health bar 46 Implementing a radial health bar 50 Creating a health bar with armor 52 Using multiple bars to make a multibar 56 Developing a kingdom hearts health bar style 60 Chapter 3: Implementing Timers 65 Introduction 65 Implementing a numeric timer 66 Creating a linear timer 69 Implementing a radial timer 72 Creating a mixed timer 74 i Table of Contents Creating a well-formatted timer 78 Developing a well-formatted countdown that changes 81 Chapter 4: Creating Panels for Menus 87 Introduction 87 Creating a toggle group 87 Showing the slider value as a percentage 90 Adding upper and lower bounds to the slider 93 Making UI elements affected by different lights 98 Making a draggable panel 102 Making a resizable panel 103 Creating a drag-and-drop element 107 Developing an MP3 player 110 Chapter 5: Decorating the UI 117 Introduction 117 Creating an extendable element with a final fade effect 117 Creating an extendable and rotating element with a final fade effect 121 Creating bars that go up and down 126 Making a floating UI element 131 Adding shadows to text 134 Adding outlines to text 137 Chapter 6: Animating the UI 141 Introduction 141 Appearing and disappearing menu 141 Creating a menu with an entrance transition 146 Creating a menu with an idle animation 150 Animating a button when the cursor is over it 151 Creating a pop-up menu 154 Animating hearts of the symbolic lives counter 157 Changing animation of the hearts of the symbolic lives counter through the script 159 Chapter 7: Applying Runtime Customizations 163 Introduction 163 Making a button that changes color 164 Creating a slider that changes colors gradually 166 Creating a slide shower using a discrete slider 169 Creating a slider that changes a single color channel 175 Making an input field with personal text validation at runtime 182 Making an input field for a password with a lower bound limit for characters 190 Changing the cursor at runtime 194 ii Table of Contents Chapter 8: Implementing Advance HUDs 199 Introduction 199 Creating a distance displayer 199 Creating a directional radar 209 Developing a subtitle shower 216 Chapter 9: Diving into 3D UIs 223 Introduction 223 Creating a 3D menu 223 Adding a smooth tilt effect 227 Creating and placing a 3D UI 231 Making an animated 3D UI warning 233 Chapter 10: Creating Minimaps 239 Introduction 239 Creating a minimap 240 Implementing advanced features for minimaps 245 Index 259 iii