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

关注

原创最新推荐文章于 2026-09-16 10:22:20 发布 2.5k 阅读 AI 写同款· GEO 优化 ›

unity UI 的简单入门制作 unity UI 的简单入门制作作为unityUI入门，首先要了解UI是什么，UI简单来说就是一个在游戏中作为菜单状的一个东西，上面每个按钮，每个背景都是我们去设计的，并且实现的功能在unity中对于UI的制作，首先要先创建一个canvas画布，然后在画布上开始用自己拥有的素材开始制作UI。在这里注意几点问题，一是canvas画布大小不需要去改变，虽然看起来它比地图大了很多，但是我们只需要再创建一个新的相机即可，不需要去改变画布的的大小，如果将画布的大小设置成与地图大小一致，则会出现很多麻烦，比如Te 阅读详情

一.最终效果展示

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

}