Book Image

Mastering UI Development with Unity

By : Ashley Godbold
Book Image

Mastering UI Development with Unity

By: Ashley Godbold

Overview of this book

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.
Table of Contents (12 chapters)

Appropriately scaling text in the Canvas

Whenever a Canvas is created, it is initialized with Screen Space - Overlay as its Render Mode. Therefore, when you change the Render Mode to World Space, the Canvas will be huge in your scene.

When you scale down the Canvas to the appropriate size in the scene, the text will likely be super blurry or not visible at all. Let's say we created the following Canvas in Screen Space - Overlay but decided to put it in World Space.

Converting it to World Space doesn't initially cause any problems, but once we scale it down to something like a Width of 4 and Height of 3 (since it was initially created with a 4:3 aspect ratio screen), the text will disappear!

If I set the Text to allow Horizontal and Vertical Overflow, you'll see that it is super huge when compared to the Canvas! In the following screenshot, the tiny rectangle in...