Unity-登录界面UI制作

文章目录1. 图片1.1 添加图片对象1.1.1 Canvas_Login1.1.2 Image_Bg1.2 背景图1.2.1 拖入图片1.2.2 修改图片材质1.2.3 挂载背景图2. 文字2.1 添加中文字体2.1.1 导入字体文件2.1.2 创建字体资源2.2 添加界面标题2.2.1 TextMesh Pro文本对象2.2.2 添加标题2.3 添加登录信息2.3.1 UI文本对象2.3.2 添加登录信息2.4 输入信息2.4.1 添加输入对象2.4.2 密码加密2.5 登录按钮3. 代码3.1 Login脚本3.2 挂载脚本3.2.1 空对象3.2.2 挂载脚本3.2.3 脚本输入信息关联3.2.3 添加触发事件3.3 场景4. 常见错误4.1 交互失败4.2 InputField拖拽赋值失败4.3 字体不显示1. 图片1.1 添加图片对象1.1.1 Canvas_Login1在Hierarchy面板空白处右键选择UI→Canvas本文将其命名为Canvas_Login2选中刚刚创建的画布Canvas_Login在Inspector面板在Render Mode选择合适的渲染模式本文是默认的没有选择Render Mode特点Screen Space - OverlayUI 会直接绘制在屏幕最顶层不受相机影响Screen Space - CameraUI 元素会附加到指定的相机上。这能更好地控制 UI 的缩放和位置。当屏幕分辨率变化或 UI 元素被其他元素遮挡时可能会出现视觉上的错位World SpaceUI 元素会作为场景中的 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 lmage2. 文字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__passwordPlaceholder是输入框里的提示信息同样这里也可以对文字样式进行设置、文字矩形框大小及位置调整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创建空对象本文将其命名为Login3.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跳转的场景命名为2025data22运行前此项目必须包含新建的场景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值均为 0Width和Height与 InputField 一致确保文字显示区域完全贴合 InputField 范围参考视频Unity登录界面相关UI制作新手小白可学。新手可学Unity登录界面—脚本程序编写。