Unity 3D new UI features

Here we are again with a new chapter of my Unity 3D adventure. In one hand I’m still missing all those code files and class diagrams, but in the other hand, testing the game with a single click, and edit some objects dragging and dropping them around the scene panel is quite wonderful.

In this post I want to introduce the main reason that made me switch from the stable 4.5 Unity version to the 4.6 beta some time ago: the new UI objects and functions! Something the community was waiting for a long time

The beta version was working fine, but all those new fancy things are now in the latest stable version, so it’s time to get familiar with them.

canvas introduction

canvas introduction

New UI objects!

In the Game Objects menu now there is a new menu called UI full of new objects ready to be part of almost any UI you can imagine.

These are still Game Objects, so they can be combined and associated between them to create complex structures, and also all of them can be edited from the scene and inspector panels like any other Game Object in Unity… or that’s how it looks like at first sight!

 

new UI objects

new UI objects

 

As soon as you create the first UI element, you might find one Object called canvas you didn’t create before. This object is the main topic of this post, and it’s usually the container of all those new UI objects. A canvas is somehow an object to rule them all (or at least all its UI object childs)

canvas and UI quick example

canvas and UI quick example

The canvas object

The canvas object is usually the main container of some of the new UI objects. Sometimes it works like a fixed camera covering the whole viewport, sometimes it’s like an overlay of some camera, and sometimes it’s just like a container with some child objects, it depends on the value of the canvas’s property “Render mode”.

The “render mode” property changes dramatically how the entire UI contained by the canvas will be shown. It allows a huge amount of possibilities and turns an apparently simple object like the canvas into a powerful tool.  Let’s check how each render mode value works:

Screen Space – Overlay

The canvas is shown over any other objects by default, no matter what camera is active or if the camera have the canvas within its range or not. While using this render mode, the canvas cannot be scaled or moved; it will fit the entire viewport, scaling any child if needed.

This option can be useful for pause screens, designing them outside the camera range without messing with additional cameras.

Overlay mode

Overlay mode. The canvas object is outside the camera range

overlay mode

Even with the canvas outside the camera range, the UI is displayed

 

Screen Space – Camera

This mode requires a camera as a parent and a plane distance to set the distance between the camera and the UI overlay. Using this method means the canvas will depend on the camera and it will be rendered using the same camera as reference. Again, the canvas cannot be moved or scaled, but if the camera is transformed in any way, the canvas object will fit to the new conditions.

In this case, if the assigned camera is not active, the UI objects inside the canvas won’t be rendered as well.

camera mode

Canvas size depends on the camera size and the panel distance set in the canvas properties

 

World Space

This last render mode is in my opinion a great improvement that allows a good amount of new effects and possibilities. This time, the canvas object becomes a normal Game Object; all the transform options are now available and can be sorted and rendered as a normal Game Object.

Creating 2D dialogs and information panels is quite simple with using some canvas with this render mode enabled, even in 3D games, and that’s only one simple example.

world space mode

This time the canvas can be moved behind the plane like any other Game Object

 

Here is the complete list of chapters of this Unity3d canvas series where you can find the entire process:

Enough for now! I recommend learning a bit of all the new UI features. It’s something we have been waiting for a long time, and if you are using Unity, better get used to these awesome new features before Unity 5 comes out!

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.