轻轻松松用Cocos2D-X制作《捕鱼达人3》中闪电特效

作者:课课家教育更新于： 2016-05-20 14:52:38

　　相信我们很多同学们都玩过捕鱼达人，对于捕鱼达人中的闪电效果，不知道各位同学还有没有印象呢？本篇教程将以《捕鱼达人3》中的闪电效果为模板用Cocos2d-x制作闪电效果。

　　之前我们已经学习了《捕鱼达人3》中Cocos引擎3D技术的实现：加载鱼的模型和播放动画和鱼身上的波光处理，今天我们接着学习游戏中如何制作攻击时的闪电特效。

　　《捕鱼达人》中的闪电，是通过以下几个步骤来实现的：

　　一、构建三角形条带。

　　二、采用随机函数来扰动条带顶点。

　　三、快速反复循环一，二步骤。

　　这个过程主要使用到以下三个类：

　　(1)VertexVector：用于存储顶点和索引的类。

　　(2)Noise：噪音处理类，用于进行顶点扰动，使顶点不断的小幅变化。

　　(3)LightLineRender：实现闪电效果的类。

　　具体的代码实现，可以参看注释。我们要关心的是LightLineRender类，它封装了闪电效果，并提供了相应的参数调节选项，我们学会了使用它就可以做出闪电链的效果。

　　我们打开 cpp-empty-test ,在 HelloWorld::init 函数中加入以下代码：

//线条容器
std::vector lines; 
//设置线条位置 
//第一段闪电的起点和终点 
Vec3 segStart = Vec3(-50,-50,-8); 
Vec3 segEnd   = Vec3(50,50,-8); 
lines.push_back( LightLineRender::Line( segStart, segEnd, 0 ) ); 
//第二段闪电的起点和终点 
segStart = Vec3(50,50,-8); 
segEnd   = Vec3(-50,50,-8); 
lines.push_back( LightLineRender::Line( segStart, segEnd, 0 ) ); 
//第三段闪电的起点和终点 
segStart = Vec3(-50,50,-8); 
segEnd   = Vec3(50,-50,-8); 
lines.push_back( LightLineRender::Line( segStart, segEnd, 0 ) ); 
//第四段闪电的起点和终点 
segStart = Vec3(50,-50,-8); 
segEnd   = Vec3(0,100,-8); 
lines.push_back( LightLineRender::Line( segStart, segEnd, 0 ) ); 
//第五段闪电的起点和终点 
segStart = Vec3(0,100,-8); 
segEnd   = Vec3(-50,-50,-8); 
lines.push_back( LightLineRender::Line( segStart, segEnd, 0 ) ); 
//创建出闪光链 
LightLineRender*    _lighting = LightLineRender::create(); 
//设置不需要强制纹理循环 
_lighting->setForceTexLoop( false ); 
//设置宽 
_lighting->setWidth( 80 ); 
//设置 单张纹理长度，调整这个数值可以避免纹理过度拉伸或挤压 
_lighting->setTextueLength( 100 ); 
//设置单个面片网格长，越小曲线越平滑，数值过于小可能带来效率问题 
_lighting->setStep( 10 ); 
//设置振幅1 
_lighting->setAmplitude0( 4 ); 
//设置频率1 
_lighting->setFrequency0( 500 ); 
//设置振幅2 
_lighting->setAmplitude1( 1 ); 
//设置频率2 
_lighting->setFrequency1( 400 ); 
//设置产生噪音的时间系数 
_lighting->setTimeFactor( 0.5 ); 
//使用线段容器创建闪电链 
_lighting->setLines( lines ); 
//使用柏林噪音算法 
_lighting->setLineType( LineType::LT_PerlinNosie ); 
//设置每帧强制更新重建模型 
_lighting->setForceUpdate(true); 
//设置位置 
_lighting->setPosition(Vec2(visibleSize.width / 4 + origin.x,visibleSize.height / 2 + origin.y)); 
//将闪电链加入到当前层中。 
this->addChild(_lighting,0,10); 

　　这样我们完成了使用了五条闪电组成一个五星闪电链不断的闪动。运行后的效果如图所示：

　　然后我们希望在触屏时能够有一条闪电链击中屏幕中央的乌龟，乌龟被击中后翻个身，闪电链渐渐消失，我们可以这样做：

　　首先我们在 FishLayer 这个层里将乌龟循环播放的游泳与被击中的两个动作改为只播放游泳，然后我们增加两个函数：

