引子无处不在的它请你现在闭上眼睛回想任何一款玩过的游戏界面。那铺满整个屏幕的登录背景、角色头顶那条鲜红的血条、背包里一格格的物品图标、按钮上那层温润的底色、技能冷却时那圈缓缓扫过的遮罩、加载时那条一点点填满的进度条……你有没有发现一个惊人的事实——这些五花八门、形态各异的东西追根究底竟然大多是同一个控件画出来的。它就是Image图像。如果把 UGUI 的世界比作一幅画卷那么 Image 就是那位最勤恳、最全能、也最不知疲倦的画师。它承担了界面上绝大部分可视化的重任——凡是需要在屏幕上显示一张图片的地方几乎都有它的身影。它是 UI 里当之无愧的劳模是你学习 UGUI 时第一个必须彻底吃透的基础显示控件。今天我们就来好好认识这位画师看看它手里那支画笔究竟藏着多少玄机。一、画师的第一件事得先有画稿任何一位画师要作画第一步是什么是得先有一张画稿。对于 Image 来说它的画稿就是——Sprite精灵图。这是理解 Image 的第一个关键点Image 组件本身并不生产图案它只是负责把一张已有的图片显示到界面上。那张被显示的图片就叫 Sprite。打个比方Image 就像一个画框而 Sprite 就是框里的那幅画。画框本身是空的、通用的你往里塞一幅山水画它就显示山水你换一幅人物画它就显示人物。同一个 Image 组件通过更换它的 Sprite就能显示千变万化的内容。这个设计带来一个极大的便利——动态换图。想象一个装备栏同一个 Image 格子玩家装上了宝剑就显示宝剑图标换成了盾牌就显示盾牌图标。我们根本不需要为每种装备都做一个格子只需要一个 Image在合适的时机把它的 Sprite 换掉即可。所以当你拖出一个 Image 却发现它是一片空白时别慌——那只是你还没给这个画框塞进画稿而已。给它指定一张 Sprite画面立刻就有了。二、给画上色颜色的魔法有了画稿画师还有一支神奇的画笔能给整幅画统一上色——这就是 Image 的Color颜色属性。这里有一个很多新手会忽略的精妙机制Image 显示出来的最终颜色是原图颜色与Color 属性相乘的结果。这话听起来有点抽象我们用实例来体会如果你的原图是一张纯白的图标把 Color 设成红色那么显示出来的就是红色的图标。因为白色乘以任何颜色都等于那个颜色本身。这就是为什么很多 UI 图标素材要做成纯白的——因为白色是最听话的底色你想让它变成什么颜色改一下 Color 就行。如果把 Color 设成灰色整张图就会变暗仿佛蒙了一层阴影——这常被用来表现按钮的禁用状态。如果原图本身就是彩色的那么 Color 会在它的基础上做叠加调制产生偏色效果。除了红绿蓝三个颜色分量Color 还藏着一个极其常用的第四分量——Alpha透明度。透明度掌管着这幅画的通透程度。Alpha 拉满图片完全不透明Alpha 归零图片彻底隐形调到中间图片就变得半透明能隐约看到它身后的东西。这个小小的透明度用处大得惊人。淡入淡出的动画、半透明的遮罩层、渐隐渐现的提示文字……背后往往就是在悄悄地调节这个 Alpha 值。一位懂得玩转颜色与透明度的画师仅凭一支画笔就能变幻出无穷的视觉花样。三、画师的四种作画手法如果 Image 只会老老实实地把一张图铺在框里那它还称不上全能。真正让它封神的是它拥有的四种截然不同的作画手法——也就是 Image Type图像类型。同一张画稿用不同的手法去处理能呈现出完全不同的效果。让我们逐一领略。手法一Simple简单——原原本本地画这是最朴素、最直接的一种手法把整张图完完整整地铺进画框里。画框多大图就被拉伸或压缩到多大一丝不苟地填满整个区域。这种手法适合那些内容完整、不希望被切割的图片——比如一张完整的插画、一个角色的立绘、一个形状固定的图标。你要什么样的图它就原原本本地给你呈现什么样的图。它的特点是简单可靠但也有一个软肋如果画框的宽高比例和原图不一致图片就会被拉扯变形。一张方形的头像被塞进一个长条框里就会被压得又扁又长惨不忍睹。所以用 Simple 手法时要留意让画框的比例尽量贴合原图。手法二Sliced九宫格——聪明地拉伸这是四种手法里最巧妙、也最能体现智慧的一种专门用来解决 Simple 那个拉伸变形的难题。想象一下你要做一个按钮的背景框。这个框有四个圆润的圆角、四条笔直的边、中间一大片纯色区域。现在问题来了按钮有大有小你总不能为每种尺寸的按钮都单独做一张背景图吧如果用 Simple 手法直接拉伸那四个精致的圆角就会被拉成难看的椭圆——因为拉伸是无差别的连不该拉的圆角也一起拉变形了。Sliced九宫格手法的智慧就在于它像用一把井字刀把整张图切成了九块——四个角、四条边、一个中心。然后它遵循一套聪明的规则来拉伸四个角绝不拉伸永远保持原样。于是圆角始终圆润精致。上下两条边只做横向拉伸不做纵向拉伸。左右两条边只做纵向拉伸不做横向拉伸。中心那块横竖都拉伸负责填满剩余的大片区域。这么一来无论你把按钮拉多大多小它的四个角始终完美四条边始终清晰只有那些本来就该拉伸的部分在伸缩。一张小小的九宫格图就能变幻出任意尺寸的漂亮边框。这就是为什么游戏里成千上万个大小不一的按钮、对话框、面板往往共用寥寥几张背景图——九宫格这个手法用极小的成本撑起了千变万化的界面堪称 UI 制作中最经济实惠的智慧。手法三Tiled平铺——重复地盖章如果说九宫格是聪明地拉伸中心那么Tiled平铺手法就是重复地铺满中心。它不去拉伸图片而是像盖印章一样把图案一个挨一个地重复排列直到填满整个区域。这种手法特别适合那些有规律、可重复的纹理——比如砖墙、草地、格子背景、木板纹路。你只需要提供一小块纹理图Tiled 手法就能像铺瓷砖一样把它无缝地铺满一整面墙那么大的区域而且纹理的清晰度和大小始终保持一致绝不会因为区域变大就变得模糊或拉长。盖章式的重复让一小块素材爆发出覆盖大片区域的能量。手法四Filled填充——像钟表一样逐渐显现最后这种手法是四种里最动感的一种也是玩法最丰富的一种——Filled填充。它的核心能力是让图片按照一定的方向和比例一点点地显现或消失。你一定见过它的杰作技能冷却技能图标上那圈灰色的遮罩随着冷却时间流逝像钟表指针一样一点点扫过、逐渐消退直到技能重新可用。血条、蓝条那条随着数值增减而横向填充或收缩的血量条。加载进度条一点点从左到右填满的进度指示。环形计时器像饼图一样随着时间一格格填满或清空的圆环。这些效果本质上都是 Filled 手法在工作。它提供了多种填充方式——可以从左到右横着填、从下到上竖着填、还能像时钟一样绕着圆心转着填。你只要控制一个从 0 到 1 的填充量数值图片就会随之呈现出对应比例的显现效果。把这个填充量和游戏数据挂钩——比如把它绑定到当前血量除以最大血量上——血条就活了把它绑定到技能冷却进度上冷却动画就活了。Filled 手法是无数动态 UI 效果的幕后功臣。四、画师的两个隐藏开关除了四种作画手法Image 这位画师身上还藏着两个不起眼、却很关键的隐藏开关用好了能省不少事。开关一Raycast Target射线目标——我接不接受点击还记得我们讲过的 EventSystem 那台射线检测仪吗它发射射线检测点击落在了哪个 UI 上。而一个 UI 能不能被射线检测到就由这个Raycast Target开关决定。开关打开这张图片能接收点击射线一碰到它就会停下。按钮的背景图必须打开它否则按钮就点不动了。开关关闭这张图片对射线透明射线会直接穿过它去检测后面的元素。这个开关看似不起眼实则暗藏性能玄机。界面上那些纯粹用来装饰、根本不需要点击的图片——背景、花纹、纯展示的图标——如果它们的 Raycast Target 都开着射线检测时就得挨个去问它们是不是点到你了白白增加了计算负担。一个良好的习惯是把所有不需要交互的图片都关掉 Raycast Target。这样射线检测时就能跳过它们界面响应更轻快。这是 UI 性能优化里一个简单却有效的小技巧。开关二Preserve Aspect保持比例——别把我拉变形前面说过Simple 手法有个软肋——图片会被画框拉扯变形。而Preserve Aspect保持宽高比这个开关就是专门来解决这个烦恼的。打开它图片就会始终保持自己原本的宽高比例绝不会被拉扁或压长。即使画框的比例和图片不一致图片也只会在框里居中显示宁可四周留白也绝不变形。对于头像、商品图、成就图标这类绝对不能变形的内容打开这个开关就再也不用担心它们被拉成哈哈镜里的样子了。五、为什么它是基础中的基础聊了这么多我们来给这位画师做一个总结——为什么说 Image 是 UGUI 里基础中的基础是每个初学者必须首先攻克的堡垒第一因为它无处不在。前面开篇就说了界面上大部分可视元素都是它画出来的。背景、图标、边框、进度条、装饰……一个界面拆开来看密密麻麻全是 Image。掌握了它你就掌握了界面视觉的半壁江山。第二因为它是许多复杂控件的零件。你以为按钮是一个独立的东西其实按钮的背景就是一个 Image。你以为滑动条是一个整体它的滑轨、它的填充部分也都是 Image。许多看起来高级的 UI 组件拆开来看内部都由一个或多个 Image 拼装而成。理解了 Image你才能理解那些复杂控件的骨肉。第三因为它以简驭繁。一个小小的 Image通过更换 Sprite、调节 Color、切换四种 Type、拨动几个开关就能变幻出千姿百态的效果——从静态的插画到动态的进度条从固定的图标到自适应的边框。它用最少的概念覆盖了最广的需求这正是优秀基础组件的标志。第四因为它教会你 UGUI 的核心思维。通过学习 Image你会自然而然地接触到资源与显示分离Sprite 与 Image、“数据驱动视觉”数值控制填充、“性能意识”射线开关这些贯穿整个 UGUI 的核心思想。它是一扇门推开它你就走进了 UI 开发的整个世界。六、尾声最朴素处见真功夫我们花了很长篇幅去解剖这个看似平平无奇的 Image 控件。现在回头再看才发现这位画师远比想象中深邃。它平凡——不过就是在屏幕上显示一张图而已简单到一句话就能说清。它又不凡——一张画稿Sprite加一支画笔Color配上四种作画手法Type和两个隐藏开关就足以撑起整个界面的视觉世界。它安安静静地趴在每一个界面的每一个角落从不张扬却无处不在。背景是它铺的图标是它画的边框是它撑的血条是它填的按钮的底色是它上的加载的进度是它一点点推进的……你所看到的界面之美很大一部分都出自这位沉默画师之手。学习 UGUI很多人急着去研究那些花哨的高级组件、炫酷的特效动画。但真正的老手都明白一个道理最朴素的地方往往最见真功夫。把 Image 这位最基础的画师彻底吃透——搞懂它的 Sprite、玩转它的 Color、精通它的四种 Type、善用它的每一个开关——你的 UI 功底就有了最坚实的地基。因为一切绚烂的界面都是从这最朴素的一张图开始的。