【unity游戏开发入门到精通——UGUI】UI控件 —— Image图像控件

注意：考虑到UGUI的内容比较多，我将UGUI的内容分开，并全部整合放在【unity游戏开发——UGUI】专栏里，感兴趣的小伙伴可以前往逐一查看学习。

一、Image图片控件是什么

Image组件是UGUI中比较常用的组件，用来控制和显示图片。

除了背景图等大图（通常会使用我后面会讲到的RawImage控件），一般都使用Image来显示UI中的图片元素。

Image适合高频使用的小元素，通过打图集减少DrawCall 提高性能。因为Image依赖图集优化，适合小型UI元素（如按钮、图标）。多个Image共享同一图集时，Unity会自动合并Draw Call，提升渲染效率。但图集有尺寸限制（默认2048x2048），过大的纹理无法放入图集。

图集和Draw Call相关知识可以查看：【零基础入门unity游戏开发——2D篇】使用SpriteAtlas（精灵图集）打包图集，减少DrawCall提高性能

二、Image图片组件参数

1、Source Image：源图像

图片来源（图片类型必须是”精灵“类型）

2、Color：颜色

图像的颜色和透明度，在原图的基础上叠加

3、Material：材质

图像的材质（一般不修改，会使用UI的默认材质）

4、Raycast Target：射线目标

是否作为射线检测的目标（如果不勾选将不会响应射线检测，可以穿透当前控件点击到后面的控件）

5、Maskable：是否能被遮罩

是否能被遮罩（之后结合遮罩相关知识点进行讲解）

6、Image Type：图片类型（前面选择了Source Image 源图像才会显示）

这里的参数效果其实和我之前讲过的SpriteRendere组件类似，参考：【零基础入门unity游戏开发——2D篇】SpriteRenderer精灵渲染器组件

6.1 Simple-普通模式

均匀缩放整个图片

参数

（1）Use Sprite Mesh（使用Sprite网格）

勾选的话Unity会帮我们生成图片网格，记得要先把图片的网格类型设置为紧密设置才有效

（2）reserve Aspect（保持长宽比）

确保图像保持其原来尺寸拉伸

（3）Set Native Size（设置原生大小）

设置为图片资源的最佳默认原始大小

6.2 Sliced-切片模式：9宫格拉伸，只拉伸中央十字区域

要打开精灵编辑设置九宫格，具体操作参考：【零基础入门unity游戏开发——2D篇】SpriteEditor图片编辑器

拉伸只有中间的十字区域产生了缩放，四个角不变化，适合做对话框，UI背景图等等。如下：

参数

（1）Fill Center：中心填充，不勾选，图片会掏空十字中间区域，变为空心

（2）Pixels Per UnitMultiplier：每单位像素乘数，一般不修改

6.3 Tiled-平铺模式：重复平铺中央的十字部分

参数

参数和前面Sliced-切片模式效果一样

6.4 Filled-填充模式

可以用于做血条、技能冷却cd、进度条等

参数

• Fill Method：填充方法
• Fill Origin：填充原点
• Fill Amount：填充量
• Clockwise：顺时针方向

三、Image图片代码控制

• 获取当前脚本所附加的 GameObject 上的 Image 组件

Image image = this.GetComponent<Image>();

• 设置为 Image 的显示图像

// 从资源文件夹中加载名为 "Sprite1" 的 Sprite，并将其设置为 Image 的显示图像
image.sprite = Resources.Load<Sprite>("Sprite1");

• 设置为 Image 的宽高

(transform as RectTransform).sizeDelta = new Vector2(200, 200);

• 是否进行射线检测

// 禁用该 Image 组件的射线检测，使其不响应用户的点击事件
image.raycastTarget = false;

• 设置Image的颜色

// 将该 Image 组件的颜色设置为红色
image.color = Color.red;

---

专栏推荐

地址
【unity游戏开发入门到精通——C#篇】
【unity游戏开发入门到精通——unity通用篇】
【unity游戏开发入门到精通——unity3D篇】
【unity游戏开发入门到精通——unity2D篇】
【unity实战】
【制作100个Unity游戏】
【推荐100个unity插件】
【实现100个unity特效】
【unity框架/工具集开发】
【unity游戏开发——模型篇】
【unity游戏开发——InputSystem】
【unity游戏开发——Animator动画】
【unity游戏开发——UGUI】
【unity游戏开发——联网篇】
【unity游戏开发——优化篇】
【unity游戏开发——shader篇】

完结

好了，我是向宇，博客地址：https://xiangyu.blog.csdn.net，如果学习过程中遇到任何问题，也欢迎你评论私信找我。

赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法，也欢迎评论私信告诉我哦！