Unity-登录界面UI制作

文章目录

[1. 图片](#1. 图片)
- [1.1 添加图片对象](#1.1 添加图片对象)
- - [1.1.1 Canvas_Login](#1.1.1 Canvas_Login)
  - [1.1.2 Image_Bg](#1.1.2 Image_Bg)
- [1.2 背景图](#1.2 背景图)
- - [1.2.1 拖入图片](#1.2.1 拖入图片)
  - [1.2.2 修改图片材质](#1.2.2 修改图片材质)
  - [1.2.3 挂载背景图](#1.2.3 挂载背景图)
[2. 文字](#2. 文字)
- [2.1 添加中文字体](#2.1 添加中文字体)
- - [2.1.1 导入字体文件](#2.1.1 导入字体文件)
  - [2.1.2 创建字体资源](#2.1.2 创建字体资源)
- [2.2 添加界面标题](#2.2 添加界面标题)
- - [2.2.1 TextMesh Pro文本对象](#2.2.1 TextMesh Pro文本对象)
  - [2.2.2 添加标题](#2.2.2 添加标题)
- [2.3 添加登录信息](#2.3 添加登录信息)
- - [2.3.1 UI文本对象](#2.3.1 UI文本对象)
  - [2.3.2 添加登录信息](#2.3.2 添加登录信息)
- [2.4 输入信息](#2.4 输入信息)
- - [2.4.1 添加输入对象](#2.4.1 添加输入对象)
  - [2.4.2 密码加密](#2.4.2 密码加密)
- [2.5 登录按钮](#2.5 登录按钮)
[3. 代码](#3. 代码)
- [3.1 Login脚本](#3.1 Login脚本)
- [3.2 挂载脚本](#3.2 挂载脚本)
- - [3.2.1 空对象](#3.2.1 空对象)
  - [3.2.2 挂载脚本](#3.2.2 挂载脚本)
  - [3.2.3 脚本输入信息关联](#3.2.3 脚本输入信息关联)
  - [3.2.3 添加触发事件](#3.2.3 添加触发事件)
- [3.3 场景](#3.3 场景)
[4. 常见错误](#4. 常见错误)
- [4.1 交互失败](#4.1 交互失败)
- [4.2 InputField拖拽赋值失败](#4.2 InputField拖拽赋值失败)
- [4.3 字体不显示](#4.3 字体不显示)

1. 图片

1.1 添加图片对象

1.1.1 Canvas_Login

1）在Hierarchy 面板空白处右键，选择 UI → Canvas ，本文将其命名为Canvas_Login

2）选中刚刚创建的画布Canvas_Login ，在Inspector 面板，在Render Mode选择合适的渲染模式，本文是默认的，没有选择

Render Mode	特点
Screen Space - Overlay	UI 会直接绘制在屏幕最顶层，不受相机影响
Screen Space - Camera	UI 元素会附加到指定的相机上。这能更好地控制 UI 的缩放和位置。当屏幕分辨率变化或 UI 元素被其他元素遮挡时，可能会出现视觉上的错位
World Space	UI 元素会作为场景中的 3D 对象存在

1.1.2 Image_Bg

右键点击刚刚创建的画布Canvas_Login ，选择 UI → Image ，这个作为登录界面的背景，本文将其，命名为Image_Bg

选中刚刚创建的背景Image_Bg ，在Inspector 面板，点击center图标，按住Alt键（关键！自动适配父物体）后，再点击右下角图标，这样背景将会铺满整个屏幕

1.2 背景图

1.2.1 拖入图片

将准备好的图片拖入项目文件夹里

1.2.2 修改图片材质

选中拖入的图片，在Inspector 面板，在Texture Type 选项里选择Sprite (2D and Ul) ，之后点击Apply

成功后如下所示

1.2.3 挂载背景图

选中Image_Bg ，将修改后的图片拖拽至Source lmage

2. 文字

2.1 添加中文字体

不需要额外增加字体，也可以跳过此小节内容

2.1.1 导入字体文件

在网上下载中文字体（.ttf /.otf）文件

将此字体文件保存至Unity项目的Assets文件夹下的任意一个文件夹里

2.1.2 创建字体资源

不使用TextMesh Pro可以跳过此步骤

右键点击导入的字体文件，选择Create → TextMeshPro → Font Asset

创建成功后如下

2.2 添加界面标题

2.2.1 TextMesh Pro文本对象

创建一个TextMesh Pro文本对象，在Hierarchy 面板空白处右键，选择 UI → Text - TextMeshPro

本文将创建完的文本对象命名为Text (TMP)_title

在Inspector 面板中，将刚刚创建的字体资源拖到** Font Asset** 属性中。

2.2.2 添加标题

选中Text (TMP)_title ，在Inspector 面板里对字体进行编辑

若文字字体设置过大，文字内容可能显示不完全，这时扩大文字矩形框或减小字体即可

拖动白色矩形框可以改变文字短形框的大小

拖动坐标系箭头可以移动文字短形框的位置

2.3 添加登录信息

2.3.1 UI文本对象

因为此处的文字不需要很强的文本效果，所以使用的是Unity的标准UI文本的方式再添加两个文本对象，分别命名为Text_user 和Text_password

在Hierarchy 面板空白处右键，选择 UI → **Text **

在Inspector 面板中，将字体文件拖到** Font **属性中。

2.3.2 添加登录信息

选中文本对象，在Inspector面板里对字体进行编辑，也可以对文字矩形框进行编辑

2.4 输入信息

2.4.1 添加输入对象

在Hierarchy 面板空白处右键，选择 UI → InputField

创建2个这个的对象

本文分别命名为InputField__user 和InputField__password

Placeholder 是输入框里的提示信息，同样这里也可以对文字样式进行设置、文字矩形框大小及位置调整

2.4.2 密码加密

选中InputField__password ，在Content Type 选项里选择Password ，那么在输入密码时会加密，看不见输入的密码

2.5 登录按钮

在Hierarchy 面板空白处右键，选择 UI → Button

本文将其设置为Button_Login

这里同样有个文本对象，自行设置即可

3. 代码

3.1 Login脚本

在Assets 文件夹下的任意文件夹里，在Project 面板空白处右键，选择 Create → C# Script 创建脚本，命名为Login

脚本首字母大写，创建的时候就命名，不然容易出错

然后打开脚本进行编辑，双击脚本即可

本文用的是Visual Studio 2019软件打开，此软件和unity软件有必要进行关联，关联的操作详情见博文里的4. Unity和Visual Studio关联

脚本打开后如下所示

脚本内容如下

C 复制代码

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

public class Login : MonoBehaviour
{
    public InputField InputField__user; 
    public InputField InputField__password; 
    public void OnLoginButtonClick()
    {
        string username = InputField__user.text; 
        string password = InputField__password.text;
        if (username == "1" && password == "2");
            {
            //加载下一个场景，2025data2是场景名
            SceneManager.LoadScene("2025data2");
               
        }
 
    }

}

3.2 挂载脚本

3.2.1 空对象

在Hierarchy 面板空白处右键，选择 Create Empty ，创建空对象，本文将其命名为Login

3.2.2 挂载脚本

将脚本拖拽至空对象上，成功后会在Hierarchy 面板上显示

3.2.3 脚本输入信息关联

选中脚本挂载的空对象Login ，将InputField__user 和InputField__password 拖拽至对应的位置

3.2.3 添加触发事件

选中登录按钮Button_Login ，在Hierarchy 面板On Click () 处点击 +

然后将脚本挂载的空对象Login 拖拽至对应的位置

选择触发事件OnLoginButtonclick ()

3.3 场景

1）

在Hierarchy 面板场景处右键，选择Add New Scene

保存这个场景，这个场景的命名与脚本里跳转至下一个场景的名称一致

本文将登录界面场景另存命名为Login ，跳转的场景命名为2025data2

2）

运行前此项目必须包含新建的场景

File → Build Settings...

这里必须包含下一个要跳转的场景，可以点击Add Open Scenes 进行添加，或者直接将场景拖拽至此处的空白处

至此整个项目完成，点击运行即可

4. 常见错误

4.1 交互失败

若是无法交互，右键点击，在UI里创建一个EventSystem对象（事件系统）

若是场景已配置MRTK（已自带事件系统），则无需再添加事件系统，

4.2 InputField拖拽赋值失败

如果创建的是Input Field - TextMeshPro，那么在脚本里就需要把数据类型从InputField改成TMP_InputField，并且需要引用TMPro命名空间，才能正常使用

C 复制代码

using TMPro;

public TMP_InputField InputField__user;
public TMP_InputField InputField__password;

4.3 字体不显示

情况描述：

InputField输入对象字体不显示，在Inspector 面板里双击文字对象，在Scene面板里能看见文字框以及背景色，但是没有文字内容

解决方法：

先检查文字颜色是否与背景色相同，改变文字颜色
检查文字字体大小
确保文字在显示范围
1）选中InputField 的Text子对象 （若创建的是Input Field - TextMeshPro，则选中Text Area 即可）
2）在Inspector 面板里，查看Rect Transform 组件
按住Alt键 （关键！自动适配父物体），选择 "拉伸上下左右"（四个方向全拉伸，对应锚点四个角都贴紧 InputField 边缘）

此操作与前面1.1.2 Image_Bg使图片铺满整个背景一致

3）确认Rect Transform 的Left、Right、Top、Bottom 值均为 0，Width和Height与 InputField 一致，确保文字显示区域完全贴合 InputField 范围