//击中乌龟 
void    FishLayer::AttackWuGui() 
{ 
	if (m_Animation3D) 
	{ 
		//从1.933秒到2.8秒截取为受伤的动作 
		m_Hurt = Animate3D::create(m_Animation3D, 1.933f, 2.8f); 
		m_Hurt->retain(); 
  
		m_Sprite->stopAllActions(); 
		//让精灵循环播放游泳和的受伤动作 
		Sequence*   pSequence = Sequence::create(m_Hurt,CallFunc::create( std::bind(&FishLayer::ContinueSwim, this) ),NULL); 
		m_Sprite->runAction(pSequence); 
  
	} 
  
} 
//继续游动 
void    FishLayer::ContinueSwim() 
{ 
	if (m_Animation3D) 
	{ 
		//从起始到1.933秒截取为游泳动作 
		m_Swim = Animate3D::create(m_Animation3D, 0.f, 1.933f); 
		m_Swim->retain(); 
  
		m_Sprite->stopAllActions(); 
		//让精灵循环播放游泳和的受伤动作 
		Sequence*   pSequence = Sequence::create(m_Swim,NULL); 
		m_Sprite->runAction(RepeatForever::create(pSequence)); 
	} 
}

　　然后在 HelloWorld 的 init 函数尾部增加代码：

　　//设置可以点击

　　setTouchEnabled( true );

　　最后,我们重载一下 onToucesBegan 函数：

void HelloWorld::onTouchesBegan(const std::vector& touches, Event *unused_event) 
{ 
//屏幕转换到射线 
kmVec3    tPt; 
kmVec3    tDir; 
// 获取点在视图中的坐标 
CCPoint touchLocation = touches[0]->getLocation(); 
auto    visibleSize = Director::getInstance()->getVisibleSize(); 
auto    origin = Director::getInstance()->getVisibleOrigin(); 
//线条容器 
std::vector lines; 
//闪电的起点和终点 
Vec2    tFishPos(Vec2(visibleSize / 2) + origin); 
tFishPos = m_FishLayer->GetSpritePosition() + origin; 
Vec3 segStart = Vec3(0,0,-8); 
Vec3 segEnd   = Vec3(touchLocation.x - tFishPos.x ,touchLocation.y - tFishPos.y ,-8); 
//取得方向 
Vec3  dir = segEnd - segStart ; 
float fLength = dir.length(); 
dir.normalize(); 
//顺时针转动45度形成一个偏移点做为第一个闪电链线段。 
Vec3  rotate_left; 
Mat4  rotate_left_Mat; 
kmMat4RotationZ(&rotate_left_Mat,MATH_DEG_TO_RAD(-45)); 
kmVec3TransformCoord(&rotate_left,&dir,&rotate_left_Mat); 
rotate_left.normalize(); 
//逆时针转动45度形成一个偏移点做为第一个闪电链线段。 
Vec3  rotate_right; 
Mat4  rotate_right_Mat; 
kmMat4RotationZ(&rotate_right_Mat,MATH_DEG_TO_RAD(45)); 
kmVec3TransformCoord(&rotate_right,&dir,&rotate_right_Mat); 
rotate_right.normalize(); 

//分成三段闪电链 
Vec3  v1_s = segStart ; 
Vec3  v1_e = segStart + dir * fLength / 4.0 + rotate_left * (fLength / 6.0); 

Vec3  v2_s = v1_e ; 
Vec3  v2_e = segStart + dir * fLength / 2.0 + rotate_right * (fLength / 6.0); 

Vec3  v3_s = v2_e ; 
Vec3  v3_e = segEnd; 

lines.push_back( LightLineRender::Line( v1_s, v1_e, 0 ) ); 
lines.push_back( LightLineRender::Line( v2_s, v2_e, 0 ) ); 
lines.push_back( LightLineRender::Line( v3_s, v3_e, 0 ) ); 
//创建出闪光链 
LightLineRender*    _lighting = dynamic_cast(getChildByTag(10)); 
//使用线段容器创建闪电链 
_lighting->setLines( lines ); 
_lighting->setPosition(tFishPos); 
//这一句可以让闪电链在1秒内渐渐消隐。它通过调节Shader中的u_color值从1变为0来实现。 
_lighting->OpenAlphaToZero(1.0); 
//击中乌龟，让乌龟翻身。
}

　　再次运行后，我们点击屏幕，就可以看到从点击屏幕位置到乌龟位置间会出现一条闪电链击中小乌龟啦!小乌龟摇了摇身体，勇敢的继续前行，最终的效果图如下：

　　制作教程就讲到这里，是不是了解了呢，赶快去体验操作一次吧！