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关联
脚本打开后如下所示
脚本内容如下
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）选中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登录界面—脚本程序编写。
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/WMX1012/article/details/156106398
