Unity制作一个简单的登入注册页面

news2025/1/17 15:56:28

1.创建Canvas组件

首先我们创建一个Canvas画布，我们再在Canvas画布底下创建一个空物体，取名为Resgister。把空物体的锚点设置为全屏撑开。

2.我们在Resgister空物体底下创建一个Image组件，改名为bg。我们也把它的锚点设置为全屏撑开状态。接下来我们把我们的图片UI素材导入进去，修改它的类型为2D和UI，点击应用。那么我们即可在Unity引擎中使用它。

接下来我们把对应的bg图片拖拽到对应的位置。

3.创建InputFiled组件

(1).我们在bg下面创建InputFiled组件，把创建好的InputFiled组件改名为userName，接下来我们点击Placehoder在里面调整它的大小，调节对应的组件样式。

(2).我们也需要调节里面的Text里面的字体大小样式和对齐方式等等，这个Text修改是我们输入时的字为多大，而上面的Placehoder是InputFiled组件显示的字体样式。

(3)点击userNamer组件按快捷键Ctrl+D复制一方出来，我们改名为password，我们只需要修改Placehoder里面的字就行。

我们继续复制一份出来改名为confirmPassword,和上面操作一模一样只需要修改里面的字即可。修改为：请确认密码...

最后我们需要适当的调节这3个物体的位置。

这里我们已经到达了这样的效果，接下来我们把对应的图片拖拽进去。

(4).我们在bg下面创建一个Button组件，改名为registerButton,我们设置好它的锚点让它在对应的位置，并且调整他的大小。修改一下里面的字，并且修改一下button上的颜色让点击或者移动上去更明显。

接下来我们ctrl+D复制一份一模一样的出来，取名为loginButton，调整它的位置并且只需要修改text里面的字就行，不需要其他操作。

接下来我们创建一个文本显示在最上面，告诉我们进入了注册页面。我们把这个文本的锚点设置成最上面那一块全屏。

我们调节文本的样式。因为在最上面所以我们需要把它设置大一点。具体操作如图。

(5).我们再创建一个Text文本组件，我们用来接收注册的反馈信息。我们改名为TipsText,修改里面的文本，字体大小，对齐，颜色我们设置为红色。

设置好后我们的UI基本搭建完成。效果图如下：

看起来感觉还是很不错的。我们接下来运行看看

从上面图片可以看出，已经弄好了UI，接下来我们要写代码实现对应的效果。

代码：

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

public class RegisterManager : MonoBehaviour
{
    public InputField usernameInput;
    public InputField passwordInput;
    public InputField confirmPasswordInput;
    public Text TipsText;

    public void RegisterInformation()
    {
        if (PlayerPrefs.GetString(usernameInput.text) == "")
        {
            if (passwordInput.text == confirmPasswordInput.text)
            {
                PlayerPrefs.SetString(usernameInput.text, usernameInput.text);
                PlayerPrefs.SetString(usernameInput.text + "password", passwordInput.text);
                //绿色
                TipsText.color = Color.green;
                TipsText.text = "注册成功！";
            }
            else
            {
                //红色
                TipsText.color = Color.red;
                TipsText.text = "两次密码输入不一致";
            }
        }
        else
        {
            //红色
            TipsText.color = Color.red;
            TipsText.text = "用户已存在";
        }

    }
    public void Login()
    {
        if (PlayerPrefs.GetString(usernameInput.text) != "")
        {
            if (PlayerPrefs.GetString(usernameInput.text + "password") == passwordInput.text)
            {
                //绿色
                TipsText.color = Color.green;
                TipsText.text = "登录成功,请稍等...";
                StartCoroutine(success());
            }
            else
            {
                //红色
                TipsText.color = Color.red;
                TipsText.text = "密码错误";
            }
        }
        else
        {
            //红色
            TipsText.color = Color.red;
            TipsText.text = "账号不存在";
        }
    }

    //登入成功
    IEnumerator success()
    {
        //等待2秒
        yield return new WaitForSeconds(2);

        //加载场景
        SceneManager.LoadScene(1);
    }
}