You are previewing Unity UI Cookbook.
O'Reilly logo
Unity UI Cookbook

Book Description

Over 60 recipes to help you create professional and exquisite UIs to make your games more immersive

About This Book

  • Design and develop interactive and professional user interfaces (UIs) for games in Unity

  • Discover how to implement and deal with various in-game UI elements that will impress your players

  • This practical recipe guide will help you to efficiently create powerful and remarkable UIs using C# code

  • Who This Book Is For

    If you are a game developer with some experience in Unity and C# and want to create the best interactive experience fast and intuitively, then this book is for you. If you are an intermediate game developer or an expert, these recipes will help you bring out the power of the new UI Unity system.

    What You Will Learn

  • Implement different kinds of counters and healthbars

  • Deal with timers and find out how to format them

  • Animate and vivify UI elements

  • Handle runtime customizations

  • Add complex Head-up displays (HUDs)

  • Design and implement 3D UIs

  • Integrate minimaps in the UI

  • In Detail

    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.

    Style and approach

    Interactive, easy-to-follow recipes will help you create and implement UIs that make gaming an exhilarating experience.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of Contents

    1. Unity UI Cookbook
      1. Table of Contents
      2. Unity UI Cookbook
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Sections
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
          5. See also
        5. Conventions
        6. Reader feedback
        7. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. UI Essentials
        1. Introduction
          1. Getting ready
        2. Setting up a 2D texture to be a bordered sprite
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Slicing with less than nine sections
          4. See also
        3. Resizing the UI according to the screen size and resolution
          1. How to do it...
          2. How it works...
          3. See also
        4. Adding and placing an image in the UI
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Rotating the image and changing the pivot point
        5. Adding a circular mask to an image
          1. How to do it...
          2. How it works...
          3. See also
        6. Making an image scrollable
          1. How to do it...
          2. How it works...
          3. See also
        7. Making text scrollable with a vertical slider
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Scrolling multiple columns at once
            2. Scrolling horizontally
        8. Selecting buttons through the keyboard
          1. How to do it...
          2. How it works...
          3. See also
        9. Using UI layout components
          1. How to do it...
          2. How it works...
          3. See also
      9. 2. Implementing Counters and Health Bars
        1. Introduction
        2. Implementing a score counter
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Adding a remove points function
            2. Using boldface in the rich text
            3. Getting the score
          4. See also
        3. Implementing a lives counter
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Changing the number of maxLives
            2. Getting the number of lives
          4. See also
        4. Creating a modular coin counter
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Removing coins
            2. Adding score if the number of lives has reached the maximum
            3. Getting the number of coins
          4. See also
        5. Creating a symbolic lives counter
          1. How to do it...
          2. How it works...
          3. See also
        6. Implementing a linear health bar
          1. How to do it...
          2. How it works...
          3. There's more...
          4. See also
        7. Implementing a radial health bar
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Having a health bar that isn't necessarily 360°
          4. See also
        8. Creating a health bar with armor
          1. How to do it...
          2. How it works...
          3. See also
        9. Using multiple bars to make a multibar
          1. How to do it...
          2. How it works...
          3. See also
        10. Developing a kingdom hearts health bar style
          1. How to do it...
          2. How it works...
          3. See also
      10. 3. Implementing Timers
        1. Introduction
        2. Implementing a numeric timer
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Getting the time variable
          4. See also
        3. Creating a linear timer
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Running code when the timer expires
            2. Creating a double-sided timer
          4. See also
        4. Implementing a radial timer
          1. How to do it...
          2. How it works...
          3. See also
        5. Creating a mixed timer
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Changing the number of decimal points shown
            2. Using a linear timer instead of a radial timer
          4. See also
        6. Creating a well-formatted timer
          1. How to do it...
          2. How it works...…
          3. There's more...
            1. Getting the time variable
          4. See also
        7. Developing a well-formatted countdown that changes
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Getting the time variable
            2. Running code when the time expires
            3. Increasing tension by adding decimal points when the time is close to expiring
          4. See also
      11. 4. Creating Panels for Menus
        1. Introduction
        2. Creating a toggle group
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Giving the player the privilege not to choose one of the options
          4. See also
        3. Showing the slider value as a percentage
          1. How to do it...
          2. How it works...
        4. Adding upper and lower bounds to the slider
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Changing the color when a bound is reached
            2. Expressing bounds as a percentage
            3. Limiting the value that we can set in the Inspector
          4. See also
        5. Making UI elements affected by different lights
          1. How to do it...
          2. How it works...
          3. See also
        6. Making a draggable panel
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Creating a draggable area for the panel
          4. See also
        7. Making a resizable panel
          1. How to do it...
          2. How it works...
          3. See also
        8. Creating a drag-and-drop element
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Checking for dropped objects
        9. Developing an MP3 player
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Showing the name of the song
      12. 5. Decorating the UI
        1. Introduction
        2. Creating an extendable element with a final fade effect
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Changing the speed for each axis
            2. Fade-in instead of Fade-out
          4. See also
        3. Creating an extendable and rotating element with a final fade effect
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Creating a shining effect
            2. Creating a better shining effect
            3. Using more than one axis to create 3D effects
            4. Having control over each axis
            5. Creating a butterfly
          4. See also
        4. Creating bars that go up and down
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Adding a phase to use more than one bar
            2. Adding bounds to our bar
            3. Adding bounds and a phase
          4. See also
        5. Making a floating UI element
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Creating a shaking effect
            2. Creating a sparkle effect
            3. Creating a better butterfly
          4. See also
        6. Adding shadows to text
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Creating 3D letters
          4. See also
        7. Adding outlines to text
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Creating a nice, soft outline
            2. Creating better 3D letters
          4. See also
      13. 6. Animating the UI
        1. Introduction
        2. Appearing and disappearing menu
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Freezing time
        3. Creating a menu with an entrance transition
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Freezing time
        4. Creating a menu with an idle animation
          1. How to do it...
          2. How it works...
        5. Animating a button when the cursor is over it
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Stretches back the button to the same speed of the Highlighted animation
        6. Creating a pop-up menu
          1. How to do it...
          2. How it works...
        7. Animating hearts of the symbolic lives counter
          1. How to do it...
          2. How it works...
        8. Changing animation of the hearts of the symbolic lives counter through the script
          1. Getting ready...
          2. How to do it...
          3. How it works...
          4. There's more...
            1. Adding a speed controller to customize speed in the Inspector and at runtime
            2. Customizing each animation
      14. 7. Applying Runtime Customizations
        1. Introduction
        2. Making a button that changes color
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Changing another image instead of the one attached to the button
          4. See also
        3. Creating a slider that changes colors gradually
          1. How to do it...
          2. How it works...
          3. See also
        4. Creating a slide shower using a discrete slider
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Adding a text label to show the number of pictures
            2. Making the slider continuous
            3. Automating the slider setup
            4. Adding pictures at runtime
          4. See also
        5. Creating a slider that changes a single color channel
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Changing all other color channels
            2. Changing the alpha channel
            3. Integrating with lights instead of image components
          4. See also
        6. Making an input field with personal text validation at runtime
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Checking the string when the player finished to type
            2. Using for cycles for dynamic filtering
          4. See also
        7. Making an input field for a password with a lower bound limit for characters
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Giving feedback to the player on why the string is not acceptable for the input field
          4. See also
        8. Changing the cursor at runtime
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Animating the cursor
          4. See also
      15. 8. Implementing Advance HUDs
        1. Introduction
        2. Creating a distance displayer
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Testing the script
            2. Optimizing the code by using a delayed update through coroutines
            3. Multi target detecting
            4. Beep sound
            5. Increasing the ratio of the beep sound according to the distance
          4. See also
        3. Creating a directional radar
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Testing the script
            2. Changing the projection plane
            3. Closest target detection
            4. Adding a delay in the radar through a coroutine
            5. More ideas on how to use the radar
        4. Developing a subtitle shower
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Testing the script
            2. Adding a picture of the character who is talking
            3. Adding the name of the character who is talking
      16. 9. Diving into 3D UIs
        1. Introduction
        2. Creating a 3D menu
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Quick shadows
          4. See also
        3. Adding a smooth tilt effect
          1. How to do it...
          2. There's more...
            1. Starting from the original rotation
            2. Converting the speed in the smoothness factor
            3. Inverting the axis
            4. Asymmetric range for the rotation
            5. Changing the reference of the mouse from the screen to an arbitrary rect
        4. Creating and placing a 3D UI
          1. How to do it...
          2. There's more...
            1. Using the 3D world
        5. Making an animated 3D UI warning
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Transforming the update function into a coroutine
            2. Always orienting the warning towards the player
            3. Adding a floating effect
          4. See also
      17. 10. Creating Minimaps
        1. Introduction
          1. Getting ready
        2. Creating a minimap
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Setting an orthographic camera
          4. See also
        3. Implementing advanced features for minimaps
          1. How to do it...
          2. How it works...
          3. There's more...
            1. Limiting the boundaries of the minimap camera
            2. Rotating the minimap according to where the player is facing
            3. Smoothly rotating the minimap compass to point towards the relative north of the game environment
            4. Improving the lighting within the minimap
            5. Ideas for implementing the minimap in closed environments
            6. Other techniques for minimaps
      18. Index