Unity-登录界面UI制作

1. 图片

1.1 添加图片对象

1.1.1 Canvas_Login

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

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

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关联
脚本打开后如下所示

脚本内容如下

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命名空间，才能正常使用

using TMPro; public TMP_InputField InputField__user; public TMP_InputField InputField__password;

4.3 字体不显示

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

解决方法：

1. 先检查文字颜色是否与背景色相同，改变文字颜色
2. 检查文字字体大小
3. 确保文字在显示范围
   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 范围

参考视频
Unity登录界面相关UI制作，新手小白可学。
新手可学，Unity登录界面—脚本程序编写。