-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

喜欢我的博客请记住我的名字：秦元培，我的博客地址是blog.csdn.net/qinyuanpei。

转载请注明出处，本文作者：秦元培， 本文出处：http://blog.csdn.net/qinyuanpei/article/details/40744781

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

        各位朋友，大家好，我是秦元培，欢迎大家关注我的博客，我的博客地址是blog.csdn.net/qinyuanpei。在11月份结束了全部的课程后，就意味着博主要开始找工作了，因为博主是非计算机专业出身，所以首先要完成本专业的实习，因此博主这段时间都在忙着寻找实习单位。在寻找实习单位的过程中，或多或少的接触了些从传统行业转型到互联网行业的企业，博主在感慨互联网行业深刻地影响到各行各业的同时对这个行业的本质进行了思考。互联网行业是一种具有技术属性、媒体属性和社会属性的服务行业，它通过为人们提供各种各样的服务来连接人和人、人和信息、信息和信息。互联网行业现在越来越不像是一个行业，相反它越来越像是一个社会，成功的互联网商业模式最终会在某一个环节实现与真实世界的接轨，因此互联网行业并不是以技术取胜，而是在于它找到了一种更好的方式来将虚拟世界和真实世界链接起来。可能因为长期研究技术形成的固定思维模式吧，博主此前一直认为技术才是互联网行业的核心，所以曾经在读李彦宏的《硅谷商战》这本书时，对于李彦宏在这本书中提出的"技术本身不是唯一的决定性策略，商战策略才是决胜千里的关键"这个观点并不是很认同，而此时此刻博主却深刻地认识到这一点，有信仰、有情怀、有技术固然可以让你将一件事情做好，可是如果想要将一件事情做成则需要考虑各种各样的因素。因为互联网行业面对的最终用户是人，只要是人，那么在传统行业里出现的问题都会遇到，即使你再喜欢宅在家里、即使你再不喜欢和人打交道，该面对的问题总是要去面对的。好了，这个问题我们先说到这里吧，我们今天的内容是使用NGUI来实现血条和技能冷却效果。首先我们来看看今天要实现的效果：

从这个演示中我们可以找到今天要实现的具体内容是游戏界面中的GUI血条和怪物头顶上的血条以及技能冷却效果的实现，我们这里将其分成血条和技能冷却两部分来为大家讲解，希望能对大家学习NGUI有所帮助，如果有不足之处，希望大家能够谅解啊。

       一、血条

       在前面的文章中博主曾经和大家分享过在Unity3D中使用NGUI的相关内容，那么今天我们就来继续学习如何利用NGUI在Unity3D中实现血条吧！在Unity3D中要实现一个血条是十分简单的。在博主之前的文章《Unity3D游戏开发之2D贴图实现血条组件》中博主介绍了并且实现了基于2D贴图的血条组件，这种方法的原理是前后叠加显示两张不同的贴图前景贴图和背景贴图，通过改变前景贴图的宽度就可以实现血条的效果了。在NGUI中，Slider就是这样的一种控件，因此我们可以使用Slider实现血条效果。首先我们在场景中创建一个Slider控件，如图：

这样我们就可以利用NGUI做出一个漂亮的血条效果了。接下来，我们重复这样的工作3次，最终可以设计出这样的效果出来：

整个UI界面是由一个背景图片(Sprite)和三个Slider组成，这样我们就实现了游戏中的界面搭建。Slider控件有一个最为重要的属性值叫做SliderValue，它是一个介于0到1之间的数值，表示Slider中滑块滑过的长度与总长度的百分比，我们这里正是使用这个属性值来显示血条中的血量。比如我们将玩家的总血量为100，则玩家血量的百分比就是玩家的当前血量与总血量的比值，我们只要将这个值赋给Slide控件的SliderValue就可以了。比如，我们可以用下面的代码来表示玩家受伤掉血：

			this.HPValue=this.HPValue-10;HPTrans.GetComponent<UISlider>().sliderValue=(float)this.HPValue/100;

