Mastering UI Development with Unity

Ashley Godbold

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781787288430
• Edition: 1
• Topic: Design
• Subtopic: UI/UX Design

Master Game UI system by creating captivating user interface components with Unity 5 through Unity 2018 and C#. Learn about UI texts, images, world space UI, mobile-specific UI and much more.

Key Features

• Develop a game UI with both technical and aesthetic considerations
• Use all the UI elements provided by Unity's UI system
• Step-by-step examples of creating user interface components in the top game genres

Book Description

A functional UI is an important component for player interaction in every type of video game. Along with imparting crucial statistical information to the player, the UI is also the window through which the player engages with the world established by the game. Unity's tools give you the opportunity to create complex and attractive UIs to make your game stand out.

This book helps you realize the full potential of Unity's powerful tools to create the best UI for your games by walking you through the creation of myriad user interface components.

Learn how to create visually engaging heads-up-displays, pause menus, health bars, circular progress bars, animated menus, and more. This book not only teaches how to lay out visual elements, but also how to program these features and implement them across multiple games of varying genres.

While working through the examples provided, you will learn how to develop a UI that scales to multiple screen resolutions, so your game can be released on multiple platforms with minimal changes.

What you will learn

• Design principles and patterns for laying out elements in your UI
• Techniques that allow your UI to scale appropriately in different resolutions
• How to use automatic layouts to streamline your UI building process
• Properties of the Event System and how to appropriately hook events to your UI elements
• Access the components and properties of UI elements via code
• Implement all of Unity's built-in UI elements as well as those provided by TextMeshPro
• Develop key UI components that are popularly used in multiple game genres
• Add visual flare to user interfaces with the use of animation and particle effects
• Create a UI that displays in the Screen Space as well as World Space

Who this book is for

This book is for anyone keen to improve their games via a great user interface with Unity's UI system. If you're looking for a book that explains how to develop specific user interfaces or that thoroughly explains how each of the individual Unity components work, this book is for you.

Text, Images, and TextMesh Pro-Text

We've spent some time with UI Text and UI Images already, as they are the most basic graphical UI objects. We discussed them briefly in Chapter 2, Canvases, Panels, and Basic Layouts because it was pretty hard to start laying out UI without having anything to display visually. UI Text and UI Images are also subcomponents of the UI elements we covered in the previous chapters, so we've worked with them at their basic level. Now we will discuss these two UI objects more thoroughly so that we can have more control over our UI Text and UI Images. We will also discuss TextMesh Pro-Text objects and how they allow for even more control of the text in our game.

In this chapter, we will discuss the following topics:

• Creating UI Text objects and setting their properties
• Importing fonts into Unity
• Using markup format with UI Text objects
• Creating UI Images and setting their properties
• Using the various UI Effects components to further customize our graphical UI
• Creating TextMesh Pro-Text Objects and setting their properties
• Creating text that animates, as if, being typed out
• Creating a custom font to be used with UI Text objects
• Creating text that wraps along a curve and renders with a gradient
• Creating horizontal and circular progress bars

All the examples shown in this section can be found within the Unity project provided in the code bundle. They can be found within the scene labeled Chapter6Text in the Assets/Scene/ExamplesInText/ folder.

Each example image has a caption stating the example number within the scene.

In the scene, each example is of its own Canvas and some of the Canvases are deactivated. To view an example on a deactivated Canvas, simply select the checkbox next to the Canva's name in the Inspector.

UI Text

You can create a new UI Text object using Create | UI | Text.

The UI Text object contains the Rect Transform and Canvas Renderer components as well as the Text component.

Text component

The UI Text component gives the object it is attached to a non-interactive text display. This component does not allow you to create all types of text you may be interested in, but it does allow for most basic text displays.

The Text and Character properties

The Text property changes the text that will be displayed. Whatever is typed within this box will be displayed within the text object.

Below the Text property are a group of Character properties. These properties allow you to change the properties of the individual characters within the Text property's field.

The Font property determines which font is used for the entire block of text. By default, the Font is set to Arial. However, if you happen to not have Arial installed on your computer, it will default the font included within Unity—Liberation Sans. To use any other font, you must import the font into your Asset folder. Refer to the Importing Fonts section to learn how to bring in additional fonts.

Font Style provides a drop-down list of available font styles that come with the provided font. Possible styles are Normal, Bold, Italic, or Bold And Italic:

It's important to note that not all fonts will support all the listed font styles. For example, Liberation Sans, the font bundled within Unity, does not support a Bold or an Italic font style.

Font Size determines the size of the text, and Line Spacing represents the vertical spacing between each line of text.

If the Rich Text property is selected, you can include markup tags within the Text property field and they will appear with Rich Text styling rather than as typed. If this property is not selected, the text will display exactly as type. Refer to the Markup Format section for more information concerning writing with Rich Text.

Paragraph properties

The next set of properties, the Paragraph properties, allow you to determine how the text will display within (or outside of) the Rect Transform's bounds.

The Alignment property determines where the text will align based on the Rect Transform bounds. You can choose both Horizontal and Vertical alignment options. The buttons represent the position relative to the Rect Transform bounds, so the left horizontal alignment will have the text pushed up all the way to the edge of the Rect Transform's left bound.

The Align by Geometry property aligns the text as if the glyphs or characters are cropped down just to their opaque area rather than the area they cover based on their character map. This can give a tighter alignment but might also cause things to overlap.

The Horizontal Overflow property determines what happens to text if it is too wide for the Rect Transform area. There are two options: Wrap and Overflow. Wrap will cause the text to continue on the next line and Overflow will cause the text to expand past the rectangular area.

Horizontal Overflow Example in the Chapter6Text Scene

The Vertical Overflow property determines what happens to text if it is too long for the Rect Transform area. There are two options: Truncate and Overflow. Truncate will cut off all text outside of the rect...