Unity UI Cookbook电子书

Unity UI Cookbook

Table of Contents

Unity UI Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Getting ready

How to do it…

How it works…

There's more…

See also

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. UI Essentials

Introduction

Getting ready

Setting up a 2D texture to be a bordered sprite

How to do it...

How it works...

There's more...

Slicing with less than nine sections

See also

Resizing the UI according to the screen size and resolution

How to do it...

How it works...

See also

Adding and placing an image in the UI

How to do it...

How it works...

There's more...

Rotating the image and changing the pivot point

Adding a circular mask to an image

How to do it...

How it works...

See also

Making an image scrollable

How to do it...

How it works...

See also

Making text scrollable with a vertical slider

How to do it...

How it works...

There's more...

Scrolling multiple columns at once

Scrolling horizontally

Selecting buttons through the keyboard

How to do it...

How it works...

See also

Using UI layout components

How to do it...

How it works...

See also

2. Implementing Counters and Health Bars

Introduction

Implementing a score counter

How to do it...

How it works...

There's more...

Adding a remove points function

Using boldface in the rich text

Getting the score

See also

Implementing a lives counter

How to do it...

How it works...

There's more...

Changing the number of maxLives

Getting the number of lives

See also

Creating a modular coin counter

How to do it...

How it works...

There's more...

Removing coins

Adding score if the number of lives has reached the maximum

Getting the number of coins

See also

Creating a symbolic lives counter

How to do it...

How it works...

See also

Implementing a linear health bar

How to do it...

How it works...

There's more...

See also

Implementing a radial health bar

How to do it...

How it works...

There's more...

Having a health bar that isn't necessarily 360°

See also

Creating a health bar with armor

How to do it...

How it works...

See also

Using multiple bars to make a multibar

How to do it...

How it works...

See also

Developing a kingdom hearts health bar style

How to do it...

How it works...

See also

3. Implementing Timers

Introduction

Implementing a numeric timer

How to do it...

How it works...

There's more...

Getting the time variable

See also

Creating a linear timer

How to do it...

How it works...

There's more...

Running code when the timer expires

Creating a double-sided timer

See also

Implementing a radial timer

How to do it...

How it works...

See also

Creating a mixed timer

How to do it...

How it works...

There's more...

Changing the number of decimal points shown

Using a linear timer instead of a radial timer

See also

Creating a well-formatted timer

How to do it...

How it works...…

There's more...

Getting the time variable

See also

Developing a well-formatted countdown that changes

How to do it...

How it works...

There's more...

Getting the time variable

Running code when the time expires

Increasing tension by adding decimal points when the time is close to expiring

See also

4. Creating Panels for Menus

Introduction

Creating a toggle group

How to do it...

How it works...

There's more...

Giving the player the privilege not to choose one of the options

See also

Showing the slider value as a percentage

How to do it...

How it works...

Adding upper and lower bounds to the slider

How to do it...

How it works...

There's more...

Changing the color when a bound is reached

Expressing bounds as a percentage

Limiting the value that we can set in the Inspector

See also

Making UI elements affected by different lights

How to do it...

How it works...

See also

Making a draggable panel

How to do it...

How it works...

There's more...

Creating a draggable area for the panel

See also

Making a resizable panel

How to do it...

How it works...

See also

Creating a drag-and-drop element

How to do it...

How it works...

There's more...

Checking for dropped objects

Developing an MP3 player

How to do it...

How it works...

There's more...

Showing the name of the song

5. Decorating the UI

Introduction

Creating an extendable element with a final fade effect

How to do it...

How it works...

There's more...

Changing the speed for each axis

Fade-in instead of Fade-out

See also

Creating an extendable and rotating element with a final fade effect

How to do it...

How it works...

There's more...

Creating a shining effect

Creating a better shining effect

Using more than one axis to create 3D effects

Having control over each axis

Creating a butterfly

See also

Creating bars that go up and down

How to do it...

How it works...

There's more...