这里HPValue顾名思义就是怪物的当前血量，HPTrans是血条(Slider)所在的Transform。在实际的设计中，怪物的总血量会根据怪物等级的不同而不同，因此我们最好将总血量保存到存档文件或者数据库中，这样我们就可以让血条根据玩家的血量的不同而变化了。大家可以注意到在前面的演示中，玩家受到怪物攻击时血量会减少。既然提到了血量的减少，那么我们就顺便说一下在某些游戏中设计的自动回血、自动回蓝。比如在《古剑奇谭2》游戏中，由于战斗模式被改成了即时制，所以玩家在游戏中的"气"不再依赖于通过在战斗中攻击敌人来获得，而是当玩家处于Idle状态时慢慢恢复。既然玩家受到掉血是将血量减少，那么自动恢复自然是将血量增加了，这一点我们不再说了。

       下面我们来说说游戏中怪物头顶的血条是如何实现的吧？和GUI中的血条不同的是怪物头顶的血条会跟随着玩家的移动而移动。这里我们首先要引入两个概念，即布告板(BillBoard)和HUD(抬头显示设备)。

        布告板简单的来讲就是场景中的一个四边形或者平面，它始终与相机的视线方向对其。布告板技术可以用来做什么呢？从游戏中的GUI到游戏中提示消息、场景中树木渲染等等，都会用到布告板技术。比如我们在玩经典的CS游戏时，当玩家按下E键时可以进行炸弹的拆除，此时游戏界面中会提示玩家相关操作，这就是布告板技术的一个应用场景。此外，在早期的3D游戏中，场景中的树木通常都是以平面的形式(纸片)来实现的，这样可以有效地减少游戏中渲染的数目，不过这样会降低游戏的表现力，这在博主玩过的《仙剑奇侠传三》等游戏中使较为常见的。

        而抬头显示设备则是一个从军事领域引申过来的游戏术语，它可以把游戏相关的信息以直观的方式显示在游戏画面上，同时不会影响玩家的正常视野内容，以便玩家可以随时了解那些最重要最直接相关的内容。抬头显示设备常见的应用场景有：RPG游戏里的生命、魔法、状态、行动力等，ACT游戏中的战斗统计、得分、精彩镜头、连击等。这里之所以要提到这两个概念主要是因为它们的技术实现具有相似性，基本上都会涉及2D坐标和3D坐标的转化等。这里怪物头顶的血条需要将Unity3D中的3D坐标转化为2D坐标，然后再将2D坐标转换成NGUI下使用的3D坐标。具体大家可以参考宣雨松的文章NGUI研究院之3D模型坐标转2D屏幕坐标-血条。那么，我们这里怎么实现呢？我们这里可以先利用NGUI制作一个血条的预制件，然后将其挂到怪物头顶的某个位置，然后保证怪物头顶的血条始终面向主摄像机即可。这在Unity3D中是相当的简单：

		HPTrans.LookAt(Camera.main.transform.position);

这样做出来的怪物血条会根据与摄像机距离的远近而显示不同的比例大小，博主觉得效果还是蛮不错的啊，呵呵。好吧，萌妹子再次被一群小怪给围攻了，我好残忍啊.......

      二、技能冷却

     技能冷却是在即时制游戏尤其是魔兽世界类游戏兴起以后出现的概念。所谓技能冷却是指从上一次使用完技能到本次技能使用开始的这段时间，即技能cd。我们举一个直观的例子就是在游戏界面中如果一个技能的图标被完全点亮，则表示该技能冷却结束，否则表示该技能正处于冷却状态，而只有技能冷却结束后我们才能再次使用该技能。我们以《古剑奇谭2》为例来讲解技能冷却，如图是该游戏实际的战斗画面

《古剑奇谭2》从游戏的制作理念上首次突破了国产单机游戏回合制的格局，不能不说是国产单机游戏制作史上的一次重大突破。大家可以注意到画面下方的技能栏，在这个技能栏中的技能此时都是处于冷却状态的，所以玩家此时是无法使用这些技能的，只有等技能冷却结束后才能使用。提及《古剑奇谭2》的战斗，博主还是忍不住要吐槽下，首先技能过于拖沓，玩家不得不停下来等待游戏中的主角将一套动作打完，而且更加让人无语的是玩家无法通过打断技能来中止技能，所以在玩这个游戏的时候博主大部分时间都处在一种乱按的状态(偷笑)，不过听着武器和敌人搅在一起噼里啪啦的声音博主觉得玩劲舞团同样是种不错的选择啊，哈哈。好了，不开玩笑了。下面我们就以在Unity3D中实现技能冷却效果为例来深入地探索技能冷却，首先我们先来了解下原理，技能冷却效果的实现需要两个NGUI控件来实现，即Sprite和FilledSprite两个控件。其中Sprite控件负责显示技能图片，FilledSprite控件负责显示技能遮罩。技能遮罩我们只需要选择一个灰色或者黑色的图片然后设置一定的透明度即可。FilledSprite控件可以让图片按照一定的方式来填充，这有什么好处呢？比如在很多游戏中，技能的冷却效果可以是从技能图片的底部向上填充或者是按照一定的速度进行顺时针/逆时针方向的填充。那么，对于这种需求我们就可以使用FilledSprite来实现。下面来看具体的做法：

