零基础入门 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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Windows Community

Windows 8.1 应用再出发 - 视图状态的更新

本篇我们来了解一下Windows 8.1 给应用的视图状态带来了哪些变化,以及我们怎么利用这些变化作出更好的界面视图。 首先我们来简单回顾一下Windows 8...

28960
来自专栏知道一点点

【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的表格</title> <link hr...

12220
来自专栏专业duilib使用+业余界面开发

Duilib技巧:背景图片平铺

28680
来自专栏微信小开发

五分钟掌握微信小程序轮播图

从公共库v1.4.0开始,change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下: autoplay 自动播放导致 swip...

24060
来自专栏前端侠2.0

转:为什么 $("a").click()无效

我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久。前段时间的一次发呆,冒出了新的想法,于是就动手进行了测试。

57530
来自专栏一“技”之长

Bootstrap响应式前端框架笔记五——按钮

    Bootstrap中预设了default,primary,info,warning,danger和link6种按钮风格,示例如下:

9020
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

24760
来自专栏自动化测试实战

HTML第一课——基础知识普及【2】

22560
来自专栏猛牛哥的博客

快手( AAuto Quicker ) v6.5.06更新记录

14130
来自专栏AndroidTv

前端入门2-HTML标签声明正文-HTML标签

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

20920

扫码关注云+社区

领取腾讯云代金券