C# 语言进阶（十四）Unity UI界面开发 + 网络消息联动

本篇核心知识点Unity UI 素材导入规范、Sprite 图片设置、九宫格切片、锚点 / 对齐 / 适配、UI 基础组件Image/Text/InputField/Button、输入框密码模式、场景创建与跳转、Build Settings 场景注册、登录 / 注册 UI 完整搭建、按钮事件绑定、网络消息联动、消息枚举优化、业务逻辑判断、观察者事件解耦一、UI 素材导入与图片基础设置1 素材导入操作外部图片直接拖拽到 UnityAssets文件夹自动生成资源文件所有 UI 图片禁止直接拖到 Canvas需要先创建 UI 组件再赋值图片源否则会识别为 3D Sprite。2 图片纹理核心设置必改概念图片默认纹理类型为Default/Texture无法用于 UI 渲染必须修改参数才能赋值给 Image 组件。操作步骤全选所有 UI 图片CtrlA右侧 Inspector 面板修改Texture Type Sprite (2D and UI)点击 Apply 批量应用修改选中 Image 组件将资源拖入Source Image属性勾选Set Native Size还原原图尺寸。拓展3D 模型贴图保持 TextureUI 界面素材统一 Sprite 类型两类资源分开文件夹管理。二、UI 锚点与适配系统核心适配知识点1 对齐预设面板选中 UI 物体Inspector 上方对齐九宫面板一键停靠居中、左上、右上、左下、右下、左右拉伸、上下拉伸、全屏拉伸全屏拉伸四边距离全部置 0自动铺满屏幕背景适配任意分辨率。2 锚点修改两种方式直接输入锚点 XY0,0 左上角0.5,0.5 中心1,1 右下角快捷操作按住Shift点击对齐面板绿色锚点快速切换锚点位置。3 适配实战逻辑登录弹窗固定右下角锚点设右下角左右 / 底部偏移固定拉伸窗口弹窗位置不变全屏背景选全屏拉伸模式完美适配手机 / PC 不同分辨率九宫格对话框不能直接拉伸原图会圆角变形需要切片处理。三、Sprite 九宫格切片Nine Slice1 问题现象圆角弹窗、按钮直接放大缩小四角倒角、边框会拉伸变形影响界面美观。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 输入文本玩家实际输入内容关键属性ContentTypeStandard普通文字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 每帧循环读取队列批量处理消息收到登录成功回执Result0执行场景跳转失败弹窗提示。事件 / 观察者解耦方案定义全局委托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 未改为 Sprite2 弹窗拉伸圆角变形未做九宫格切片Image Type 不是 Sliced3 场景跳转提示加载失败场景未加入 Build Settings4 输入空账号依然发消息逻辑运算符 || 写成 5 子线程操作 UI 报错消息未中转主线 Update 队列6 消息解析字段丢失未按顺序序列化 / 反序列化子类新增字段7 DLL 找不到类库输出路径未指向 Unity 资源文件夹。十一、拓展1 Sprite 图片纹理类型、九宫格切片使用场景2 锚点与分辨率适配原理手游 UI 适配标准3 InputField 密码模式底层存储规则4 Unity 主线程限制、消息队列中转解决方案5 场景跳转配置步骤Build Settings 作用6 event 事件相比普通委托的安全优势7 消息枚举优化项目规范杜绝魔法数字8 DLL 公共库两端复用项目分层设计思路。