“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Introduction to UGUI:

The UGUI system has been integrated into Unity’s editor since Unity 4.6. Unity’s official label for this new UI system is: Flexible, fast and visual! In short, there are three advantages for developers: efficiency, ease of use, scalability, and compatibility with Unity.

The ability to create a UI in a game quickly and easily without using any code would have been unthinkable in the past, but the new UI system does this because Unity pre-defines many common components that exist in the game scene in the form of “game objects.”

UI before 4.6

void OnGUI(){

    // Add an image
    GUI.DrawTexture(new Rext(L LeftX,eftY,miniMapWidth,miniMapHwight), backGround);

    // Make a button, Rect (screen position, size)
    if(GUI.Button(new Rect(30.100.100.50),"Text on the button"))
    {
        / /... Press the button to execute the statement...}}Copy the code

Differences from NGUI:

1. UGUI Canvas has world coordinates and screen coordinates

2, uGUI Image can use material

3, uGUI clipping through Mask, for NGUI clipping through Panel

4. The NGUI is first rendered by Depth of the Widget. The uGUI rendering sequence is based on the Hierarchy order, and the rendering is at the top level

5. UGUI does not need to bind to Colliders, the UI can automatically intercept events

6. UGUI’s Anchor is a relative parent object without advanced options.

7, UGUI does not have Atlas, use Sprite

UGUI events need to implement the interface of the event system, but it is also easy to write

Canvas:

Render Mode – Render Mode

The Render Mode setting in the Canvas, which determines whether it will Render in screen space or world space, has three Settings.

1. Screen space-overlay

This rendering mode renders the UI elements on the screen at the top of the scene. If the screen size or resolution changes, the Canvas will automatically change size to match the screen size.

2. Screen space-camera

This rendering mode is similar to Screen Space-overlay, in which the Canvas is placed in front of the specified camera and the distance can be adjusted. UI elements are rendered through this camera, and the Settings of the camera affect the appearance of the UI. If the camera is set to perspective, UI elements are also rendered in perspective, and the shape of perspective variables can be controlled by the camera’s Field of View. If the screen size or resolution changes, or the camera’s viewing cone changes, the Canvas will also change size to match the screen.

3, World Space

In this rendering mode, the Canvas is just like any other game object in the scene. The Canvas size can be manually set by RectTransform, and UI elements will be rendered in front of or behind other objects in the scene depending on where they are placed in the 3D scene. This is useful when we want the UI to be part of the world scene. This is also known as the “Diegetic Interface”.