新建一个专门渲染UI的正交Camera
修改Inspector板中的Projection,正交Camera和透视Camera(即一般创建的新Camera不做任何处理)的不同点在于正交没有近大远小的效果,只要在正交Camera的视野范围内,物体,不管距离Camera远近,大小都是一样的,而透视Camera会根据物体距离Camera的远近产生近大远小的效果
创建Slider(滑动条)
将整个画布拖到Camera下
调整Canvas的Inspector,Canvas中的Render Mode可以设置Canvas的模式,第一种是设置Canvas永远在Camera最前端,第二种是用一个Camera来渲染整个Canvas上的UI,如果有多个Canvas,显示的层级关系先看Sorting Layer哪个层级高,如果一样再看Order in layer哪个层级高
在Slider中删除Handle Slide Area,即是滑动条中的那个圆形拖动钮
可以调节Slider的方向如下图
把Background贴图换掉,并且自动适配原贴图大小
调节Slider的Width和Height(和背景图一样大小),由于整个Slider的锚点都是根据Slider的大小决定的,如果不调整的Slider的大小,而只是还原了Background的大小,会出现整个Slider的锚点大小和Background的大小不适合,导致Fill Area不能和background完美适配
然后调节background锚点对齐方式
原先是这样,底边对齐方式
调整成这样,改成中心对齐方式,如果不改,会发现background和Slider的锚点位置始终不能对齐,导致最后的Fill Area会和Background脱离
然后再将Pos X、Y、Z归零
改变Fill贴图,这个就是填充整个滑动条后的UI
注意此贴图必须先进过九宫格切过,由于这个UI是用来拉伸的,所以要在九宫格切上下两段是不会被拉伸的,中间那一段是用来拉伸的,这样可以保证这个拉伸UI在上下两头的清晰度可以得到保证,不会受到拉伸的影响
现在调节Silder的Value就可以看见经验条上升或下降情况
将中间的调粗一点,right和left可以调节UI的宽度,top和bottom可以调节拉伸的最高和最低范围
当然也可以调节一下最下位置和最上位置