LEARNING PATH: Powerful User Interfaces with Unity & Canvas

Name: LEARNING PATH: Powerful User Interfaces with Unity & Canvas
Rating: 4.0 (21 reviews)

Build the finest gaming interfaces with Unity and Canvas

Created byPackt Publishing

Last updated 7/2018

English

English [Auto],

What you'll learn

Learn to create screen space and world space UIs with Canvas
Explore Unity’s new layout and anchoring system
Learn various UI graphics components and UI control components
Know how to animate the canvas
Craft reusable UI elements such as modal dialog and character dialog windows
Prepare UI for different resolutions and to target multiple platforms
Learn to create responsive designs for multiple screen types
Write editor scripts to automate master styles and extend the UI

Course content

2 sections • 25 lectures • 3h 48m total length

The Course Overview1:43
This video will give an overview of the entire course
Creating a Countdown Timer11:54
Learning something new can be daunting. Our first foray into Unity’s UI will be using the most basic components and getting familiar with the canvas system.
Making a Basic Menu12:38
There are many ways to use the UI system. This video will look at creating a basic menu to make you used to using some of the interactable elements in Unity’s UI.
Building a Heads-Up-Display17:45
What kind of practical uses are there for UI components? In this video, we’ll be creating a more complex component from scratch, using simpler components.
Making a Main Menu15:30
One of the most common uses of UI in games are menus. In this video, we get started by making a main menu using the components available to us in Unity U.
Creating a New Game Screen11:57
Sometimes, we want to get some input from a player before they start the game, and let them customize their character, so they feel more involved in the game. In this video, we’ll be designing our first extra UI screen for our menu, a new game screen that lets the player name their character before the game starts.
Building a Load Menu19:47
Players will have multiple saves in our game, and we need some way to organize the data visually. For this video, we’ll be making a grid of save games that have a screenshot and some rich text to add variety and separate text by design.
Making an Options Menu15:37
Another common usage of UI is for the varying inputs players can use to change game options and select their own preferences. In this video, we will be exploring vertical layouts and how to customize some of the elements we’ve seen before, as well as the newer ones.
Navigating between Menus10:36
The UI can also be useful or moving between scenes. Instantly jumping to a new scene can be jarring to players and break their immersion in the game. To help fix that, we’ll start with a simple screen transition, fading out.
Raycasts and Navigation7:40
The UI can also be useful or moving between scenes. Instantly jumping to a new scene can be jarring to players and break their immersion in the game. To help fix that, we’ll start with a simple screen transition, fading out.
Animating the Main Menu7:50
Another crucial aspect of UI design is animation. Interactions and user experience come to life when paired with animated elements and feedback for the player. In this video, we will learn how to achieve this.
Making a Screen Transition4:43
The UI can also be useful or moving between scenes. Instantly jumping to a new scene can be jarring to the players and break their immersion in the game. To help fix that, we’ll start with a simple screen transition: fading out.
Developing your First Canvas

The Course Overview2:29
This video provides an overview of the entire course.
Using World Space Canvases8:52
This video teaches how to use canvases independently of the camera. World space canvases are the answer. Map them to GameObjects or have them free-float in your Unity scenes.
Creating a Damage Indicator11:01
The aim of this video is to explain that spawning a world space canvas can be a great way to display information quickly, and have it disappear quickly too.
Modal Dialogs7:42
In this video, we start to look at a few ways that we can re-use assets and the UI elements we’re building with them, to both cut down on development time and make smart use of our textures.
Creating a Chat Dialog5:57
We have looked at making a modal dialog, what if you want different information from different NPCs? In this video, we will be creating a simple chat dialog based on our modal dialog, and populating it with character data like a name and portrait.
Displaying an Inventory7:27
In this video, we will see how we can display a basic inventory.
Dragging and Dropping Items4:34
In this video, we will see how to interact with the reusable elements.
Shopping Around11:17
This video explains us how to make a shop window and buttons.
Responsive Design8:01
With the enormous amount of different sized screens and devices out there these days it’s important to be able to design our UI’s to fit them. This is where Responsive Design comes in. In this video, we will look at a couple of ways that we can make Unity’s UI responsive.
Targeting Different Devices4:35
A lot of devices use different resolutions and aspect ratios and it can be hard to keep track of which ones to even test our designs on. In this video, we will look at how to use the build target to see our designs at the most common layouts and resolutions for both iOS and Android.
Using the Video Player4:50
One aspect of our UI is that we are yet to look at is using video player. In Unity version 5.6, the VideoPlayer component was introduced and in this video, we look at how to use this component to play videos in full screen and responsively adjust it.
Extending Unity's UI7:33
We have created our own UI elements, and learned how to customize and reuse them, but it could be easier to use them in our projects. In this video, we will begin to learn about editor scripting with regards to UI. We will make our first editor script to create a UI element from Unity’s create menu, and we will ensure it’s always positioned inside of a canvas in our scene.
Automating Master's Style6:30
It’s important to have consistent design when you are making a user interface. In this video, we will make a master style script and apply styles to paragraph and header items as we create them. We will also create a menu item to apply or reapply those styles in the editor. This way if we need to make variations we can, but we will always be able to return to the coded style guide.
Enhancement with Unity UI Advanced

Requirements

Working knowledge on Unity is required.

Description

Unity is one of the most exciting and popular game engine in the gaming industry. Unity will ease your way of creating highly-optimized and beautiful 2D and 3D games by speeding up your development process. Canvas is a virtual learning environment that has been adopted by organizations of all kinds. Its flexibility and ease of use are unparalleled, and it has proved especially useful in situations where collaboration between individuals and in groups, with feedback on many different levels, is a must. So, if you want to become an expert in building interactive user interfaces with Unity and Canvas, then you should surely go for this Learning Path.

Packt’s Video Learning Path is a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.

The highlights of this Learning Path are:

● Learn to build the gaming interface by adding basic elements to Canvas

● Animate Canvas elements and develop reusable UIs to cut down on development time

● Create responsive UI for different resolutions and platforms by using the new video component offered by Unity 5.6

Let's take a quick look at your learning journey. This Learning Path starts off by diving deep into the entire Unity UI system. You will then walk through the core components and elements which will enable you to build exciting games using Unity. You will also understand how unity’s components and elements interact with each other.

Next, you will explore animating a Canvas. You will learn how to create reusable UI elements. You will also learn to design a game in Unity that will run on multiple devices. Finally, you will learn UI editing and scripting.

By the end of this Learning Path, you will have a strong understanding of how the UI system works as a whole.

Meet Your Expert: We have the best work of the following esteemed author to ensure that your learning journey is smooth:

Keith O’Malley is a Unity and Web developer/designer who loves coffee, music and games. He likes to be able to do everything, with a background in Web, VR and Graphic Design. He has been studying and working in multimedia for 6 years, including image manipulation, vector graphics photoshop/illustrator and sketch, making games and VR experiences in Unity, using IOT hardware such as Arduino's and creating a variety of web programming languages and frameworks. Keith graduated with a first class honours in multimedia programming from IADT in June 2016, and has two student of the year awards, one from the same degree and another from a Creative Multimedia Diploma completed in 2013.

Who this course is for:

This Learning Path is for C# developers having good knowledge on Unity and want to take their UI development skills to the next level by building amazing user interfaces.

LEARNING PATH: Powerful User Interfaces with Unity & Canvas

What you'll learn

Explore related topics

Course content

Developing your First Canvas12 lectures • 2hr 18min

Enhancement with Unity UI Advanced13 lectures • 1hr 31min

Requirements

Description

Who this course is for: