4、UI系统入门：Canvas与渲染模式、UI组件（Text/Image/Button）、锚点与适配、UI事件监听、制作开始界面
好，咱们今天聊UI系统。说实话，UI这块是很多游戏开发新手的第一道坎。代码逻辑写得好好的，一放到不同手机上就乱套了——按钮跑偏、文字被裁、背景拉伸变形。我当年第一次做手游上线，测试机反馈说“开始按钮点不到”，排查了半天，原来是锚点没设对。嗯，从那以后，我对UI适配就格外上心。
4.1 Canvas与渲染模式
在Unity里，所有UI元素都必须放在Canvas下面。你可以把Canvas理解成一块画布，所有Text、Image、Button都是画布上的元素。没有Canvas，UI组件是没法渲染的。
Canvas有三种渲染模式，我直接给你列个表，方便对比：
| 渲染模式 | 适用场景 | 特点 |
|---|---|---|
| Screen Space - Overlay | 最常用，HUD、主菜单 | UI永远在最上层，不受摄像机影响 |
| Screen Space - Camera | 需要与3D场景交互的UI | UI由指定摄像机渲染，可做景深效果 |
| World Space | 3D世界中的UI（血条、对话气泡） | UI作为3D物体存在于场景中 |
我个人习惯，做开始界面、设置界面这类全屏UI时，直接用Overlay模式。简单省事，不用操心摄像机。但如果你要做类似“角色头顶血条”这种效果，那就得用World Space了。
4.2 UI组件：Text / Image / Button
这三个组件是UI系统的基础。说白了，你看到的任何界面，拆开来看无非就是文字、图片、按钮这三样东西的组合。
Text（文本）
Text组件用来显示文字。常用的属性有：
- Text：要显示的内容
- Font：字体文件
- Font Size：字号
- Alignment：对齐方式
- Color：颜色
我在项目中遇到过一个问题：中文字体在某些手机上显示为方框。后来发现是字体文件没导入对。记得用动态字体（Dynamic Font），或者把常用中文字体打包进项目。
Image（图片）
Image组件用来显示图片。关键属性：
- Source Image：图片资源
- Color：可以给图片染色
- Image Type：Simple（普通）、Sliced（九宫格）、Tiled（平铺）
这里重点说一下Sliced模式。你想想看，一个按钮背景图，如果直接拉伸，边角会变形。用九宫格切片后，只有中间区域拉伸，四个角保持原样。我做UI时，所有按钮背景图都会设置Sliced，这是基本功。
Button（按钮）
Button组件是交互的核心。它包含一个Image和一个Text作为子对象。关键属性：
- Interactable：是否可交互
- Transition：交互反馈（颜色变化、图片切换等）
- On Click()：点击事件
4.3 锚点与适配
锚点（Anchor）是UI适配的核心。说白了，锚点决定了UI元素相对于父级的位置和缩放方式。
锚点预设有几种常见模式：
- 左上角：适合小地图、头像
- 居中：适合标题、弹窗
- 拉伸：适合背景图、全屏遮罩
我建议你养成一个习惯：做UI之前先想好锚点。比如开始界面的“开始游戏”按钮，一般放在屏幕中央偏下位置，锚点就设成底部居中。这样不管屏幕是16:9还是18:9，按钮始终在相对位置。
4.4 UI事件监听
UI事件监听，说白了就是“用户点了按钮，代码怎么知道”。Unity提供了两种方式：
方式一：Inspector拖拽绑定
在Button的On Click()面板里，直接把脚本拖进去，选择要调用的方法。这种方式适合简单场景，比如点击开始按钮加载场景。
方式二：代码动态绑定
用代码添加监听器，更灵活。示例：
using UnityEngine;
using UnityEngine.UI;
public class StartUI : MonoBehaviour
{
public Button startButton;
void Start()
{
startButton.onClick.AddListener(OnStartClick);
}
void OnStartClick()
{
Debug.Log("开始游戏！");
// 加载游戏场景
}
}我个人更推荐第二种方式。为什么？因为方便管理。所有事件绑定写在同一个地方，后期改逻辑不用到处找Inspector里的绑定关系。
4.5 制作开始界面
好，理论说完了，咱们动手做一个简单的开始界面。这个界面包含：
- 游戏标题（Text）
- 开始按钮（Button）
- 设置按钮（Button）
- 背景图（Image）
步骤很简单：
- 创建Canvas，渲染模式选Overlay
- 添加Image作为背景，锚点设为全屏拉伸
- 添加Text作为标题，锚点居中，字号设大一点
- 添加两个Button，锚点设到底部居中
- 给Button添加点击事件
嗯，这里要注意一点：按钮的层级。标题应该在背景之上，按钮在标题之上。如果层级乱了，按钮可能被背景挡住，点不到。
最后，别忘了给按钮添加点击音效。虽然这不是必须的，但加了之后用户体验会好很多。我一般会在Button的On Click()里再挂一个AudioSource.Play的方法。
好了，这一章的内容就到这里。UI系统入门其实不难，关键是理解Canvas、锚点、事件监听这三个核心概念。下一章咱们会深入讲UI动画和特效，到时候你会看到UI系统更酷的一面。