【UGUI】萌新教程-我是这样实现Unity注册登录UI界面跳转的

在游戏开发中，注册、登录和场景跳转是常见的功能需求。本文将详细介绍如何在Unity中实现一个简单的注册登录UI界面跳转流程。通过这个流程，用户可以依次完成注册、提示框确认、登录，并最终进入游戏场景。

1. 业务逻辑概述

我们的目标是实现以下业务逻辑：

注册界面：用户点击注册按钮后，关闭注册界面，打开提示框。
提示框：用户点击提示框按钮后，关闭提示框，打开登录界面。
登录界面：用户点击登录按钮后，关闭登录界面，跳转到游戏场景。

2. 程序逻辑实现

为了实现上述业务逻辑，我们编写了一个名为 UGUIManager 的脚本，该脚本负责管理UI界面的显示与隐藏，以及场景的跳转。

2.1 脚本结构

首先，我们在脚本中定义了三个 GameObject 变量，分别对应注册界面、提示框和登录界面：

public GameObject ResigsterUI;
public GameObject TipUI;
public GameObject LoginUI;

2.2 注册界面跳转

当用户点击注册按钮时，调用 VerifyResi 方法。该方法会关闭注册界面，并打开提示框：

public void VerifyResi()
{
    Debug.Log("用户点击了注册按钮开始关闭注册UI界面，打开提示框界面");
    ResigsterUI.SetActive(false); // 关闭注册UI界面
    TipUI.SetActive(true); // 打开提示框界面
}

点击注册跳转到提示框

2.3 提示框跳转

用户点击提示框按钮时，调用 TurnLoginPan 方法。该方法会关闭提示框，并打开登录界面：

public void TurnLoginPan()
{
    Debug.Log("用户点击了提示框按钮@实现关闭提示框，打开登录UI界面，关联好的 按钮");
    TipUI.SetActive(false);
    LoginUI.SetActive(true);
}

点击提示框跳转到登录界面

2.4 登录界面跳转

用户点击登录按钮时，调用 OpenMainGameScence 方法。该方法会关闭登录界面，并跳转到游戏场景：

public void OpenMainGameScence()
{
    Debug.Log("用户点击登录按钮，自己吧登录UI关闭！跳转游戏场景");
    LoginUI.SetActive(false);
    SceneManager.LoadScene("GameScen");
}

点击登录界面跳转到游戏场景

完整代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;

public class UGUIManager : MonoBehaviour
{
    // 定义三个GameObject变量，分别对应注册界面、提示框和登录界面
    public GameObject ResigsterUI;
    public GameObject TipUI;
    public GameObject LoginUI;

    /// <summary>
    /// 用户点击注册按钮时调用的方法
    /// </summary>
    public void VerifyResi()
    {
        Debug.Log("用户点击了注册按钮开始关闭注册UI界面，打开提示框界面");
        // 关闭注册UI界面
        ResigsterUI.SetActive(false);
        // 打开提示框界面
        TipUI.SetActive(true);
    }

    /// <summary>
    /// 用户点击提示框按钮时调用的方法
    /// </summary>
    public void TurnLoginPan()
    {
        Debug.Log("用户点击了提示框按钮@实现关闭提示框，打开登录UI界面，关联好的 按钮");
        // 关闭提示框界面
        TipUI.SetActive(false);
        // 打开登录界面
        LoginUI.SetActive(true);
    }

    /// <summary>
    /// 用户点击登录按钮时调用的方法
    /// </summary>
    public void OpenMainGameScence()
    {
        Debug.Log("用户点击登录按钮，自己吧登录UI关闭！跳转游戏场景");
        // 关闭登录界面
        LoginUI.SetActive(false);
        // 跳转到游戏场景
        SceneManager.LoadScene("GameScen");
    }
}

场景需要设置

在Unity中，为了使场景与代码配合，你需要进行以下几个步骤的设置：

### 1. 创建UI界面

