其实Unity自带的GUI就可以做进度条，但是这次小伙伴甩给我个问题，Unity的GUI关于不同比例的自适应问题还是蛮纠结的，所以能不能不用自带的GUI，用其他方法做个时间条，于是查了下资料，用shader简单实现了下。

·准备工具

1）要动态变化的时间条.png

 http://s5/mw690/001RbVVSzy6RCP60LZya4&690

2）时间条底层.png

 http://s10/mw690/001RbVVSzy6RCP5Yy9ze9&690

1.新建三个plane（cube也可以，我这个例子用的cube），命名为timeLine、TimeLineButtom，alphaMask，

2.新建一个shader来满足我们需要的遮挡效果，代码如下

Shader "CS_TimeLineShader" 

{

SubShader{

ColorMask 0

Pass {}

}

}

3.新建三个Material并分别绑定到上述三个物体，并把准备好的图片放到对应名字材质上。TimeLine和TimeLineButtom这两个的shader选择Unlit/Transparent。

4.alphaMask材质的shader选择我们新建的这个，图片就不用加了。

5.修改三个plane的Layer，保证Timeline与alphaMask在一层（此处命名为maskLayer），TimeLineBottom单独一层（TimeLineBottom层）

至此，三个演员就设置好了，如图所示

  http://s11/mw690/001RbVVSzy6RCPpglRM0a&690

把它们放在场景里就是这个样子。（按显示顺序放好：alpha在最前面，其次TimeLine，最后TimeLineButtom）

 http://s11/mw690/001RbVVSzy6RCPtfzp89a&690

6.最后我们新建一个camera，让这个camera只能看到我们的maskLayer层

 http://s5/mw690/001RbVVSzy6RCPwySPid4&690

而我们的主相机（这里默认Main Camera）则不要看到maskLayer层

 http://s13/mw690/001RbVVSzy6RCPyRaYQfc&690

6.好啦，让我们沿X轴拖动一下alphaMask，在Game看看发生了什么

http://s12/mw690/001RbVVSzy6RCPC65759b&690

成功，哦也~

接下来我们就可以用脚本改变alphaMask的position.x，从而实现我们想要的时间条or血条的自动显示，这个看个人需求啦，没什么难度就不举例了~

以上~