您当前的位置: 首页 >  ui

苍狼王unity学院

暂无认证

  • 0浏览

    0关注

    305博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

UGUI_03_补充之_Image的属性(image type这个属性simple、Sliced、tiled、filled样式详解)

苍狼王unity学院 发布时间:2019-08-06 14:51:23 ,浏览量:0

image的属性主要是讲image type这个属性。Simple、Sliced、Tiled、Filled 1、simple样式 单个显示,sprite将直接显示在图片控件中,默认情况下,如果图片控件的大小与sprite不一致时候,后者将经过拉伸来符合前者的大小。

2、Sliced属性。 关键字:九宫切图! 2.1使用背景:如图所示,比如一个按钮经过拉伸以后,它的边框跟着放大缩小,就会失真了,这种情况下就需要使用九宫切图了,将中间这一块切出来,这样不管怎么放大缩小,它看起来都不会显的失真。 在这里插入图片描述

在simple的样式下放大图片会有失真的情况,这时候选择Slider模式,然后找到这图片的sprite然后点击Sprite Editor会弹出一个编辑界面,然后可以移动里面的border形成一个九宫格(如下图)。再点击编辑界面里的Apply就会看到scene面板里原来失真的图片会变的清晰了,而且无论怎么样移动或者缩放,四个角都不会失真。(和NGUI里的sprite的编辑是一样的)。这就是Sliced的属性。

在这里插入图片描述九宫格作用:当我们用它来做背景时候,4个角不会被拉伸,左右的边框只会上下拉伸,上下的边框只会左右拉伸,只有中间这一块才会进行拉伸填充。 效果如下,不管怎么拉伸,都不会失真,因为边框已经被切掉了, 在这里插入图片描述

如何去掉九宫切图:将Border全部设置为0即可。

3、然后就是tiled属性, 这个属性就是平铺,为了使此Sprite填满整个图片控件,就会在保持sprite尺寸不变的前提下不断重复,像铺地板一样,如下图。 在这里插入图片描述

4、最后一个filled。 用来显示图片当中的某一部分的,可用来作技能冷却效果, FillMethod表示以什么方式进行切割,其中 有水平方式、垂直方式,90、180、360度圆方式进行切割。 FillOrigin表示从什么地方开始切割,其中有上、下、左、右几种方式。 FillAmount表示切割哪一部分,0表示不显示,1表示全部显示。 在这里插入图片描述

关注
打赏
1665389160
查看更多评论
立即登录/注册

微信扫码登录

0.0384s