Unity中使用XR实现界面登录

目录

​编辑

步骤一：搭建UI

步骤二：点击显示小键盘

步骤三：点击数字输入值

步骤三：点击删除 / 清空

步骤四：点击注册

步骤五：点击登录

---

步骤一：搭建UI

UI -> Canvas，创建一个 Canvas，确保Canvas的Render Mode设置为"World Space"

调整Canvas的Position和Rotation，使其在场景中正确摆放。

• 背景

  1. 在Canvas下创建一个Panel元素。

     • 在Hierarchy视图中右键选择 "UI" -> "Panel"。

  2. 在Inspector视图中，调整Panel的位置和大小，确保它充满整个Canvas或适应你需要的位置。

  3. 在Inspector视图中的Image组件中，找到"Color"属性。

  4. 设置颜色为你想要的纯色背景。

     • 你可以通过手动输入RGB值或使用Color Picker来选择颜色。

• 标签

  1. 在Plane下创建一个 UI -> Legacy -> text，并命名为accoutnt_text，密码同理

     • 调整字体大小，位置，长宽

• 输入框

  1. 在Plane下创建一个 UI -> Legacy -> input Field，并命名为accoutnt_input，密码同理

     • 调整大小，位置，长宽

     • 在子对象Placeholder删除Text的内容

• 按钮

  1. 在Plane下创建一个 UI -> Legacy -> button，并命名为register_btn，登录同理

     • 在子对象Text (Legacy)的Text 修改为 注 册/登 录

• 右侧键盘输入

  • 上面：一个Input Filed，点击账号账号输入框就显示账号，密码反之

  • 中间：分别是数字输入盘类似小键盘，由九个按钮组成，分别是123456789，一行3个按钮

  • 下面：一个Remove按钮居中，点击删除输入框内容

  

步骤二：点击显示小键盘

📕添加 Tracked Device Graphic Raycaster 脚本 把 Canvas 上原来的 Graphic Raycaster 组件删掉，添加 Tracked Device Graphic Raycaster 脚本。添加了这个脚本后，UI 就能被射线响应，比如被射线选中高亮。

📕添加 XR UI Input Module 脚本 在 EventSystem 游戏物体上添加 XR UI Input Module 脚本，并且把原先的 Standalone Input Module 脚本移除。XR UI Input Module 配合 Event System 组件，可以让 Input Action 中的动作配置作用于 VR 中的 UI，也可以用于 PC 端的键鼠调试，总的来说就是结合了 Input System，用于管理 XR 中 UI 的相关输入。

⭐添加点击事件

• 编写脚本，并挂载到accoutnt_input对象和password_input对象

  

• 添加Event Trigger，点击Add New Event Type选择Pointer Click，设置如下

  

步骤三：点击数字输入值

⭐添加点击事件

• 编写脚本，并挂载到各个数字按钮对象上

  

• 在Button事件中添加On Click事件，绑定对象要是各自自己的对象，比如1就绑定1，2就绑定2

  

步骤三：点击删除 / 清空

⭐添加点击事件

• 编写脚本，并挂载到remove_btn按钮对象上

  

• 在Button事件中添加On Click事件，绑定我们脚本写的方法即可

步骤四：点击注册

⭐添加弹窗UI

在 Canvas 上创建一个 Panel 作为弹窗的背景。右键点击 Canvas，在 UI -> Panel 中选择 Panel。

在 Panel 上添加 Text 元素，用于显示注册成功的提示信息。调整 Text 的大小、颜色等属性。

确保弹窗的 Panel 是不可见的。在 Inspector 视图中将 Canvas 上的 Panel 设置为不激活（勾选 Inspector 视图右上角的小方框）。

⭐添加点击事件

• 创建脚本，并挂载到register_btn按钮对象上

# 声明变量
// 账号输入框
public InputField accoutInput;
// 密码输入框
public InputField passwordInput;
// 弹窗
public GameObject popup;
// 弹窗显示文字
public Text popupText;
​
// 用户列表
public List<User> UserList = new List<User>();

# 弹窗显示隐藏
/// <summary>
/// 显示弹窗
/// </summary>
/// <param name="text">弹窗文字</param>
public void ShowPopup(string text)
{
    passwordInput.text = text;
    popup.SetActive(true);
    Invoke("HidePopup", 2f);
}
​
/// <summary>
/// 隐藏弹窗
/// </summary>
public void HidePopup()
{
    popup.SetActive(false);
}

/// <summary>
/// 注册
/// </summary>
public void Register()
{
    var account = accoutInput.text;
    var password = passwordInput.text;
​
    // 判断用户是否已经注册
    foreach (var item in UserList)
    {
        if (item.userName == account)
        {
            ShowPopup("用户已存在！");
            return;
        }
    }
​
    var user = new User
    {
        userName = account,
        password = password,
    };
    UserList.Add(user);
    ShowPopup("注册成功！");
    accoutInput.text = "";
    passwordInput.text = "";
}

• 在Button事件中添加On Click事件，绑定Register方法

  

步骤五：点击登录

• 在login_btn按钮对象上，Onclick事件加上绑定LoginFun方法

• 确保在使用SceneManager.LoadScene时传入正确的场景名。你需要确保你的下一个场景在File -> Build Settings中被添加，并使用正确的场景名字。

/// <summary>
/// 登录方法
/// </summary>
public void LoginFun()
{
    var account = accoutInput.text;
    var password = passwordInput.text;
​
    // 判断用户是否存在
    foreach (var item in UserList)
    {
        if (item.userName == account && item.password == password)
        {
            ShowPopup("登录成功！");
            SceneManager.LoadScene("Hall");
            return;
        }
    }
    ShowPopup("用户名或密码错误！");
    return;
}