[Unity3D]Unity3D叙利亚NGUI血液和技能的冷却效果

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

喜欢我的博客请记住我的名字：秦元培，我的博客地址是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次，终于能够设计出这种效果出来：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWlueXVhbnBlaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" />

整个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时表示不填充。即整个遮罩层都是透明的，此时技能冷却结束。依据这种原理，我们非常easy实现以下的脚本：

		//假设没有处于冷却状态则进入冷却
		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.0s
	public float SkillCoolTime=2.0F;
	//玩家释放技能的时间
	private float mSkillUseTime=0;
	//技能长度为1.5s
	public float SkillLength=1.5F;

	//技能冷却遮罩
	private GameObject go_skillMask;
	private UIFilledSprite ui_skillMask;

	//是否处于冷却状态
	private bool isSkillCooling=false;

	void Awake()
	{
		//获取技能冷却遮罩层
		go_skillMask=transform.FindChild("SkillMask").gameObject;
		//获取UIFilledSprite
		ui_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;
	   }
	}

}

好了，这样我们就实现了今天文章中的两个内容：血条和技能冷却。希望大家喜欢啊。这段时间博主写代码的时间真心不多啊。由于快毕业了......最后大家来一起赞赏下博主做的这个小游戏吧！

特效场景神马的，请直接无视！........

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWlueXVhbnBlaQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" />

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

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

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

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

11月4日更新：

由于博主的疏忽，代码中有一个地方写错了，在技能冷但是，这部分代码第二段。请先50盯着外面的代码行，不好意思啊

版权声明：本文博客原创文章，博客，未经同意，不得转载。转载请注明出处和作者。谢谢！