UGUI系列——Image应用

UGUI系列其他博文，可通过导航帖查看

Image就是UI中最常用的了

1.Seource Image

它的类型是Sprite，是unity内的图片格式

2.Image Type

图片类型，在Source Image赋值后出现

1）Simple

默认选项，就是Image显示为一张图片，图片会在rect范围内显示，恢复图片的默认尺寸，直接按下 Set Native Size

2）Sliced

切图需要设置图片的属性
首先，需要编辑图片，按下 Sprite Editor

你可以看到边上的小点吧，那个是用于九宫格切图的线，你把鼠标停在边上就能拖出一条绿色的线

像这样

1,3,7,9四个区域不会被拉伸
Image Type选成Sliced，就会显示成这个样子，除了四个角，其余部分都被压缩了

这个时候还有一个属性 Fill Center，它是控制图片是否显示切图编号5那块的内容，也就是不勾选的化，图片就是个空心的

3）Tiled

这个模式很好理解，就是平铺的

但是，它的Souece Image赋值成一个用九宫格切过的图的时候，样子就比较有意思了

这个时候它同样有Fill Center这个属性，它可以用于制作只需要边缘平铺的情况

4）Filled

它这个填充的模式比较有意思

Fill Method:用来选择实现效果的方式
　　Horizontal:水平
　　Vertical：垂直
　　Radial 90：以图片某一角为圆心
　　Radial 180：以图片某一边中心点为圆心
　　Radial 360：以图片中心点为圆心
Fill Origin:用来选择实现效果的起点
　　Bottom Left：左下角
　　Top Left ：左上角
　　Top Right：右上角
　　Botttom Right:右下角
Fill Amount:这个填充量就是图片按照上面选项实现出来的覆盖率，这个一看效果就明白了
Fill Amount = 0.8

Fill Amount = 0.4

特别是Radial 360可以用来实现技能CD的效果

我会在我的公众号上推送新的博文，也可以帮大家解答问题
微信公众号 Andy and Unity 搜索名称或扫描二维码

希望我们能共同成长，共同进步