Image 图片与 UI 背景

🎯本节学习目标

• 掌握 Image 组件
• 掌握九宫格切片
• 掌握 Filled 填充

🚀课程导读

UI 的背景、图标、按钮底色都是 Image。本课把 Image 组件的核心功能讲透。

◆Image 基础

给 UI 上“画布”。

1. 【创建】Hierarchy 右键 → UI → Image，创建一张默认白色图片。
2. 【改图】Image 组件的【Source Image】槽里拖入一张 Sprite 图片（需 Texture Type=Sprite，第 39 课）。
3. 【颜色】Color：给图片染色（白色图可染任意色，是常用技巧）。
4. 【材质 Material】可加 UI 材质（渐变、描边等，进阶）。
5. 【Image Type 类型】
6. ① Simple 简单：整图缩放。
7. ② Sliced 九宫格：四角不变、中间拉伸（圆角/边框 UI 必备）。
8. ③ Tiled 平铺：图片重复填充。
9. ④ Filled 填充：按比例显示部分（血条/进度条的底层实现）。
10. 【Preserve Aspect】保持宽高比（防止变形）。
11. 【Raycast Target】是否接收点击（纯装饰图可关掉，避免挡住按钮）。

◆九宫格与填充实战

两个最常用的 Image 技巧。

1. 【九宫格】在 Project 选中 Sprite 图片 → Inspector → Sprite Editor 打开编辑器。
2. 在 Sprite Editor 里拖动四条绿线设置【九宫格边距】。
3. 设置后，把 Image Type 选【Sliced】：圆角/边框在缩放时不拉伸变形。
4. 返回场景：拉伸该图片，四角保持圆角、中间拉伸——做按钮背景超好用。
5. 【填充（血条）】创建 Image 作为血条背景，Source Image 用白色方块，颜色红色。
6. 再建一个子 Image 作为血条填充（绿色），Image Type 选【Filled】。
7. 【Fill Method】Horizontal；【Fill Amount】0-1 控制填充比例。
8. 代码控制血条：fill.fillAmount = hp / maxHp;（第 160 课完整血条）。
9. 【注意】九宫格需要 Sprite 本身带边框数据（Sprite Editor 设置）。

⚠常见错误与排查

★动手练习

✓本节小结

Image 已掌握。下一课学 Button 按钮。