本篇 核心知识点 ：Unity UI 素材导入规范、Sprite 图片设置、九宫格切片、锚点 / 对齐 / 适配、UI 基础组件（Image/Text/InputField/Button）、输入框密码模式、场景创建与跳转、Build Settings 场景注册、登录 / 注册 UI 完整搭建、按钮事件绑定、网络消息联动、消息枚举优化、业务逻辑判断、观察者事件解耦
一、UI 素材导入与图片基础设置
1 素材导入操作
-
外部图片直接拖拽到 Unity
Assets文件夹，自动生成资源文件； -
所有 UI 图片禁止直接拖到 Canvas，需要先创建 UI 组件再赋值图片源，否则会识别为 3D Sprite。
2 图片纹理核心设置（必改）
概念
图片默认纹理类型为Default/Texture，无法用于 UI 渲染，必须修改参数才能赋值给 Image 组件。
操作步骤
-
全选所有 UI 图片
Ctrl+A； -
右侧 Inspector 面板修改：Texture Type = Sprite (2D and UI)；
-
点击 Apply 批量应用修改；
-
选中 Image 组件，将资源拖入
Source Image属性，勾选Set Native Size还原原图尺寸。
拓展
3D 模型贴图保持 Texture，UI 界面素材统一 Sprite 类型，两类资源分开文件夹管理。
二、UI 锚点与适配系统（核心适配知识点）
1 对齐预设面板
选中 UI 物体，Inspector 上方对齐九宫面板，一键停靠：
居中、左上、右上、左下、右下、左右拉伸、上下拉伸、全屏拉伸；
全屏拉伸：四边距离全部置 0，自动铺满屏幕背景，适配任意分辨率。
2 锚点修改两种方式
-
直接输入锚点 XY（0,0 = 左上角；0.5,0.5 = 中心；1,1 = 右下角）
-
快捷操作：按住
Shift点击对齐面板绿色锚点，快速切换锚点位置。
3 适配实战逻辑
登录弹窗固定右下角：锚点设右下角，左右 / 底部偏移固定，拉伸窗口弹窗位置不变；
全屏背景：选全屏拉伸模式，完美适配手机 / PC 不同分辨率；
九宫格对话框不能直接拉伸原图，会圆角变形，需要切片处理。
三、Sprite 九宫格切片（Nine Slice）
1 问题现象
圆角弹窗、按钮直接放大缩小，四角倒角、边框会拉伸变形，影响界面美观。
2 插件安装（Unity 2022 + 版本）
-
顶部菜单
Window → Package Manager； -
包管理器切换
Unity Registry； -
搜索
2D Sprite，点击 Install 安装官方 2D 编辑插件。
3 切片完整流程
-
选中弹窗背景图片，点击 Inspector「Edit Sprite」打开切片编辑器；
-
四条分割线：上下左右各拉一条，隔离四个角落；
-
规则：四个角（1/3/7/9 区块）固定不变，上下中间横向拉伸、左右中间纵向拉伸、中心双向拉伸；
-
编辑完成点 Apply 保存；
-
Image 组件
Image Type改为Sliced（切片模式），放大后四角不变形。
4 Image 其他填充模式拓展
-
Simple：原图等比缩放（变形）；
-
Tiled：平铺重复（血条背景、地砖）；
-
Filled：填充模式，通过
Fill Amount 0~1实现进度条、技能冷却环形遮罩。
四、Unity 常用 UI 组件详解
1 Image 图像组件
作用：显示 UI 图片、弹窗、按钮背景；
核心属性：Source Image（贴图）、Image Type（切片 / 填充）、Color 调色、Set Native Size。
2 Text 文本组件
-
废弃老式 TextMeshPro 不推荐，使用内置 Text；
-
可调参数：字体大小、颜色、对齐（左 / 中 / 右）、行高；
-
业务规范：账号、标题文字字号 40~50，提示小字 30。
3 InputField 输入框（登录核心组件）
组成结构（双层文本）
-
Placeholder 占位文本：无输入时灰色提示文字（请输入账号）；
-
Text 输入文本：玩家实际输入内容；
关键属性：ContentType
Standard：普通文字；
Password：密码模式，输入内容自动替换为圆点隐藏，底层字符串仍保存原始密码；
代码获取输入内容
4 Button 按钮组件
-
组成：Background Image 背景图 + Text 文字；
-
绑定点击事件两种方式：
可视化拖拽：OnClick 面板添加绑定函数；
代码动态绑定：
btn.onClick.AddListener(ClickFunc);
组件层级规范
Canvas → 登录面板 Image → 账号 Text + 输入框、密码 Text + 输入框、登录 / 注册 / 找回按钮，父子层级清晰。
五、登录 UI 完整搭建流程
-
创建 Canvas，分辨率推荐手游
1334×750； -
拖入弹窗背景 Image，切片处理、锚点固定右下角；
-
添加账号、密码 Text 文本；
-
两个 InputField 输入框（账号标准、密码设 Password 模式）；
-
复制生成登录、注册、找回密码三个 Button，替换背景图；
-
调整所有控件锚点适配窗口，层级父子整理。
六、场景创建与场景跳转
1 新建场景
右键 Project 面板 → Create → Scene；
本次项目两个场景：Login 登录场景、Lobby 大厅场景。
2 场景注册（必做，否则跳转报错）
-
顶部菜单
File → Build Settings； -
将所有场景拖拽到「Scenes In Build」列表；
-
场景索引：列表从上到下对应数字 0、1，代码可通过名称 / 索引跳转。
3 场景跳转代码
命名空间using UnityEngine.SceneManagement;
4 常见报错
报错Scene could not be loaded：场景未添加到 Build Settings 列表。
七、UI 与网络消息联动业务逻辑
1 按钮点击校验逻辑（登录按钮）
点击登录执行流程：
-
获取输入框账号、密码文本；
-
判断字符串长度，空字符串弹窗提示；
-
账号密码非空，构造
C2SLogin消息发送服务端；
易错坑：逻辑运算符错误
2 消息命令枚举优化（替代纯数字 1001/1002）
概念
硬编码数字可读性差、易写错，使用枚举统一管理所有子命令，两端同步。
发送消息时直接传入枚举，强类型编译报错，杜绝数字写错问题。
3 注册消息拓展开发
-
新增消息类
C2SRegister，扩展昵称 Nickname 字段； -
子命令
1003客户端发，回执1004服务返回； -
注册逻辑：账号重复返回失败码，成功直接自动登录跳转大厅。
八、主线程消息处理（Unity 线程限制）
核心规则
异步网络子线程禁止操作 UI、场景、GameObject ，所有界面逻辑必须放到Update主线执行。
标准实现方案
-
网络 Session 收到消息，加锁存入私有消息队列；
-
Update 每帧循环读取队列，批量处理消息；
-
收到登录成功回执（Result=0），执行场景跳转；失败弹窗提示。
事件 / 观察者解耦方案
-
定义全局委托
public event Action OnLoginSuccess; -
UI 脚本监听该事件；
-
主线处理完登录消息后触发委托，自动执行跳转逻辑；
委托与 event 区别
普通 Action：外部可直接= null清空所有监听，不安全；
event 事件：外部仅能+=/-=订阅，禁止直接赋值，游戏项目优先 event。
九、网络库 DLL 项目配置规范
-
公共 MyNet 类库输出路径设置
Unity/Assets/Plugins； -
每次重新生成 DLL 自动同步，无需手动复制；
-
客户端、服务端共用同一套 Packet/Message 代码，消息结构完全统一，避免收发解析错位。
十、常见 Bug 与排错方案
1 UI 图片拖不进 Image Source：图片 Texture Type 未改为 Sprite；
2 弹窗拉伸圆角变形：未做九宫格切片，Image Type 不是 Sliced；
3 场景跳转提示加载失败：场景未加入 Build Settings；
4 输入空账号依然发消息：逻辑运算符 || 写成 &&；
5 子线程操作 UI 报错：消息未中转主线 Update 队列；
6 消息解析字段丢失：未按顺序序列化 / 反序列化子类新增字段；
7 DLL 找不到：类库输出路径未指向 Unity 资源文件夹。
十一、拓展
1 Sprite 图片纹理类型、九宫格切片使用场景；
2 锚点与分辨率适配原理，手游 UI 适配标准；
3 InputField 密码模式底层存储规则；
4 Unity 主线程限制、消息队列中转解决方案；
5 场景跳转配置步骤，Build Settings 作用；
6 event 事件相比普通委托的安全优势；
7 消息枚举优化项目规范，杜绝魔法数字；
8 DLL 公共库两端复用项目分层设计思路。