[unity] create a simple UI interface in unity

Time:2022-7-7

The effect is to set a trigger box. When the player triggers, a game end interface is displayed and the game ends.

[unity] create a simple UI interface in unity

1. New canvas

Create a new canvas in hierarchy. Named canvas.

[unity] create a simple UI interface in unity

Double click the canvas you just created. If necessary, its properties can be adjusted. By default, this canvas will cover the entire screen.

[unity] create a simple UI interface in unity

When editing the UI, you should turn off the special effects and open the 2D interface. (as shown in the figure below)

[unity] create a simple UI interface in unity

2. New background

Select the canvas you just created and create a new UI image under canvas. Name it background. This component is used to set the background of the UI.

[unity] create a simple UI interface in unity

Select the background you just created. Adjust the value to make it spread all over the canvas.

You can also change its background color by changing the color property of its image component. (as shown in the figure below)

[unity] create a simple UI interface in unity

3. Add picture on background

Right click the background just created, and then create a new UI image as its sub item, named image.

[unity] create a simple UI interface in unity

Click the new component to add pictures for it. Its position can also be adjusted. (as shown in the figure below)

[unity] create a simple UI interface in unity

The effect is as follows.

[unity] create a simple UI interface in unity

4. Add canvas group component for background

The UI cannot be displayed at the beginning, so it should be set to be transparent.

Select the created background and add the canvas group component to it. Set the alpha attribute to 0 in this component.

In this way, the UI will be transparent at the beginning. You can change its alpha to make it display when you need it.

[unity] create a simple UI interface in unity

5. End trigger and display UI

Create an empty component, add the box collaboration component, and open the is trigger attribute.

[unity] create a simple UI interface in unity

Add a script for this empty component, named gameending. The code is as follows:

using UnityEngine;

public class GameEnding : MonoBehaviour
{
    bool PlayerAtExit = false;
    public GameObject player;
    //UI
    public CanvasGroup backgroundImageCanvasGroup;
    //Time to display UI
    public float disableImageDuration = 4.1f;
    //Transparency
    float timer;
    //Time to change transparency
    public float fadeDuration = 1.0f;
    //Trigger event, trigger of incoming control
    private void OnTriggerEnter(Collider other)
    {
        //If the player enters the trigger
        if (other.gameObject == player)
        {
            PlayerAtExit = true;
        }
    }
    // Update is called once per frame
    void Update()
    {
        if (PlayerAtExit)
        {
            EndLevel();
        }
    }
    //End the level
    void EndLevel()
    {
        timer += Time.deltaTime;
        backgroundImageCanvasGroup.alpha = timer / fadeDuration;
        if (timer > fadeDuration + disableImageDuration)
        {
            //Exit application (effective after packaging)
            Application.Quit();
            //Exit in editor
            UnityEditor.EditorApplication.isPlaying = false;
        }
    }
}

Pass the role and background into the script.

[unity] create a simple UI interface in unity

Running the game, you can see that the UI is triggered successfully after the character walks into the trigger box.