Mastering UI Development with Unity电子书

Title Page

Copyright and Credits

Mastering UI Development with Unity

Packt Upsell

Why subscribe?

PacktPub.com

Contributors

About the author

About the reviewer

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Get in touch

Reviews

Designing User Interfaces

UI and GUI

Four game interface types

Layout

Color schemes

Interface metaphors

Resolution and aspect ratio

Changing the aspect ratio and resolution of the game view

Building for a single resolution

Resetting the resolution

Method 1 – PlayerPrefs.DeleteAll()

Method 2 – Deleting PlayerPref files

Building for a single aspect ratio

Setting the orientation

Summary

Canvases, Panels, and Basic Layouts

UI Canvas

Rect Transform component

Canvas component

Screen Space-Overlay

Screen Space-Camera

World Space

Canvas Scalar component

Constant Pixel Size

Scale with Screen Size

Constant Physical Size

World

Graphic Raycaster component

Canvas Renderer component

UI Panel

Rect Transform

Rect Tool

Positioning modes

Rect Transform component

Rect Transform edit modes

Anchor and Pivot Point

Canvas Group component

Introducing UI Text and Image

Examples

Laying out a basic HUD

Placing a background image (2D game)

Setting up a basic pop-up menu

Summary

Automatic Layouts

Types of Automatic Layout Groups

Horizontal Layout Group

Padding

Spacing

Child Alignment

Control Child Size

Child Force Expand

Vertical Layout Group

Grid Layout Group

Cell Size

Start Corner and Start Axis

Constraint

Layout Element

Ignore Layout

The Width and Height properties

Min Width and Height

Preferred Width and Height

Flexible Width and Height

Fitters

Content Size Fitter

Aspect Ratio Fitter

Examples

Laying Out an HUD Selection Menu

Laying Out a Grid Inventory

Summary

The Event System and Programming for UI

Accessing UI elements in code

UnityEngine.UI namespace

UI variable types

The Event System

Event System Manager

First Selected

Send Navigation Events

Drag Threshold

Input Manager

Input functions for buttons and key presses

GetButton

GetAxis

GetKey

GetMouseButton()

Input Modules

Standalone Input Module

Hololens Input Module

Base Input Module/Pointer Input Module

Event Trigger

Event Types

Pointer events

Drag and Drop events

Selection events

Other events

Adding an action to the event

Event inputs

Raycasters

Graphic Raycaster

Other Raycasters

Examples

Showing and hiding pop-up menus with keypress

Using KeyCode with the Inventory Panel

Using Input Manager with the pause panel

Pausing the game

Dragging and dropping inventory items

Summary

Buttons

UI Button

Button component

Transitions

None

Color Tint

Sprite Swap

Animation

Navigation

Examples

Navigating through Buttons and using First Selected

Laying out the Buttons

Setting the explicit navigation and First Selected

Loading scenes with Button presses

Button Animation Transitions

Mute buttons with image swap

Summary

Text, Images, and TextMesh Pro-Text

UI Text

Text component

The Text and Character properties

Paragraph properties

The Color and Material properties

Raycast Target properties

Markup format

Font style

Font color

Font size

Importing new fonts

Font Size

Rendering Mode

Character

Ascent Calculation Mode

Dynamic font settings

Importing font styles

Custom fonts

UI Image

Image component

Image Type

Simple

Sliced

Tiled

Filled

UI effect components

Shadow

Outline

Position as UV1

TextMesh Pro-Text

Text Input Box

Font Settings

Extra Settings

Examples

Animated text

Creating a Background Canvas prefab and a new scene

Laying out the Text Box Windows

Animating the Text Box text

Custom font

Adjusting the character spacing and changing the font size

Horizontal and circular health/progress meters

Horizontal health bar

Circular progress meter

Wrapped text with Gradient

Summary

Masks and Other Inputs

Masks

Mask component

Rect Mask 2D component

UI Toggle

Toggle component

Toggle default event – On Value Changed (Boolean)

Toggle Group component

UI Slider

Slider component

Slider default event – On Value Changed (Single)

UI Scrollbar

The Scrollbar component

Scrollbar default event – On Value Changed (Single)

UI Scroll View

Scroll Rect component

Movement properties

Properties concerning scrolling speed

Properties of the Scrollbars

Scroll Rect default event – On Value Changed (Vector2)

UI Dropdown and TextMeshPro – Dropdown

Dropdown Template

The Dropdown component

Caption properties

Template properties

Option properties

Dropdown default event – On Value Changed (Int32)

UI Input Field

Input Field component

Properties of entered text and onscreen keyboards

Content Types

Line Types

Input Types

Keyboard Types

Character Validation options

Properties of the caret and selection

Input field default events – On Value Changed (String) and On End Edit (String)

TextMeshPro – Input Field

TMP_Input Field component

Input Field settings

Control settings

TextMeshPro - Input Field default events – On Select (String) and On Deselect (String)

Examples

Making a scroll view from a pre-existing menu

Creating a dropdown menu with images

Laying out the dropdown with caption and item images

Using the information from the dropdown selection

Summary

Animations and Particles in the UI

Animation clips

Animation Events

Animator Controller

The Animator of Transition Animations

Animator layers

Setting Animation Parameters in scripts

Animator behaviours

Particles in the UI

Examples

Animating pop up windows to fade in and out

Setting up the animations

Setting the Animator's Parameters with code

Animating a complex loot box with Particle System

Setting up the animations

Creating a Particle System that displays in the UI

Building a State Machine and timing the animations

Summary

World Space UI

When to use World Space

Appropriately scaling text in the Canvas

Other considerations when working in World Space

Examples

2D World Space status indicators

3D hovering health bars

Summary

Mobile-Specific UI

Recommended button sizes

Full screen/screen portion taps

The thumb zone

Multi-touch input

Accelerometer and gyroscope

Device resources

Examples

Adding press-and-hold/long-press functionality

Creating a static four-directional virtual D-pad

Creating a floating eight-directional virtual analog stick

Setting up the eight-directional virtual analog stick

Making the eight-directional virtual analog stick float

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think