Modern UI Development in Unity 4.6/5.0

The UI system requires that we place all of our elements in a root element - called the Canvas. The Canvas lets us describe how and where we want the UI to be rendered. This video talks about the three types of Canvases that we can create!

Arguably the most important component in the UI is the rect transform. This component tells the UI how to size and position each UI element. This video goes over the details of how this process works exactly - providing a great foundation for our UI endeavors!

Now that we can position and size our elements; but how do we display things on the screen? This video goes into depth of the visual nature of the UI system. We talk about how to render images and text - and also special effects and rendering order.

Displaying images and text is important, sure - but what about interaction? In this video, we talk about the Selectable - the base type for all intractable components. We also show the built-in controls: such as sliders and input fields. We also talk about navigation, transitions, and events.

Masking elements from views using an image is a very common way to achieve certain effects. In addition, we can combine it with the ability to scroll elements around in a fluid manner.

The Rect Transform gives us a bunch of flexibility for describing our interfaces. However, sometimes we want the process to be automated - such as a grid, horizontal, or vertical layout. This video covers the basics of the auto layout system, and shows the underlying concepts. We also introduce the auto layout groups that Unity provides by default.

This video brings everything we learned together in a fully working menu system! This is a real world example of how we can build up our games using the New UI!

This video shows the end product of what we will be building and explains the motivation of using this as an example.

We start off by importing all of our visible assets that we will be using. We also show how we can import those assets into a component in the game that can be used by our code.

The first major visible component we create is the board tile. This component is responsible for the visible aspects and interaction logic of the tiles of the game board.

Now we use a custom automatic layout group to accomplish the construction of nontrivial layouts.

We kick off the creation of the game board by constructing the stub for the game board logic. We also build a test fixture so that we can test our game board in isolation of the rest of the game.

Now we're ready to put together the logic of the game board!

With the game board out of the way, we start building up our main game UI - such as the options panel and game HUD.

In this video, we create the options panel. We hook it up to our game model, as well as put together the required animations to make it appear and disappear from view.

Now we put together the logic and animations for our Game HUD. The Game HUD is responsible for showing time left and the points that the player has accumilated.

In this video, we construct the prefabs and scripts required for putting our gutter together.

This video constructs the game controller - the component that manages the game state itself and handles the time limit, as well as awarding points to the user.

Now we hook into the UI's drag and drop system! By the end of the video, the game has all of it's essential components working together!

The last major component to our game is the concept of a win or lose. We implement the concept of winning and losing in the game controller, and throw in some cool looking win and lose dialog boxes as well!

We made it! Our game is fully functional! Now, all that's left is to throw in more polish and make sure it's all ready to go for deployment on all devices! We also talk about some neat effects we can get from blend trees, as well as how to make sure our screen resolution settings makes the UI properly visible in many different screen types.