UGUI 知识精讲与实用案例（第 4 弹） --简单的UI登录界面小案例展示

在 Unity 游戏开发的 UGUI 系统里，构建一个能够在各种屏幕尺寸和分辨率下都完美呈现的用户界面至关重要。而 UGUI 中的 Anchor 锚点，正是达成这一目标的核心要素。

软件黑马王子

1738人浏览 · 2025-03-19 02:00:00

软件黑马王子 · 2025-03-19 02:00:00 发布

一.最终效果展示

ui登录界面简单案例

二.详细操作步骤

1.创建背景及其调整参数

（1）创建image，拖入资源
在 Unity 的 Hierarchy 面板中，右键点击 Canvas（若没有 Canvas，需先创建一个），选择 “UI” -> “Image” 来创建一个 Image 对象。此 Image 对象将作为登录界面的背景。接着，在 Project 面板中找到准备好的背景图片资源（确保该资源已正确导入项目），直接将其拖拽到 Hierarchy 面板中的 Image 对象上，或者在 Inspector 面板中，通过 “Source Image” 属性选择对应的背景图片资源，从而完成背景图片的设置。

（2）调整锚点位置，如下图（保证图片始终在中间）

在 Inspector 面板中找到 “Rect Transform” 组件下的 “Anchor Presets” 区域。点击预设锚点中的 “Center” 选项，此时背景图片的锚点将被设置在 Canvas 的中心位置。

2.创建用户名和密码输入框以及参数调整

（1）创建Textmeshpro，复制，修改名字为用户名和密码，并按照下图调整参数和对齐

在 Hierarchy 面板中，右键点击 Canvas，选择 “UI” -> “Text - TextMeshPro” 来创建一个 TextMeshPro 文本对象。选中该对象，在 Inspector 面板中，将 “Text” 属性修改为 “用户名”，并根据实际设计需求调整字体、字号、颜色等参数。

（2）创建用户名和密码输入框Input Field

在 Hierarchy 面板中，再次右键点击 Canvas，选择 “UI” -> “Input Field” 来创建一个输入框对象。将其放置在 “用户名” 文本对象的右侧，通过调整 “Rect Transform” 组件中的 “Position”、“Width” 和 “Height” 属性，使其与 “用户名” 文本对象在视觉上形成合理的搭配。

（3）修改输入框提示词内容

选中用户名对应的输入框对象，在 Inspector 面板中找到 “Placeholder” 子对象下的 “TextMeshPro - Text” 组件。将 “Text” 属性修改为 “请输入用户名”，以此作为用户名输入框的提示词。

（4）密码输入框内容不可见

选中密码输入框对象，在 Inspector 面板中找到 “Input Field” 组件。将 “Content Type” 属性从默认的 “Standard” 改为 “Password”，此时当用户在密码输入框中输入内容时，输入的字符将以默认的掩码字符（通常为星号 “*”）显示，从而保证密码内容的不可见性。
修改前：

修改后：

（6）修改输入框提示词字体参数

分别选中用户名和密码输入框的 “Placeholder” 子对象下的 “TextMeshPro - Text” 组件。在 Inspector 面板中，根据整体界面风格，调整字体、字号、颜色等参数。

（7）修改输入框内容字体参数

（8）简单展示

3.创建登录按钮

（1）创建 button 并且命名和修改颜色参数（自行选择）

在 Hierarchy 面板中，右键点击 Canvas，选择 “UI” -> “Button” 来创建一个按钮对象。将其命名为 “LoginButton”，以便在后续的脚本编写和管理中易于识别。

（2）修改按钮的显示参数内容以及调整参数字体形式

选中按钮对象下的 “Text” 子对象，在 Inspector 面板中找到 “TextMeshPro - Text” 组件。将 “Text” 属性修改为 “登录”，明确按钮的功能。

4.创建错误提示信息

（1）创建textmeshpro，命名为Errortip，并按照图中修改参数

在 Hierarchy 面板中，右键点击 Canvas，选择 “UI” -> “Text - TextMeshPro” 来创建一个新的 TextMeshPro 文本对象。将其命名为 “Errortip”，用于显示用户输入错误时的提示信息。

5.创建登陆界面脚本

（1）创建脚本并挂载到Main Camera上

在 Project 面板中，右键点击一个文件夹（如 “Scripts” 文件夹，若不存在可自行创建），选择 “Create” -> “C# Script” 来创建一个新的 C# 脚本。将其命名为 “LoginScript”。

（2）代码如下

using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEditor.SearchService;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;


public class login : MonoBehaviour
{
    public InputField inputusername;
    public InputField inputpassword;
    public TextMeshProUGUI Errortip;
    // Start is called before the first frame update
    public void LoginButton()
    {
        if(inputusername.text=="软件黑马王子"&&inputpassword.text=="123456" )
        {
            //切换游戏场景
            SceneManager.LoadScene("gameScene");

        }
        else
        {
            Errortip.text = "用户名或者密码输入错误";
            Errortip.enabled = true;
            StartCoroutine(Hidetip());
        }
    }

    IEnumerator Hidetip()
    {
        yield return new WaitForSeconds(1);
        Errortip.enabled = false;
    }

}