新建一个专门渲染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可以调节拉伸的最高和最低范围
当然也可以调节一下最下位置和最上位置
网友评论