A brief overview of the new Unity UI with examples of interface organization

Perhaps, for many, the news about the release of the new Unity UI system (hereinafter referred to simply as the UI) did not seem significant. At least - because of its dampness, as a maximum - because of the existence of NGUI. At first, I was no exception, but the discovery of the source code for the UI system ( 1 ) under the liberal MIT / X11 license, as well as the enthusiasm of Unity Technologies developers made me change my mind.

In my opinion, the new UI will bring us quite a few advantages:

  • Quite a decent tool out of the box;
  • The ability to better understand the work of UI thanks to the availability of source codes;
  • The generally accepted mechanism for making changes to the source code of the UI is fork / pull request;
  • Healthy competition between different UI systems will ultimately bear fruit in the form of better and more convenient tools for Unity, and possibly dumping prices;
  • The close interaction of the UI development team and the Unity kernel is already bearing fruit in the form of performance optimizations, and in the future I hope they will keep up.

Guided by these thoughts, it was decided to develop the game interface using the new UI. As time has shown, the decision was justified, the game saw the light and works safely on Android devices. By the way, the final decision was after the announcement of the Unity 4.6.1 ( 2 ) patch , which included a ton of UI fixes and impruits.

Let's move on to the specifics. I'll start with a general idea, formed after lighting up scanty documentation, watching video tutorials and digging the source code.

UI concept

The approach to organizing the interface has been redesigned in principle. That is, if you previously worked with the GUI, in the new UI you will almost not find anything similar. And vice versa - if you worked with NGUI, you will find a lot in common. In general, it can be called typical for environments with visual development tools.

Understanding the new concept are three components: Canvas, Rect Transform and Event Trigger.

Canvas - is a container for all elements of the UI and determines the rendering mode. There can be more than one such container on stage ( 3 ).

Rect Transform - this component allows you to set the position and size of the game object using convenient visual controls. He introduces the concepts of width and height, and not just scale ( 4 ).

Unity Event - a modified event system, specifically the component Event -> Event Trigger which includes components for visual control of the event call ( 5 ).

As I became familiar with the UI, I created possible use cases for myself. Let’s go at them and take this whole kitchen apart. At the end of the article you can find a demo project, which I will refer to in the text. Unfortunately, these examples are far from ready-made recipes, since they are not well developed, plus they are sharpened for 2D games, although in some places they are quite suitable for 3D.

Example # 1

1. Tiled background;
2. The fixed position of the controls, regardless of the resolution and correlation of the sides of the screen;
3. Controls should be proportional to screen size.

1. Add a Canvas to the scene and select the Screen space - Overlay render mode, this mode will automatically adjust its size to the size of the camera;
2. Add a tile background, for this we just need to add a new UI component to our Canvas - Image, select the desired sprite and change the Image Type field to Tiled;
3. In the Game window, select a resolution that is convenient for us, for example, 480x800 and add the necessary controls to our Canvas container, set the necessary positions for them;
4. Next comes the new UI magic called anchors! The name speaks for itself, they allow you to consolidate a number of characteristics of the game object using the Rect Transform component. You can change them in the scene editing window, including the new mode, or in the inspector. Note that the icon in the inspector of the Rect Transform component is clickable and opens a window for selecting preset positions and behaviors, and if you hold down the Shift button, the position of the pivot point is also;
5. Completes the picture one of the components of Canvas, which is added to it by default Layout -> Canvas Scaler, namely one of its modes - Scale With Screen Size. This mode allows you to set the Reference Resolution, in our case it will be 480x800.

Example # 2

1. Orientation strictly portrait;
2. A universal background for all aspect ratios, which is always displayed on the whole screen, and if necessary it is cropped only from below;
3. The fixed position of the controls, regardless of the resolution and correlation of the sides of the screen;
4. Controls should be proportional to screen size.

1. Add a UI -> Image object to our Canvas container, select the desired sprite and image type Simple;
2. All magic is reduced to the location of the anchors and the fulcrum in such a way that they lie in the center of the upper edge of the Canvas;
3. In the Canvas Scaler component you need to set the Match value to 0.

Example # 3

1. Orientation strictly portrait;
2. A tile background that does not scale;
3. Fixed-sized playing field, for example 400x400;
4. The fixed position of the controls, regardless of the resolution and correlation of the sides of the screen;
5. Controls should be proportional to the screen size.

1. Of course, you can implement the background as a Sky Box or a game object such as Quad with an obscured texture and dimensions obviously larger than the screen. But we will go the UI-th way and create a Canvas, similar to example # 1, just set the type of rendering Screen Space - Camera and set our main camera in the Render Camera field;
2. Now create another Canvas with the World Space render type, set the camera and set the Order in Layer value to 1 so that this layer is drawn on top of the previous Canvas whose value is 0;
3. I advise you when setting World Space to _set_ set the Canvas scale value so that you do not have problems with the font size;
4. We set up controls in the way we already know.

Example # 4

1. Create a scroller;
2. Content should not be visible outside the scroller;
3. It should stick together with the screen and stick to the bottom edge.

1. We need a game object to which we add the UI -> Scroll Rect component, the most important field of which is Content, by specifying which we specify a container containing game objects (for example, eleven images of game levels 100x100 in size that obviously do not fit into the screen size );
2. The UI -> Mask component will also be useful to us (note that it is also necessary to insert an empty Image component), which will clip the content beyond the boundaries of the game object to which it is added;
3. You can also create a UI -> Scrollbar object and bind it to our Scroll Rect

Example # 5

A few minor amenities:
1. How to expand the list of processed events, for example, handle StartDrag, EndDrag, etc. Using the Event Trigger component
2. Application of the UI -> Toggle element for the implementation of awards in the form of Stars with convenient scripting of the form isOn = true;
3. The simplest option is Popup windows using the Canvas Group component and the good old animator without a single line of code.

Of course, these examples cover only a small part of the possible tasks and implementations, but I hope they help you choose a convenient direction for finding a solution, or at least a sandbox in which you can try different options.

Project File with Examples



1. bitbucket.org/Unity-Technologies/ui/overview
2. unity3d.com/unity/whats-new/unity-4.6.1
3. docs.unity3d.com/Manual/class-Canvas.html
4. docs.unity3d.com/Manual/class-RectTransform.html
5. docs.unity3d.com/Manual/SupportedEvents.html

Also popular now: