从这篇开始,最近的分享都将会以UGUI组件的使用为主题,进行分享。
今天先来分享下在Unity编辑器里,UGUI Image的使用方法。
正题开始:
Image
Image组件是Unity里显示图片的组件,可以将Sprite类型的图片显示在Canvas下。
如下图,我先从桌面拷贝一张图片到项目内。
拷贝到项目内的图片,默认的类型是Texture。
Image组件是不支持使用Texture类型的贴图的。
下面我们再来创建一个Image
然后我们先不管刚导入进来的图片类型,我们尝试把名为IU的图拖动到Image上。如下图,我们发现无法拖动一个Texture类型的贴图到Image组件上。
然后我们将Texture的贴图类型修改为Sprite。
如上图,当我们把IU的图从Texture类型修改为Sprite类型后,就可以把这个图拖动到Image组件上了。
Image上图是有了,但是怎么感觉好像被压缩的这么严重?
接下来我们点击一下Set Native Size,设置成本地原始大小来看看变化。
如下图我们可以看见,默认的Image 的宽高是100*100,当我们点一下还原默认大小的时候,图片的宽高就变成了486*200的默认大小。这样显示起来就正常了。
我们去文件夹里看看这张图的默认大小是不是486*200呢?
这就是Image组件上设置贴图默认大小的功能。
然后我们来继续看看Image组件上的其他功能。
如下图,Color可以改变图片的颜色。
点击效果如下。
Material是指可以在Image上拖入一个材质球,来修改图片的显示。
RayCast Target。指的是是否接收射线检测。举个例子。在图片的后面,再放置一个按钮,如果前面的这张图片RayCast是勾选的,那么点击图片,后面的按钮是无法响应点击事件的,但是如果去掉Raycast,尽管图片盖在上面,按钮依然可以穿过图片,接收点击事件。
举例如。我们创建一个脚本,一个按钮,将按钮放到图片下面。如下图,我把按钮设置为黑色,并且完全被图片遮挡,当我们把图片的透明度调0的时候,就可以看到后面的按钮了。
然后我为按钮增加点击事件,点击按钮的时候输出一句日志。
如下图,我们运行后,先把图片隐藏,看看按钮正常情况下的点击事件。
动图可见,按钮点击是有日志的。然后我们再把图片显示出来。并且确保RayCast是勾选的。然后再次点击按钮,日志就无法输出了。
此时我们把图片上的Raycast勾选去掉。然后再次点击按钮。
这就是Image组件上Raycast的作用,不光是Image,UGUI里好多的UI组件,都有Raycast,作用都是一致的。
Image Type:图片类型。
图片类型分成几种,有最基础的普通类型Simple,还有Slice,Tiled和Filled。
Sliced的图片类型需要图形上有border支持。否则会提示:
Sliced这种图片类型,可以完美的支持九宫格。从一定程度上解决了重复图形不同尺寸的问题。
第三种类型是Tiled,平铺。
第四种类型Filled,填充,说下这个类型。
如上图,当图片的类型修改为Filled填充的时候,组件就发生了一些变化。实际上,Image组件里,这种类型可以被用在很多地方,比如说技能CD等等。那表现究竟是什么样呢?如下图。
效果很多,包括设置原点,设置填充的方式,顺时针还是逆时针,90度还是180或者360,水平还是垂直。等等。供大家使用。
关键点,就在于不同的表现形式,核心在于Fill Amount的值。0的时候最小,1的时候最大。0-1之间过渡的同时,图形显示发生变化。
下面的Clockwise就是设置时针的选项。
好了,Image在编辑器里的使用到这就结束了。
今天的内容不是很多,就是一个Image组件,不熟悉的可以打开Unity,创建一个玩一玩。
下篇分享,将通过创建代码,来实现对Image组件的使用。
本文分享自 韩东吉的Unity杂货铺 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!