unity3d学习笔记（九）--NGUI制作英雄和怪物的头像和血条

本系列文章由Aimar_Johnny编写，欢迎转载，转载请标明出处，谢谢。

http://blog.csdn.net/lzhq1982/article/details/12710797

上一篇讲了NGUI如何制作游戏界面，这一篇来点干货，重点讲NGUI制作头像，血条。先上一张图。

OK，这个就是我实现后的结果。先看看英雄的头像血条部分。

看图说话，我的英雄头像和血条蓝条是在左上角绘制的，所以这些UI都绘制在了锚点LeftTop部分，过程是：先增加一个锚点，我起名Anchor-LeftTop，然后在Inspector面板上找到UIAnchor脚本，Side那里选择TopLeft。

锚点制作完成，然后在锚点下创建一个Panel，命名为HeroBase，我将所有的英雄头像血条蓝条都绘制在这个面板上，这样有益于统一管理，比如我觉得头像位置不好，我移动这个面板就可以了，不用头像血条什么的都重调。然后我要在这个面板上加多少元素呢，如上图，HeroBlood（血条），HeroMana（蓝条），Label（英雄名字），Sprite(heroHead)（头像），Sprite(heroHeadBox)（头像背景），Sprite(heroName)（名字背景），就这些。

我用到的所有图素都用NGUI的Atlas Maker打成了一张图，然后从中选择自己需要的，这个和cocos2d的spriteBatchNode类似，具体怎么用可以参考雨松大神的这篇文章：NGUI研究院之Sprite精灵与精灵动画的使用（二），我这里就不介绍了。先说那几个sprite，相对简单一些，选择NGUI->Open the Widget Wizard，设置如下图所示：

Atlas选你刚建的那个Atlas，用不着字体，Template选Sprite，然后点Sprite会出那个Atlas里的所有图片，选一张你需要的，最后AddTo你要加的面板上就可以了。然后你会在你的Game Scene上看到，调整它到你想要的位置，Unity的可视化编辑太方便了。这里我的头像用的是《时空领地》里的露娜的头像，再一次宣传一下，一款很不多的单机游戏哦，哈哈，sprite很简单，这里重点说一条，就是有关sprite的屏幕显示的前后顺序，如果图素是来自于一个Atlas里的，那么可以通过调整UISprite下的Depth来调整前后遮挡关系，数值越大越在上面，如果不是同一个Atlas里的资源，那调Depth不管用，Unity也会提示你，这时候可以通过调translate的Z值来调整前后。

下面是本篇的重点，血条和蓝条。

我的血条蓝条是用NGUI的Slider做的，选择NGUI->Open the Widget Wizard，我这里的Atlas是用NGUI自带的Fantasy Atlas，找不到的可以在这里找：Project->Assets->NGUI->Examples->Atlases->Fantasy，里面选蓝色小方块的Fantasy Atlas，这是prefab，然后自行拖到那个Widget Tool上的Atlas处。剩下的设置如下图：

Empty就是背景图素，就是没有任何填充的时候的框的图素，Full就是前景，填充满的时候的图素。点击Add To，就会创建一个Slider的控件，其下包含背景，前景和sprite，sprite不用，删掉。然后看背景部分，把scale那里调成长方形，例如我把x调成了200，y是30，然后UISprite部分设置如下：

先看那个Color Tint，是背景框的颜色，默认白色，看我最开始的那张图，我希望即使血条空了漏出后面的框，也是有透明红框的效果，所以这里我设置成了淡红，旁边那个小笔是个吸管工具，你点它可以在界面上提取任何颜色，很方便，Copy是可以复制当前颜色，会在Clipboard中体现出来，当在另一个同样的设置中也想用这个颜色时，点击Paste就可以了，复制粘贴嘛。

重点是下面的Sprite Type，如果用默认的Simple，你会发现你这里是很难看的有黑框的原始图素，选Sliced是那种水平拉伸的图素，选Tiled是垂直的一格一格的图素，适合从上到下进度的那种，Filled选项，是设置那种需要转圈进度的方式，你可以都试一下，我们这里选Sliced。

同理设置前景，颜色要用大红，效果就出来了，然后选择那个Slider父控件，我这里是HeroBlood，我们看一下它的UISlider部分：

那个Value就是我们用来显示进度的百分比，最大为1，你可以拖动它后运行一下看看效果。那个Steps我不知道怎么用，默认就好了，Direction那里有必要说一下，咱们这里是水平的，如果你之前Sprite Type那里选的Tiled，那这里应该选垂直。

好了，看看用法，用法超级简单，你也可以研究一下它的UISlider脚本，里面有个参数是sliderValue，对应的就是上图那个Value，只要改变它就可以了，绘制部分不用你管，它的UISlider里面的Set函数都处理好了，所以你只要像下面这样写一句代码就可以了。

[csharp] view plaincopy

1. bloodSlider.sliderValue = (float)curHP / MAX_HP;  

不用我解释了吧。

在血条上加个数值吧，这样更直观一些。看上面我的slider截的图，我在slider下加了个Label，选择NGUI->Open the Widget Wizard，Atlas无所谓，Font选NUGI自带的Fantasy Font，它也在上述的Fantasy文件夹下，设置如下图：

然后调整它的位置到血条上，Depth调整到最前面。

用法也简单，直接上代码吧：

[csharp] view plaincopy

1. bloodText.text = string.Format("{0}/{1}", curHP, MAX_HP);  

只要是进度条都可以像上面这么做，怪物的头像血条也是这种方法，我这里就不赘述了。下一篇我重点讲一下NGUI如何制作中文字体。好累，终于写完了，哈哈。