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.

Related Content you might be interested in

Current Title:

Small book image
Mastering UI Development with Unity
Ashley Godbold
Apr, 2018 | 468 pages
Small book image
Unity 2020 Mobile Game Development
John P Doran
Aug, 2020 | 464 pages
Small book image
Unity 2017 Mobile Game Development
John P Doran
Nov, 2017 | 360 pages
Small book image
Unity 2022 Mobile Game Development
John P Doran
Jun, 2023 | 480 pages
Table of Contents (12 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Designing User Interfaces
Designing User Interfaces
UI and GUI
Four game interface types
Layout
Color schemes
Interface metaphors
Resolution and aspect ratio
Summary
2
Canvases, Panels, and Basic Layouts
Canvases, Panels, and Basic Layouts
UI Canvas
UI Panel
Rect Transform
Anchor and Pivot Point
Canvas Group component
Introducing UI Text and Image
Examples
Summary
3
Automatic Layouts
Automatic Layouts
Types of Automatic Layout Groups
Layout Element
Fitters
Examples
Summary
4
The Event System and Programming for UI
The Event System and Programming for UI
Accessing UI elements in code
The Event System
Input Manager
Input functions for buttons and key presses
Input Modules
Event Trigger
Event inputs
Raycasters
Examples
Summary
5
Buttons
Buttons
UI Button
Transitions
Examples
Summary
6
Text, Images, and TextMesh Pro-Text
Text, Images, and TextMesh Pro-Text
UI Text
UI Image
UI effect components
TextMesh Pro-Text
Examples
Summary
7
Masks and Other Inputs
Masks and Other Inputs
Masks
UI Toggle
UI Slider
UI Scrollbar
UI Scroll View
UI Dropdown and TextMeshPro – Dropdown
UI Input Field
TextMeshPro – Input Field
Examples
Summary
8
Animations and Particles in the UI
Animations and Particles in the UI
Animation clips
Animator Controller
Particles in the UI
Examples
Summary
9
World Space UI
World Space UI
When to use World Space
Appropriately scaling text in the Canvas
Other considerations when working in World Space
Examples
Summary
10
Mobile-Specific UI
Mobile-Specific UI
Recommended button sizes
Full screen/screen portion taps
The thumb zone
Multi-touch input
Accelerometer and gyroscope
Device resources
Examples
Summary
11
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Canvas Group component

You can add a Canvas Group component to any UI object. It allows you to adjust specific properties of the UI object it is attached to and all of its children at once, rather than having to adjust these properties individually. You can add a Canvas Group component to any UI object by selecting Add Component | Layout | Canvas Group (you can also just search for Canvas Group) from the UI object's Inspector.

You can adjust the following properties using a Canvas Group component:

  • Alpha: This is the transparency of the UI objects within the Canvas Group. The number is between 0 and 1 and represents a percentage of opaqueness; 0 is completely transparent, while 1 is completely opaque.
  • Interactable: This setting states whether or not the objects within the group can accept input.
  • Blocks Raycast: This setting determines if the objects within the group will...
Previous Section
End of Section 6
Next Section