"Unity3d" "Ugui" UI overview

Ugui Discussion group: 261319969

Unity3d version: 5.1.1f1 (64-bit)

unity3d UI Code: Https://bitbucket.org/Unity-Technologies/ui/downloads

UI Overview

This section describes the basic content of the UI system. Start with the area--canvas that describes the placement of all UI elements.

There will be a discussion of the Rect tool and rect transform for layout UI elements.

Some visual UI elements, such as text and image, are then introduced, and there are some interactive spaces such as buttons and sliders.

--------------------------------------------------------------------------------------------------------------- --------------------------

Canvas

Canvas, all UI elements should be inside it. It is a game object with a canvas component, and all UI elements need to be nodes of this game object.

When a canvas is not present in the scene, creating a new UI element, such as creating an image from the menu gameobject>ui>image, automatically creates a canvas, which then becomes the child node of the canvas.

In Scene view, the canvas area is a rectangular area. When you change the position of the UI element, you don't always have to switch to the Game view window.

drawing order of UI elements

The order in which UI elements are drawn in the canvas is consistent with the order in which they are in hierarchy. The first child node is drawn first, then the second one, and so on. If two UI elements have an overlay, then the UI elements behind it are drawn to the previous UI element.

Just drag and drop UI elements in hierarchy to reorder them, enabling UI elements to be drawn onto other UI elements. You can also use scripts to control the functions on the transform component: Setasfirstsibling, setaslastsibling, and Setsiblingindex.

Rendering Mode

You can render it to screen space (2D) or World Space (3D) by setting the canvas's render mode

screen space-masking

This pattern renders UI elements to the top of the scene. If the size or resolution of the screen changes, the canvas will automatically change its size to accommodate these changes.

screen space-camera

This mode is similar to screen space-masking, but in this rendering mode you need to put the canvas in front of a certain distance from a specified camera. UI elements are rendered through this camera, and the settings of all cameras affect the display of the UI. If the camera is set to perspective (Perspective), the UI elements are rendered using perspective, and the size of the perspective warp (Perspective distortion) can be controlled by the camera's field of View (FOV). If the screen size, resolution, or the size of the camera's cone changes, the canvas automatically changes its size to accommodate these changes.

World Space

In this rendering mode, canvas is like any other object in the scene. By using Rect transform to manually set the size of the canvas, the UI element determines the rendering to the front or back of the other object based on the position of the 3D. This rendering mode makes the UI look like a part of the world. Also commonly referred to as "Diegetic interface".

Basic Layout

This section discusses the location relationships of UI elements relative to canvas and other UI elements. You can first create an image from the menu gameobject>ui>image and then read the following article to test it.

The Rect Tool

Each UI element is represented in a rectangular form when it is laid out. This rectangle can be manipulated in scene view by the Rect tool on the toolbar. The Rect tool can be used in Unity's 2D features and UI, and, of course, on 3D objects.

The Rect tool can be used to move, resize, or rotate UI elements. When you select a UI element, click any point inside the rectangle and drag to move it. Drag the edges or corners of the rectangle to change the dimensions. Move the mouse away from a corner of the rectangle, and when the mouse becomes a rotating symbol, click and drag in any direction to rotate the UI elements.

Like other tools, Rect tools uses the current pivot mode and space to change inside the toolbar. When using the tool to manipulate the UI, it is best to set these values to pivot and local.