Unity中使用XR实现界面登录-Toy模板网

这篇具有很好参考价值的文章主要介绍了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中被添加，并使用正确的场景名字。文章来源地址https://www.toymoban.com/news/detail-823663.html

/// <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;
}

到了这里，关于Unity中使用XR实现界面登录的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！