码迷,mamicode.com
首页 > 其他好文 > 详细

UGUI之Image使用

时间:2015-10-02 14:50:32      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:

顾名思义:Image就是用来显示图片的

Image中Image组件中有一个重要的熟悉:Image type

技术分享

 

当作UI的时候。很多时候会用到图片做背景

 

比如你把图片放大。你会看到边框就失真了。即变得模糊了,即图片变大。边框也变大了。所以就模糊了

 

来看看这几个属性的不同用法:

添加一个Image。并给Source Image赋精灵,默认是Simple属性,

图片默认大小:

技术分享

当图片放大,图片会变得模糊

技术分享

 

所以这是不允许的。

一般我们不希望图片的边框跟着图片一起放大缩小,那怎么办呢。

这里就可以使用九宫切图

这时候会用到Image type的第二选项:Sliced

当选择Sliced的时候。下面会提示警告:说这个图片没有边框

技术分享

 

首先把图片切成九宫图

选中图片,Sprite Editor

技术分享

 

拖动绿色的点开始切图

技术分享

 

 

技术分享

 

其实也就是改变了Border

技术分享

 

 

这样就分成了9

那么这么切分成9格有什么好处呢。当我们利用它来做背景图片的时候,

14个角不会被拉伸

2:左右边框只会上下拉伸,

3:上下边框只会左右拉伸

只用中间那部分才会进行拉伸填充

 

现在设置完成后 Apply一下

 

在视图中看效果

 

 

技术分享

 

记住:类型一定要是九宫格类型

技术分享

 

 

 

Tiled类型

选择Tiled你 会发现

技术分享

 

Tiled其实就是按照当前图片的大小进行平铺总个空间

 

 

Filled类型

Filled是用来显示当前图片的某一部分的。默认呢。是全部显示(Radial 360)

 

技术分享

 

 

Radial 360表示以圆的方式进行切割

Fill Amout表示切割哪一部分

 

用这个可以做技能释放

 

UGUI之Image使用

标签:

原文地址:http://www.cnblogs.com/nsky/p/4852179.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!