首先，你需要在场景中创建UI界面。你可以使用Unity的UI系统（如Canvas、Button等）来创建注册界面、提示框和登录界面。

#### 步骤：
1. **创建Canvas**：在Hierarchy窗口中右键点击，选择 `UI -> Canvas`，创建一个Canvas对象。
2. **创建UI元素**：在Canvas下创建UI元素，如Button、Text等。
- 例如，创建一个Button并命名为 `RegisterButton`，用于注册界面。
- 创建一个Panel并命名为 `TipPanel`，用于提示框。
- 创建一个Button并命名为 `LoginButton`，用于登录界面。

### 2. 设置UI元素的初始状态

确保UI元素在场景加载时的初始状态是正确的。例如，注册界面应该是可见的，而提示框和登录界面应该是隐藏的。

#### 步骤：
1. **设置初始状态**：
- 将 `RegisterUI` 设置为可见（Active）。
- 将 `TipUI` 和 `LoginUI` 设置为不可见（Inactive）。

### 3. 将UI元素与代码关联

在代码中，你需要将UI元素与脚本中的变量关联起来。这样，脚本才能控制这些UI元素的显示和隐藏。

#### 步骤：
1. **将UI元素拖拽到脚本变量**：
- 在Inspector窗口中，找到 `UGUIManager` 脚本组件。
- 将 `RegisterUI`、`TipUI` 和 `LoginUI` 对应的UI元素拖拽到脚本组件中的相应变量槽中。

### 4. 将按钮与方法关联

你需要将UI按钮与脚本中的方法关联起来，这样当用户点击按钮时，脚本中的方法会被调用。

#### 步骤：
1. **将按钮与方法关联**：
- 选择 `RegisterButton`，在Inspector窗口中找到 `Button` 组件的 `On Click ()` 部分。
- 点击 `+` 按钮添加一个新的点击事件。
- 将 `UGUIManager` 脚本所在的GameObject拖拽到 `None (Object)` 槽中。
- 在 `No Function` 下拉菜单中选择 `UGUIManager -> VerifyResi()`。
- 重复上述步骤，将 `TipPanel` 中的按钮与 `TurnLoginPan()` 方法关联，将 `LoginButton` 与 `OpenMainGameScence()` 方法关联。

### 5. 创建并设置游戏场景

确保你有一个名为 `GameScen` 的场景，并且该场景已经添加到Build Settings中，以便 `SceneManager.LoadScene("GameScen")` 能够正确加载。

#### 步骤：
1. **创建游戏场景**：
- 在Project窗口中右键点击，选择 `Create -> Scene`，创建一个新的场景并命名为 `GameScen`。
2. **添加场景到Build Settings**：
- 打开 `File -> Build Settings`。
- 将 `GameScen` 场景拖拽到 `Scenes in Build` 列表中。

### 完整示例

假设你已经创建了以下UI元素：
- `RegisterUI`：包含一个Button，用于注册。
- `TipUI`：包含一个Button，用于确认提示框。
- `LoginUI`：包含一个Button，用于登录。

你的场景设置应该如下：

1. **Hierarchy窗口**：
```
Canvas
RegisterUI (Panel)
RegisterButton (Button)
TipUI (Panel)
TipButton (Button)
LoginUI (Panel)
LoginButton (Button)
```

2. **UGUIManager脚本组件**：
- `ResigsterUI` 关联到 `RegisterUI` Panel。
- `TipUI` 关联到 `TipUI` Panel。
- `LoginUI` 关联到 `LoginUI` Panel。

3. **按钮点击事件**：
- `RegisterButton` 的 `On Click ()` 事件关联到 `UGUIManager -> VerifyResi()`。
- `TipButton` 的 `On Click ()` 事件关联到 `UGUIManager -> TurnLoginPan()`。
- `LoginButton` 的 `On Click ()` 事件关联到 `UGUIManager -> OpenMainGameScence()`。

通过这些设置，你的场景和代码将能够完美配合，实现注册、提示框确认、登录和场景跳转的功能。