接下来我们用一个空的游戏体将技能图标和遮罩包裹起来，这里我们做了三个技能图标，并将遮罩层图片的透明度设为150。好了，下面我们来关注下FilledSprite这个控件，我们注意到它有一个重要的参数Fill Dir即填充方向，在这里我们可以改变这个值实现不同的填充效果，我们这里就选择顺时针

360度填充。此外，这里有一个FillAmount的参数表示的是填充的比例，这是一个介于0到1之间的值，该值取1时表示完全填充，即整个遮罩层是显示出来的，此时表示技能正在冷却；该值取0时表示不填充，即整个遮罩层都是透明的，此时技能冷却结束。根据这样的原理，我们很容易实现下面的脚本：

		//如果没有处于冷却状态则进入冷却if(!isSkillCooling){ui_skillMask.fillAmount=1;isSkillCooling=true;}//如果处于冷却则开始计时if(isSkillCooling){ui_skillMask.fillAmount-=(1.0F/SkillCoolTime)*Time.deltaTime;if(ui_skillMask.fillAmount<=0.01F){ui_skillMask.fillAmount=0;isSkillCooling=false;}}

我们来看看实际的效果：

我们可以注意到技能冷却效果基本出来了，可是我们需要不是技能栏一遍遍地刷新啊，我们希望的是当技能冷却结束后，当玩家按下某些键位或者点击技能图标时实现相应的技能，当玩家释放技能技术后，技能栏重新开始冷却，基于这样的想法，在第一个脚本的基础上我们有了改进后的代码：

using UnityEngine;
using System.Collections;public class cdSkill : MonoBehaviour {//技能冷却时间为2.0spublic float SkillCoolTime=2.0F;//玩家释放技能的时间private float mSkillUseTime=0;//技能长度为1.5spublic float SkillLength=1.5F;//技能冷却遮罩private GameObject go_skillMask;private UIFilledSprite ui_skillMask;//是否处于冷却状态private bool isSkillCooling=false;void Awake(){//获取技能冷却遮罩层go_skillMask=transform.FindChild("SkillMask").gameObject;//获取UIFilledSpriteui_skillMask=go_skillMask.GetComponent<UIFilledSprite>();//绑定一个Click事件UIEventListener.Get(transform.gameObject).onClick=SkillEvent;}void Update () {SkillCooling();}void SkillCooling(){//如果没有处于冷却状态则进入冷却if(!isSkillCooling){ui_skillMask.fillAmount=1;isSkillCooling=true;}//如果处于冷却则开始计时if(isSkillCooling){ui_skillMask.fillAmount-=(1.0F/SkillCoolTime)*Time.deltaTime;if(ui_skillMask.fillAmount<=0.01F){ui_skillMask.fillAmount=0;isSkillCooling=false;}}if(mSkillUseTime<SkillCoolTime){mSkillUseTime+=Time.deltaTime;}else{mSkillUseTime=SkillCoolTime;}}void SkillEvent(GameObject go){if(mSkillUseTime==SkillCoolTime){Debug.Log("在这里加入具体的技能效果");mSkillUseTime=0;isSkillCooling=false;}}}

好了，这样我们就实现了今天文章中的两个内容：血条和技能冷却。希望大家喜欢啊，这段时间博主写代码的时间真心不多啊，因为快毕业了......最后大家来一起欣赏下博主做的这个小游戏吧！特效场景神马的，请直接无视！........

每日箴言：人最大的对手，往往不是别人，而是自己的懒惰。你必须拼尽全力，才有资格说自己运气不好。

       

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

喜欢我的博客请记住我的名字：秦元培，我的博客地址是blog.csdn.net/qinyuanpei。

转载请注明出处，本文作者：秦元培， 本文出处：http://blog.csdn.net/qinyuanpei/article/details/40744781

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

11月4日更新：

       由于博主的疏忽，代码中有一个地方写错了，在技能冷却这部分的第二段代码中，请将第50行代码注释掉，抱歉啊