Using Unity to make a fruit elimination game tutorial (9): Use UGUI to display the game UI

Article Directory

I. Introduction

Hi everyone, I'm Xinfa. When I was on the subway when I was off work, I saw other people playing the puzzle game several times. Since everyone likes to play so much, then I will write a Unitytutorial on how to make the game puzzle game .

I will divide it into several articles according to the content points. I hope it will be Unityhelpful to students who want to learn . It is not easy to create. Those who like are welcome to pay attention, like, and collect. The article catalog is as follows:
First: Generate ice cube array
Second
Part : Randomly generate fruits Part 3: Fruit drag and exchange logic
Part 4: Use the DOTween plug-in to realize the sliding effect of fruits Part
5: Fruit elimination detection, achieve elimination effect Part
VI: Fruit drop and new fruit generation
Chapter Seven: Fruit Elimination Special Effects
Chapter Eight: Game Score Bonus Effect
Chapter Nine: Use UGUI to Display Game UI

The final Demoproject has been uploaded GitHub, and interested students can download and study by themselves.
GitHubAddress: https://github.com/linxinfa/UnityXiaoXiaoLeDemo
Note: The Unityversion I use is 2020.1.14f1c1.
Insert picture description here

This article talks about the use of UGUIdisplay games UI, the effect of this article:
Insert picture description here

Two, login interface

1. Import UI materials

UIImport the material into the Unityproject.
Please add picture description
as follows:
Insert picture description here

2. Create a Login scene

Create a Loginscene.
Insert picture description here

3. Make a login interface

Use to create one Panel, use one to Imagedisplay the background image, and use one Buttonas the login button.
Insert picture description here

4. LoginPanel script

Create a LoginPanelscript.
code show as below:

// LoginPanel.cs

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class LoginPanel : MonoBehaviour
{
    
    
    public Button loginBtn;

    private void Awake()
    {
    
    
        loginBtn.onClick.AddListener(() =>
        {
    
    
            // 登录按钮被点击，进入Game场景
            SceneManager.LoadScene(1);
        });
    }
}

5. Hang the LoginPanel script

LoginPanelHang the script Paneland assign the button object to it LoginBtn.
Insert picture description here

6. Add scenes to Build Settings

Click the menu File - Build Settingsto open the Build Settingwindow.
Insert picture description here
Add Loginand Gamescenes to the Scenes In Buildlist.

Third, the game interface

1. Import UI materials

UIImport the material into the Unityproject.
Please add picture description Insert picture description here

2. Make the game interface

Use one TextMeshPro - Text (UI)component to display the total score and one Buttonas a button to return to the main interface.
Insert picture description here
as follows:

3、GamePanel脚本

Create a GamePanelscript.
Insert picture description here
code show as below:

// GamePanel.cs

using UnityEngine;
using UnityEngine.UI;
using TMPro;
using UnityEngine.SceneManagement;

public class GamePanel : MonoBehaviour
{
    
    
    /// <summary>
    /// 总得分Text
    /// </summary>
    public TextMeshProUGUI totalScoreText;
    /// <summary>
    /// home按钮
    /// </summary>
    public Button homeBtn;

    /// <summary>
    /// 总得分
    /// </summary>
    private int m_totalScore;

    private void Awake()
    {
    
    
        homeBtn.onClick.AddListener(() => 
        {
    
    
            // Home按钮被点击，进入Login场景
            SceneManager.LoadScene(0);
        });

        // 注册加分事件
        EventDispatcher.instance.Regist(EventDef.EVENT_ADD_SCORE, OnAddScore);
    }

    private void OnDestroy()
    {
    
    
        // 注销加分事件
        EventDispatcher.instance.UnRegist(EventDef.EVENT_ADD_SCORE, OnAddScore);
    }

    /// <summary>
    /// 加分事件
    /// </summary>
    private void OnAddScore(params object[] args)
    {
    
    
        // 更新总分显示
        m_totalScore += (int)args[0];
        totalScoreText.text = m_totalScore.ToString();
    }
}

Among them, the event is EVENT_ADD_SCOREdefined as follows:

// EventDef.cs

public class EventDef
{
    
    
	//...
	
    /// <summary>
    /// 加分
    /// </summary>
    public const string EVENT_ADD_SCORE = "EVENT_ADD_SCORE";
}

The place where the event is thrown is FruitItemin.

// FruitItem.cs

/// <summary>
/// 销毁水果图片
/// </summary>
public void DestroyFruitBg()
{
    
    
    Destroy(fruitSpriteObj);
    fruitSpriteObj = null;
    // 水果消失事件
    EventDispatcher.instance.DispatchEvent(EventDef.EVENT_FRUIT_DISAPPEAR, m_selfTransform.position);
    // 加分事件，每个水果10分
    EventDispatcher.instance.DispatchEvent(EventDef.EVENT_ADD_SCORE, 10);
}

3. Hang GamePanel script

GamePaneHang the script Paneland assign a TotalScoreTextsum HomeBtn.
Insert picture description here

Fourth, run the test

Run Unity, the test results are as follows:
Insert picture description here