本篇核心知识点：Unity UI 素材导入规范、Sprite 图片设置、九宫格切片、锚点 / 对齐 / 适配、UI 基础组件（Image/Text/InputField/Button）、输入框密码模式、场景创建与跳转、Build Settings 场景注册、登录 / 注册 UI 完整搭建、按钮事件绑定、网络消息联动、消息枚举优化、业务逻辑判断、观察者事件解耦

一、UI 素材导入与图片基础设置

1 素材导入操作

1. 外部图片直接拖拽到 UnityAssets文件夹，自动生成资源文件；

2. 所有 UI 图片禁止直接拖到 Canvas，需要先创建 UI 组件再赋值图片源，否则会识别为 3D Sprite。

2 图片纹理核心设置（必改）

概念

图片默认纹理类型为Default/Texture，无法用于 UI 渲染，必须修改参数才能赋值给 Image 组件。

操作步骤

1. 全选所有 UI 图片Ctrl+A；

2. 右侧 Inspector 面板修改：Texture Type = Sprite (2D and UI)；

3. 点击 Apply 批量应用修改；

4. 选中 Image 组件，将资源拖入Source Image属性，勾选Set Native Size还原原图尺寸。

拓展

3D 模型贴图保持 Texture，UI 界面素材统一 Sprite 类型，两类资源分开文件夹管理。

二、UI 锚点与适配系统（核心适配知识点）

1 对齐预设面板

选中 UI 物体，Inspector 上方对齐九宫面板，一键停靠：

居中、左上、右上、左下、右下、左右拉伸、上下拉伸、全屏拉伸；

全屏拉伸：四边距离全部置 0，自动铺满屏幕背景，适配任意分辨率。

2 锚点修改两种方式

1. 直接输入锚点 XY（0,0 = 左上角；0.5,0.5 = 中心；1,1 = 右下角）

2. 快捷操作：按住Shift点击对齐面板绿色锚点，快速切换锚点位置。

3 适配实战逻辑

登录弹窗固定右下角：锚点设右下角，左右 / 底部偏移固定，拉伸窗口弹窗位置不变；

全屏背景：选全屏拉伸模式，完美适配手机 / PC 不同分辨率；

九宫格对话框不能直接拉伸原图，会圆角变形，需要切片处理。

三、Sprite 九宫格切片（Nine Slice）

1 问题现象

圆角弹窗、按钮直接放大缩小，四角倒角、边框会拉伸变形，影响界面美观。

2 插件安装（Unity 2022 + 版本）

1. 顶部菜单Window → Package Manager；

2. 包管理器切换Unity Registry；

3. 搜索2D Sprite，点击 Install 安装官方 2D 编辑插件。

3 切片完整流程

1. 选中弹窗背景图片，点击 Inspector「Edit Sprite」打开切片编辑器；

2. 四条分割线：上下左右各拉一条，隔离四个角落；

3. 规则：四个角（1/3/7/9 区块）固定不变，上下中间横向拉伸、左右中间纵向拉伸、中心双向拉伸；

4. 编辑完成点 Apply 保存；

5. Image 组件Image Type改为Sliced（切片模式），放大后四角不变形。

4 Image 其他填充模式拓展

1. Simple：原图等比缩放（变形）；

2. Tiled：平铺重复（血条背景、地砖）；

3. Filled：填充模式，通过Fill Amount 0~1实现进度条、技能冷却环形遮罩。

四、Unity 常用 UI 组件详解

1 Image 图像组件

作用：显示 UI 图片、弹窗、按钮背景；

核心属性：Source Image（贴图）、Image Type（切片 / 填充）、Color 调色、Set Native Size。

2 Text 文本组件

1. 废弃老式 TextMeshPro 不推荐，使用内置 Text；

2. 可调参数：字体大小、颜色、对齐（左 / 中 / 右）、行高；

3. 业务规范：账号、标题文字字号 40~50，提示小字 30。

3 InputField 输入框（登录核心组件）

组成结构（双层文本）

1. Placeholder 占位文本：无输入时灰色提示文字（请输入账号）；

2. Text 输入文本：玩家实际输入内容；

关键属性：ContentType

Standard：普通文字；

Password：密码模式，输入内容自动替换为圆点隐藏，底层字符串仍保存原始密码；

代码获取输入内容

4 Button 按钮组件

1. 组成：Background Image 背景图 + Text 文字；

2. 绑定点击事件两种方式：

   可视化拖拽：OnClick 面板添加绑定函数；

   代码动态绑定：btn.onClick.AddListener(ClickFunc);

组件层级规范

Canvas → 登录面板 Image → 账号 Text + 输入框、密码 Text + 输入框、登录 / 注册 / 找回按钮，父子层级清晰。

五、登录 UI 完整搭建流程

1. 创建 Canvas，分辨率推荐手游1334×750；

2. 拖入弹窗背景 Image，切片处理、锚点固定右下角；

3. 添加账号、密码 Text 文本；

4. 两个 InputField 输入框（账号标准、密码设 Password 模式）；

5. 复制生成登录、注册、找回密码三个 Button，替换背景图；

6. 调整所有控件锚点适配窗口，层级父子整理。

六、场景创建与场景跳转

1 新建场景

右键 Project 面板 → Create → Scene；

本次项目两个场景：Login 登录场景、Lobby 大厅场景。

2 场景注册（必做，否则跳转报错）

1. 顶部菜单File → Build Settings；

2. 将所有场景拖拽到「Scenes In Build」列表；

3. 场景索引：列表从上到下对应数字 0、1，代码可通过名称 / 索引跳转。

3 场景跳转代码

命名空间using UnityEngine.SceneManagement;

4 常见报错

报错Scene could not be loaded：场景未添加到 Build Settings 列表。

七、UI 与网络消息联动业务逻辑

1 按钮点击校验逻辑（登录按钮）

点击登录执行流程：

1. 获取输入框账号、密码文本；

2. 判断字符串长度，空字符串弹窗提示；

3. 账号密码非空，构造C2SLogin消息发送服务端；

易错坑：逻辑运算符错误

2 消息命令枚举优化（替代纯数字 1001/1002）

概念

硬编码数字可读性差、易写错，使用枚举统一管理所有子命令，两端同步。

发送消息时直接传入枚举，强类型编译报错，杜绝数字写错问题。

3 注册消息拓展开发

1. 新增消息类C2SRegister，扩展昵称 Nickname 字段；

2. 子命令1003客户端发，回执1004服务返回；

3. 注册逻辑：账号重复返回失败码，成功直接自动登录跳转大厅。

八、主线程消息处理（Unity 线程限制）

核心规则

异步网络子线程禁止操作 UI、场景、GameObject，所有界面逻辑必须放到Update主线执行。

标准实现方案

1. 网络 Session 收到消息，加锁存入私有消息队列；

2. Update 每帧循环读取队列，批量处理消息；

3. 收到登录成功回执（Result=0），执行场景跳转；失败弹窗提示。

事件 / 观察者解耦方案

1. 定义全局委托public event Action OnLoginSuccess;

2. UI 脚本监听该事件；

3. 主线处理完登录消息后触发委托，自动执行跳转逻辑；

委托与 event 区别

普通 Action：外部可直接= null清空所有监听，不安全；

event 事件：外部仅能+=/-=订阅，禁止直接赋值，游戏项目优先 event。

九、网络库 DLL 项目配置规范

1. 公共 MyNet 类库输出路径设置Unity/Assets/Plugins；

2. 每次重新生成 DLL 自动同步，无需手动复制；

3. 客户端、服务端共用同一套 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 公共库两端复用项目分层设计思路。