专栏首页韩东吉的Unity杂货铺零基础入门 10: 编辑器下的UGUI Image

零基础入门 10: 编辑器下的UGUI Image

从这篇开始,最近的分享都将会以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杂货铺(DeveloperJimin),作者:Jimin

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-01-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 零基础入门 22: UGUI Panel

    今天要给大家分享的。。。可谓是,非常的简单啊,我甚至都在考虑要不要单独抽出一次当做分享内容 (・-・*),也有可能是我所有分享里文字数目最少的

    韩东吉
  • 零基础入门 11: 通过脚本设置UGUI Image

    因为默认的脚本是没有引入UnityEngine库的。所以当我们新创建了一个脚本后,在脚本上方加入UnityEngine的引用。

    韩东吉
  • 零基础入门 16: UGUI RawImage

    今天的内容会很简单,也会很短,分享一下UGUI的RawImage,那什么是RawImage呢?

    韩东吉
  • 扩展GridView控件——为内容项添加拖放及分组功能

    引言 相信大家对GridView都不陌生,是非常有用的控件,用于平铺有序的显示多个内容项。打开任何WinRT应用或者是微软合作商的网站,都会在APP中发现Gri...

    葡萄城控件
  • 跻身世界顶级AI项目:腾讯机器学习平台Angel从LF AI基金会毕业

    Angel 是腾讯的首个 AI 开源项目,于 2016 年底推出、2017 年开源。作为面向机器学习的第三代高性能计算平台,Angel 致力于解决稀疏数据大模型...

    机器之心
  • 解决移动端水平滚动使用justify-content显示不全问题

    如果把father里的justify-content: center;换成justify-content: space-between;或者justify-...

    吴裕超
  • Flex 布局教程:实例篇

    上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。 你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 ? 我只列出代码,详细的语法解...

    ruanyf
  • Flex 布局两篇教程之二

    我只列出代码,详细的语法解释请查阅《Flex 布局两篇教程之一》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。

    javascript.shop
  • css基础教程之flex布局

    二、flex-direction 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置

    老雷PHP全栈开发
  • iOS面试中被面试官问到的问题答案(一)

    2016-03-1016:30:14 发表评论 1,091℃热度 1.请你谈谈static和宏定义的区别。什么时候用static什么时候用宏定义。 让你声...

    timhbw

扫码关注云+社区

领取腾讯云代金券