Unity NGUI弧形血条的制作

　　unity版本：4.6 NGUI版本：3.6.

　　（转载请注明参考链接及作者）

　　参考链接：http://www.cnblogs.com/louissong/p/3841656.html，作者：博客园 LouisSong

　　

　　很多情况下，我们需要做血量条来显示对象的血量，条状的血量条很容易，直接用NGUI里面的进度条就可以实现，但是有时候我们需要在一些地方做弧形的血量条，下面介绍弧形血量条的方法。

1、首先你需要一张弧形血量的图片，导入到NGUI的Altas中，NGUI图集Altas制作参考：http://www.cnblogs.com/vitah/p/3855982.html，下面已经导入了两张表示弧形血量的图片，如下所示：

2、导入图片后可以开始血条的制作，血条的显示可以用一个进度条或者两个Sprite来表示，其实就是用两个Sprite来表示血量，一个表示当前血量，一个表示已损失的血量，进度条里的Background和Foreground实质就是如此，下面只以一个Sprite为例来说明：

　　在Camera下创建一个Sprite，选择导入的表示血量的Altas和Sprite，效果如下：

　　这里再介绍下Sprite的各种参数：

　　　　Type:

　　　　　  Smple:除了显示内容从图集里面获取外，其他都和Texture一样的绘制

　　　　　　Sliced：这个模式支持九宫格拉伸，让四个角落的图片不变型，点击Sprite右侧的Edit按钮可以进行Sprite数据的编辑，设置Border的值即可。

　　　　　　Tiled：瓦片填充，会平铺进行填充

　　　　　　Filled：这个主要用来做技能CD、进度条等用。FillDir设置填充的模式（360度扇形，水平，垂直等），Fill Amount是填充百分比

　　　　　　Flip：对Sprite进行翻转：水平、垂直、水平+垂直

3、为了能展示血条的增加和减少，Type肯定选择Filled不用多说，我们现在只是需要调节血条的填充模式即Fill Dir选项：

　　选择Horizontal和Vertical可以看到改变Fill Amount的值的时候血条分别是从左到右和从上到下减少的，血条的边缘处会有一个斜角，如下图：

　　同样我们测试Fill Dir中的Radial90、180、360选项，可以很明显的看出NGUI里面Radial90是以矩形图片左下角的点为圆心减少和增加，Radial180是以图片矩形的底边中点为圆心，而Radial360是以矩形的对角线交点为圆心进行增减，Radial90和Radial180不必说，血条的边缘显示必定有倾角，而Radical360也会有倾角的存在，如下图：

　　4、事实上，我们需要的是以图片矩形的上边的中点为圆心来进行血条的增加和减少，这样才能保证边缘处的倾角美观一致，可以按如下方法制作：

　　把图片进行垂直翻转，即Flip选项设为Vertically，可以看到，图片已经翻转过来，这时候选择填充模式为Radial180，圆心仍然是矩形的底边中点，但图片已经翻转，可以看到这时候血条的边缘已经一致了，效果如下：

　　可以看到血条的边缘已经很美观了；

5、但是这时候，血条的显示已经翻转过来，原来的血条效果是成凹形的，现在变成凸形的了，可以改变Transform中的Rotation值再次翻转，使血条的显示和给定图片中的效果一致，如下图：

6、接下来，我们可以再按上述方式创建一个红色血条表示血量的减少，通过脚本控制它们两者的Fill Amount的值就可以用绿色表示当前血量，红色表示已损失的血量，在此不再赘述。

Github上代码

总结：

　　1、现在这种方式好像只能用于半圆形血条的显示效果，一定圆心角的弧长血条没有相应的美术资源没有测试过不太清楚；

　　2、原来的想法是叫美术出了一个上半环为透明的下半环为绿色的表示血量的正方形图片，然后填充模式用Radial360，类似以前实现技能CD效果的方法来做，但是在导入到Altas中Unity会自动把透明的部分给切掉，此方法失败。

　　如果有更好的方法或者疑问请留言，或者邮箱linw1225#163.com(#换成@)，谢谢~~~