slider制作经验条／血条／遮罩

Posted 2020-10-08 萌新小L

今天想实现一个经验条的制作，但是使用slider一直做起来都有些问题：

1.在自己添加的slider组件上放置full rect 和handle rect这两个属性的时候，图片会被拉伸

2.在改变slider的value时，图片缩放大小达不到指定幅度

3.如何在图片上添加一个遮罩，通过修改遮罩的大小来改变经验条的大小

一、图片拉伸问题：

　　应该是手动添加slider组件导致的问题，我的解决方案是全删掉，重新添加一个做好的slider预制进来，然后在做好的预制上进行修改，不过要调整好包括full rect和handle rect还有slider本身的大小，最好都调整成一致的，然后把对应的图片替换成已经制作好的美术资源。

　　p.s.其中在修改里面填充条的时候，可能会因为图片的拉伸导致左右的纹理被拉伸，这个时候可以使用sprite的九宫格模式对图片进行修改。

　　当你把图片使用九宫格切开后，图片就会使用对应的拉伸规则进行拉伸，详细可以参照下面的教程进行学习。拉伸后注意要把image的格式设置成

　　九宫格教程在这里：http://www.unity.5helpyou.com/3258.html

二、图片缩放大小不够：

　　这个是你的full rect和handle rect共同导致的，只要把他们两个的大小调成一样的，应该就不会出现这种问题了
三、关于遮罩：

　　遮罩的话，我也是胡乱配置，然后就可以用了。。

　　因为遮罩肯定需要父子关系嘛，然后被遮罩的肯定就是内部的进度条，所以使用父物体进行遮罩的时候，我也使用了和进度条一样的sliced类型，并勾选了fill center，然后把这个父物体拖给slider的fill rect就可以用了。

　　关于遮罩，我也查了相关资料，在这：http://blog.csdn.net/u013015161/article/details/46038989

四、最后，关于我的slider配置信息大致如下：

层级视图布局：

slider组件

遮罩组件

实际效果：