Adding a phase to use more than one bar

Adding bounds to our bar

Adding bounds and a phase

See also

Making a floating UI element

How to do it...

How it works...

There's more...

Creating a shaking effect

Creating a sparkle effect

Creating a better butterfly

See also

Adding shadows to text

How to do it...

How it works...

There's more...

Creating 3D letters

See also

Adding outlines to text

How to do it...

How it works...

There's more...

Creating a nice, soft outline

Creating better 3D letters

See also

6. Animating the UI

Introduction

Appearing and disappearing menu

How to do it...

How it works...

There's more...

Freezing time

Creating a menu with an entrance transition

How to do it...

How it works...

There's more...

Freezing time

Creating a menu with an idle animation

How to do it...

How it works...

Animating a button when the cursor is over it

How to do it...

How it works...

There's more...

Stretches back the button to the same speed of the Highlighted animation

Creating a pop-up menu

How to do it...

How it works...

Animating hearts of the symbolic lives counter

How to do it...

How it works...

Changing animation of the hearts of the symbolic lives counter through the script

Getting ready...

How to do it...

How it works...

There's more...

Adding a speed controller to customize speed in the Inspector and at runtime

Customizing each animation

7. Applying Runtime Customizations

Introduction

Making a button that changes color

How to do it...

How it works...

There's more...

Changing another image instead of the one attached to the button

See also

Creating a slider that changes colors gradually

How to do it...

How it works...

See also

Creating a slide shower using a discrete slider

How to do it...

How it works...

There's more...

Adding a text label to show the number of pictures

Making the slider continuous

Automating the slider setup

Adding pictures at runtime

See also

Creating a slider that changes a single color channel

How to do it...

How it works...

There's more...

Changing all other color channels

Changing the alpha channel

Integrating with lights instead of image components

See also

Making an input field with personal text validation at runtime

How to do it...

How it works...

There's more...

Checking the string when the player finished to type

Using for cycles for dynamic filtering

See also

Making an input field for a password with a lower bound limit for characters

How to do it...

How it works...

There's more...

Giving feedback to the player on why the string is not acceptable for the input field

See also

Changing the cursor at runtime

How to do it...

How it works...

There's more...

Animating the cursor

See also

8. Implementing Advance HUDs

Introduction

Creating a distance displayer

How to do it...

How it works...

There's more...

Testing the script

Optimizing the code by using a delayed update through coroutines

Multi target detecting

Beep sound

Increasing the ratio of the beep sound according to the distance

See also

Creating a directional radar

How to do it...

How it works...

There's more...

Testing the script

Changing the projection plane

Closest target detection

Adding a delay in the radar through a coroutine

More ideas on how to use the radar

Developing a subtitle shower

How to do it...

How it works...

There's more...

Testing the script

Adding a picture of the character who is talking

Adding the name of the character who is talking

9. Diving into 3D UIs

Introduction

Creating a 3D menu

How to do it...

How it works...

There's more...

Quick shadows

See also

Adding a smooth tilt effect

How to do it...

There's more...

Starting from the original rotation

Converting the speed in the smoothness factor

Inverting the axis

Asymmetric range for the rotation

Changing the reference of the mouse from the screen to an arbitrary rect

Creating and placing a 3D UI

How to do it...

There's more...

Using the 3D world

Making an animated 3D UI warning

How to do it...

How it works...

There's more...

Transforming the update function into a coroutine

Always orienting the warning towards the player

Adding a floating effect

See also

10. Creating Minimaps

Introduction

Getting ready

Creating a minimap

How to do it...

How it works...

There's more...

Setting an orthographic camera

See also

Implementing advanced features for minimaps

How to do it...

How it works...

There's more...

Limiting the boundaries of the minimap camera

Rotating the minimap according to where the player is facing

Smoothly rotating the minimap compass to point towards the relative north of the game environment

Improving the lighting within the minimap

Ideas for implementing the minimap in closed environments

Other techniques for minimaps

Index