Mastering UI Development with Unity

Mastering UI Development with Unity

by Ashley Godbold
Released April 2018
Publisher(s): Packt Publishing
ISBN: 9781787125520

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

About This Book
  • 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
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.

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
In Detail

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.

Style and approach

The book walks you through the process of creating many different user interface components, by describing each UI component and property thoroughly and then providing step-by-step examples of its implementation. You will not only learn how to lay out visual elements, but you will also learn how to program for these features and hook them in to your game. The examples provided in the book can be reused for many other products.

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Mastering UI Development with Unity
  3. Packt Upsell
    1. Why subscribe?
    2. PacktPub.com
  4. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Get in touch
      1. Reviews
  6. Designing User Interfaces
    1. UI and GUI
    2. Four game interface types
    3. Layout
    4. Color schemes
    5. Interface metaphors
    6. Resolution and aspect ratio
      1. Changing the aspect ratio and resolution of the game view
      2. Building for a single resolution
      3. Resetting the resolution
        1. Method 1 – PlayerPrefs.DeleteAll()
        2. Method 2 – Deleting PlayerPref files
      4. Building for a single aspect ratio
      5. Setting the orientation
    7. Summary
  7. Canvases, Panels, and Basic Layouts
    1. UI Canvas
      1. Rect Transform component
      2. Canvas component
        1. Screen Space-Overlay
        2. Screen Space-Camera
        3. World Space
      3. Canvas Scalar component
        1. Constant Pixel Size
        2. Scale with Screen Size
        3. Constant Physical Size
        4. World
      4. Graphic Raycaster component
      5. Canvas Renderer component
    2. UI Panel
    3. Rect Transform
      1. Rect Tool
        1. Positioning modes
      2. Rect Transform component
        1. Rect Transform edit modes
    4. Anchor and Pivot Point
    5. Canvas Group component
    6. Introducing UI Text and Image
    7. Examples
      1. Laying out a basic HUD
      2. Placing a background image (2D game)
      3. Setting up a basic pop-up menu
    8. Summary
  8. Automatic Layouts
    1. Types of Automatic Layout Groups
      1. Horizontal Layout Group
        1. Padding
        2. Spacing
        3. Child Alignment
        4. Control Child Size
        5. Child Force Expand
      2. Vertical Layout Group
      3. Grid Layout Group
        1. Cell Size
        2. Start Corner and Start Axis
        3. Constraint
    2. Layout Element
      1. Ignore Layout
      2. The Width and Height properties
        1. Min Width and Height
        2. Preferred Width and Height
        3. Flexible Width and Height
    3. Fitters
      1. Content Size Fitter
      2. Aspect Ratio Fitter
    4. Examples
      1. Laying Out an HUD Selection Menu
      2. Laying Out a Grid Inventory
    5. Summary
  9. The Event System and Programming for UI
    1. Accessing UI elements in code
      1. UnityEngine.UI namespace
      2. UI variable types
    2. The Event System
      1. Event System Manager
        1. First Selected
        2. Send Navigation Events
        3. Drag Threshold
    3. Input Manager
    4. Input functions for buttons and key presses
      1. GetButton
      2. GetAxis
      3. GetKey
      4. GetMouseButton()
    5. Input Modules
      1. Standalone Input Module
      2. Hololens Input Module
      3. Base Input Module/Pointer Input Module
    6. Event Trigger
      1. Event Types
        1. Pointer events
        2. Drag and Drop events
        3. Selection events
        4. Other events
      2. Adding an action to the event
    7. Event inputs
    8. Raycasters
      1. Graphic Raycaster
      2. Other Raycasters
    9. Examples
      1. Showing and hiding pop-up menus with keypress
        1. Using KeyCode with the Inventory Panel
        2. Using Input Manager with the pause panel
      2. Pausing the game
      3. Dragging and dropping inventory items
    10. Summary
  10. Buttons
    1. UI Button
      1. Button component
    2. Transitions
      1. None
      2. Color Tint
      3. Sprite Swap
      4. Animation
      5. Navigation
    3. Examples
      1. Navigating through Buttons and using First Selected
        1. Laying out the Buttons
        2. Setting the explicit navigation and First Selected
      2. Loading scenes with Button presses
      3. Button Animation Transitions
      4. Mute buttons with image swap
    4. Summary
  11. Text, Images, and TextMesh Pro-Text
    1. UI Text
      1. Text component
        1. The Text and Character properties
        2. Paragraph properties
        3. The Color and Material properties
        4. Raycast Target properties
      2. Markup format
        1. Font style
        2. Font color
        3. Font size
      3. Importing new fonts
        1. Font Size
        2. Rendering Mode
        3. Character
        4. Ascent Calculation Mode
      4. Dynamic font settings
      5. Importing font styles
      6. Custom fonts
    2. UI Image
      1. Image component
        1. Image Type
          1. Simple
          2. Sliced
          3. Tiled
          4. Filled
    3. UI effect components
      1. Shadow
      2. Outline
      3. Position as UV1
    4. TextMesh Pro-Text
      1. Text Input Box
      2. Font Settings
      3. Extra Settings
    5. Examples
      1. Animated text
        1. Creating a Background Canvas prefab and a new scene
        2. Laying out the Text Box Windows
        3. Animating the Text Box text
      2. Custom font
        1. Adjusting the character spacing and changing the font size
      3. Horizontal and circular health/progress meters
        1. Horizontal health bar
        2. Circular progress meter
      4. Wrapped text with Gradient
    6. Summary
  12. Masks and Other Inputs
    1. Masks
      1. Mask component
      2. Rect Mask 2D component
    2. UI Toggle
      1. Toggle component
        1. Toggle default event – On Value Changed (Boolean)
      2. Toggle Group component
    3. UI Slider
      1. Slider component
        1. Slider default event – On Value Changed (Single)
    4. UI Scrollbar
      1. The Scrollbar component
        1. Scrollbar default event – On Value Changed (Single)
    5. UI Scroll View
      1. Scroll Rect component
        1. Movement properties
        2. Properties concerning scrolling speed
        3. Properties of the Scrollbars
        4. Scroll Rect default event – On Value Changed (Vector2)
    6. UI Dropdown and TextMeshPro – Dropdown
      1. Dropdown Template
      2. The Dropdown component
        1. Caption properties
        2. Template properties
        3. Option properties
        4. Dropdown default event – On Value Changed (Int32)
    7. UI Input Field
      1. Input Field component
        1. Properties of entered text and onscreen keyboards
          1. Content Types
          2. Line Types
          3. Input Types
          4. Keyboard Types
          5. Character Validation options
        2. Properties of the caret and selection
        3. Input field default events – On Value Changed (String) and On End Edit (String)
    8. TextMeshPro – Input Field
      1. TMP_Input Field component
        1. Input Field settings
        2. Control settings
        3. TextMeshPro - Input Field default events – On Select (String) and On Deselect (String)
    9. Examples
      1. Making a scroll view from a pre-existing menu
      2. Creating a dropdown menu with images
        1. Laying out the dropdown with caption and item images
        2. Using the information from the dropdown selection
    10. Summary
  13. Animations and Particles in the UI
    1. Animation clips
      1. Animation Events
    2. Animator Controller
      1.  The Animator of Transition Animations
      2. Animator layers
      3. Setting Animation Parameters in scripts
      4. Animator behaviours
    3. Particles in the UI
    4. Examples
      1. Animating pop up windows to fade in and out
        1. Setting up the animations
        2. Setting the Animator's Parameters with code
      2. Animating a complex loot box with Particle System
        1. Setting up the animations
        2. Creating a Particle System that displays in the UI
        3. Building a State Machine and timing the animations
    5. Summary
  14. World Space UI
    1. When to use World Space
    2. Appropriately scaling text in the Canvas
    3. Other considerations when working in World Space
    4. Examples
      1. 2D World Space status indicators
      2. 3D hovering health bars
    5. Summary
  15. Mobile-Specific UI
    1. Recommended button sizes
    2. Full screen/screen portion taps
    3. The thumb zone
    4. Multi-touch input
    5. Accelerometer and gyroscope
    6. Device resources
    7. Examples
      1. Adding press-and-hold/long-press functionality
      2. Creating a static four-directional virtual D-pad
      3. Creating a floating eight-directional virtual analog stick
        1. Setting up the eight-directional virtual analog stick
        2. Making the eight-directional virtual analog stick float
    8. Summary
  16. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Mastering UI Development with Unity
  • Author(s): Ashley Godbold
  • Release date: April 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781787125520