UGUI用Slider制作经验条(血条)的方法

新建一个专门渲染UI的正交Camera


UGUI用Slider制作经验条(血条)的方法_第1张图片

修改Inspector板中的Projection,正交Camera和透视Camera(即一般创建的新Camera不做任何处理)的不同点在于正交没有近大远小的效果,只要在正交Camera的视野范围内,物体,不管距离Camera远近,大小都是一样的,而透视Camera会根据物体距离Camera的远近产生近大远小的效果


UGUI用Slider制作经验条(血条)的方法_第2张图片

创建Slider(滑动条)


UGUI用Slider制作经验条(血条)的方法_第3张图片

将整个画布拖到Camera下


UGUI用Slider制作经验条(血条)的方法_第4张图片

调整Canvas的Inspector,Canvas中的Render Mode可以设置Canvas的模式,第一种是设置Canvas永远在Camera最前端,第二种是用一个Camera来渲染整个Canvas上的UI,如果有多个Canvas,显示的层级关系先看Sorting Layer哪个层级高,如果一样再看Order in layer哪个层级高


UGUI用Slider制作经验条(血条)的方法_第5张图片

在Slider中删除Handle Slide Area,即是滑动条中的那个圆形拖动钮


UGUI用Slider制作经验条(血条)的方法_第6张图片

可以调节Slider的方向如下图


UGUI用Slider制作经验条(血条)的方法_第7张图片

把Background贴图换掉,并且自动适配原贴图大小


UGUI用Slider制作经验条(血条)的方法_第8张图片

调节Slider的Width和Height(和背景图一样大小),由于整个Slider的锚点都是根据Slider的大小决定的,如果不调整的Slider的大小,而只是还原了Background的大小,会出现整个Slider的锚点大小和Background的大小不适合,导致Fill Area不能和background完美适配


UGUI用Slider制作经验条(血条)的方法_第9张图片

然后调节background锚点对齐方式

原先是这样,底边对齐方式


UGUI用Slider制作经验条(血条)的方法_第10张图片

调整成这样,改成中心对齐方式,如果不改,会发现background和Slider的锚点位置始终不能对齐,导致最后的Fill Area会和Background脱离


UGUI用Slider制作经验条(血条)的方法_第11张图片

然后再将Pos X、Y、Z归零


UGUI用Slider制作经验条(血条)的方法_第12张图片

改变Fill贴图,这个就是填充整个滑动条后的UI


UGUI用Slider制作经验条(血条)的方法_第13张图片

注意此贴图必须先进过九宫格切过,由于这个UI是用来拉伸的,所以要在九宫格切上下两段是不会被拉伸的,中间那一段是用来拉伸的,这样可以保证这个拉伸UI在上下两头的清晰度可以得到保证,不会受到拉伸的影响


UGUI用Slider制作经验条(血条)的方法_第14张图片

现在调节Silder的Value就可以看见经验条上升或下降情况


UGUI用Slider制作经验条(血条)的方法_第15张图片

将中间的调粗一点,right和left可以调节UI的宽度,top和bottom可以调节拉伸的最高和最低范围


UGUI用Slider制作经验条(血条)的方法_第16张图片

当然也可以调节一下最下位置和最上位置


UGUI用Slider制作经验条(血条)的方法_第17张图片

你可能感兴趣的:(UGUI用Slider制作经验条(血条)的方法)