cocos2dx[3.2](20)――拖尾渐隐效果MotionStreak

概述【唠叨】     在游戏的实现过程中，我们有时会需要在某个游戏对象上的运动轨迹上实现拖尾渐隐效果，这种感觉就好像是类似飞机拉线似的拖尾巴，使我们的游戏在视觉上感觉很好。     比如：刀光、子 d的运动轨迹、流星划痕等等。     cocos2d-x提供了一种内置的拖尾渐隐效果的实现方法：MotionStreak。     偷了几张图，呵呵呵呵呵。。。     当然要做出酷炫的拖尾效果，都是需要与

【唠叨】

在游戏的实现过程中，我们有时会需要在某个游戏对象上的运动轨迹上实现拖尾渐隐效果，这种感觉就好像是类似飞机拉线似的拖尾巴，使我们的游戏在视觉上感觉很好。

比如：刀光、子 d的运动轨迹、流星划痕等等。

cocos2d-x提供了一种内置的拖尾渐隐效果的实现方法：MotionStreak。

偷了几张图，呵呵呵呵呵。。。

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="1361467760_3589.jpg" alt="wKiol1TPq8jAfIB8AADmwIntX14300.jpg" src="http://s3.51cto.com/wyfs02/M00/59/4F/wKiol1TPq8jAfIB8AADmwIntX14300.jpg">

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="1420699966273689.gif" alt="wKiom1TPquXSRxlLAApmpu4wty0372.gif" src="http://s3.51cto.com/wyfs02/M00/59/52/wKiom1TPquXSRxlLAApmpu4wty0372.gif">

当然要做出酷炫的拖尾效果，都是需要与 粒子特效Particle 相结合的。

如下再附一张唯美的拖尾效果（MotionStreak + 粒子特效），增加大家学习的激情。

虽然我不会弄爱心，但是我觉得你学完 MotionStreak，你肯定就会弄下面的爱心了。。。

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="wKiom1QDNBzj9IYzAAIDuD0EWgc443.gif" alt="wKiol1TPrE3CDGN0AAIDutCiloU678.gif" src="http://s3.51cto.com/wyfs02/M01/59/4F/wKiol1TPrE3CDGN0AAIDutCiloU678.gif">

【致谢】

http://www.jb51.cc/article/p-dfbfojnm-vd.html（源码原理深入分析）

http://cn.cocos2d-x.org/tutorial/show?id=2225（《水果忍者》划动刀光实现）

http://www.jb51.cc/article/p-apqjlloz-qs.html（流星拖尾效果实现）

【MotionStreak】

1、原理

MotionStreak的拖尾效果，原理实际上是：在相应距离内动态生成一段段的条带，然后一段段逐渐的消隐。

可以指定消隐的速度fade（时间秒），一段条带最小距离minSeg，以及条带的宽度粗细（stroke），条带的颜色值（color），以及相应的纹理图片对象。

原理说明：MotionStreak在移动的过程中（setposition位置发生改变时），会动态生成一段段条带段，然后这些条带段会在生命周期fade秒内，渐渐隐去（慢慢变透明），从而形成了拖尾的效果。

如下如所示：

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="4B234562-034A-4112-98CF-070EC4BEF0D3_meitu_1.jpg" alt="wKiol1TQQMJszflQAACKwye5gVk442.jpg" src="http://s3.51cto.com/wyfs02/M02/59/52/wKiol1TQQMJszflQAACKwye5gVk442.jpg">

PS：因为是一段段条带相连形成拖尾，所以如果条带太粗（stroke太大），在视觉上可能会出现“脱节”的效果，就像上面的图一样。所以在实际使用中，stroke的大小设置应该合理。

2、创建方式

创建MotionStreak有两种方式：

>一种是用图片资源文件作为纹理创建。

> 另一种是通过纹理图片Texture2D创建。

各个参数的说明，在“原理”中已经给出解释。

/***	创建MotionStreak的两种方式**/	//fade:拖尾渐隐时间（秒）	//minSeg:最小的片段长度（渐隐片段的大小）。拖尾条带相连顶点间的最小距离。	//stroke:渐隐条带的宽度。	//color:片段颜色值。	//path:纹理图片的文件名。	//texture:纹理图片的对象指针。	staticMotionStreak*create(floatfade,floatminSeg,floatstroke,constcolor3B&color,conststd::string&path);	staticMotionStreak*create(floatfade,Texture2D*texture);	//使用举例	automotionstreak=MotionStreak::create(1.0f,1.0f,10.0f,color3B(255,0),"streak.png");//

3、相关函数

为了实现拖尾渐隐效果，MotionStreak还对Node类的一些函数进行了重载，如update、draw、setposition等。

每当MotionStreak改变了位置（setposition）后，就会形成一条拖尾。而update里则根据位置信息产生一段段新的顶点（条带段），并让之前生成的条带段渐隐或消失。

///***	相关函数*	tintWithcolor:设置顶点颜色值。*	reset:删除所有条带段，重置。*	setFastMode:设置快速模式。*	setStartingpositionInitialized:不需要了解，也不需要去使用。**/	//条带段使用的颜色值	voIDtintWithcolor(constcolor3B&colors);	//重置，删除所有条带段	voIDreset();	//设置是否是快速模式,默认为true	//当为快速模式时，新的顶点被更快的加入，但是新的顶点具有更小的精确值	//PS：实践测试，请宽恕若菜的无知，若菜实在看不出有何区别。。。	inlineboolisFastMode()const{return_fastMode;}	inlinevoIDsetFastMode(boolbFastMode){_fastMode=bFastMode;}	//在刚创建MotionStreak的时候会置为false（表示创建后，还未移动过）	//一旦改变position（即移动后），会置为true（表示拖尾效果开始了，然后移动就会有拖尾的效果了）	//PS：一般不会手动去设置它，所以不需要了解这个函数。	inlineboolisstartingpositionInitialized()const{return_startingpositionInitialized;}	inlinevoIDsetStartingpositionInitialized(boolbStartingpositionInitialized){_startingpositionInitialized=bStartingpositionInitialized;}//

4、支持Action动作

MotionStreak继承自Node类。而既然它一旦移动（位置position发生改变）就会拉出一条拖尾，那么执行 Moveto/MoveBy 或者 JumpTo/JumpBy 等等Action动作，自然也是可以形成拖尾效果的啦。

5、使用步骤

（1）创建MotionStreak。MotionStreak::create()。

（2）将MotionStreak加入到场景中。this->addChild()。

（3）设置位置MotionStreak->setposition()；或执行移动Action动作。

（4）一旦改变了位置之后，就会形成一段拖尾效果了。

【代码实践】

1、《水果忍者》划动刀光效果（MotionStreak + 粒子特效）

代码实现可参见：http://cn.cocos2d-x.org/tutorial/show?id=2225

手势划动产生的刀光效果，是利用触摸移动事件，改变MotionStreak的位置，来形成拖尾的。

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="1420699966273689.gif" alt="wKiom1TPquXSRxlLAApmpu4wty0372.gif" src="http://s3.51cto.com/wyfs02/M00/59/52/wKiom1TPquXSRxlLAApmpu4wty0372.gif">

2、《流星划痕效果》（精灵移动 + MotionStreak + 粒子效果）

代码实现可参见：http://www.jb51.cc/article/p-apqjlloz-qs.html

流星的尾巴，是在schedule/update中不断改变MotionStreak的位置，来形成拖尾的。

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="20140905170511812.png" alt="wKiol1TQTWPBwjVpAAGiNb26GBE810.jpg" src="http://s3.51cto.com/wyfs02/M00/59/52/wKiol1TQTWPBwjVpAAGiNb26GBE810.jpg">

以下，再让我介绍一个MotionStreak的简单实现的“酷炫”例子吧。

3、通过触摸事件，实现拖尾效果

图片资源偷自《流星划痕效果》。

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="PIC_XX.png" alt="wKiol1TQUUahL20lAAAErR9tYA8286.jpg" src="http://s3.51cto.com/wyfs02/M02/59/52/wKiol1TQUUahL20lAAAErR9tYA8286.jpg">

[PIC_XX.png]

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="steak.png" alt="wKiom1TQUF7jFOcfAAANAcgpGjo545.jpg" src="http://s3.51cto.com/wyfs02/M02/59/55/wKiom1TQUF7jFOcfAAANAcgpGjo545.jpg">

[steak.png]

预期实现效果：

>触摸开始touchBegan，流星的位置设置为触摸点位置。

>触摸移动touchmoved，流星跟随触摸点移动而移动，同时MotionStreak跟随流星移动，形成拖尾效果。

创建两种不同规格的MotionStreak，看看效果。

>设置minSeg = 50、stroke = 30、color = WHITE、纹理为steak.png 。

> 设置minSeg = 1 、stroke = 10、color = RED 、纹理为steak.png 。

3.1、在HelloWorld.h中添加如下变量与函数。

//classHelloWorld:publiccocos2d::Layer{public:staticcocos2d::Scene*createScene();virtualboolinit();CREATE_FUNC(HelloWorld);//触摸事件回调函数boolontouchBegan(touch*ptouch,Event*pEvent);voIDontouchmoved(touch*ptouch,Event*pEvent);private:Sprite*star;//流星精灵MotionStreak*streak;//拖尾};//

3.2、在HelloWorld.cpp的init()中，创建流星精灵、MotionStreak拖尾，并添加触摸监听事件。

//boolHelloWorld::init(){if(!Layer::init())returnfalse;//流星精灵SprtIEstar=Sprite::create("PIC_XX.png");star->setposition(100,100);this->addChild(star);//流星拖尾MotionStreakstreak=MotionStreak::create(0.5f,50,30,color3B::WHITE,"steak.png");//streak=MotionStreak::create(0.5f,1,10,color3B::RED,"steak.png");streak->setposition(star->getposition());//设置拖尾streak的位置this->addChild(streak);//注册单点触摸autodispatcher=this->getEventdispatcher();autoListener=EventListenertouchOneByOne::create();Listener->ontouchBegan=CC_CALLBACK_2(HelloWorld::ontouchBegan,this);//触摸开始Listener->ontouchmoved=CC_CALLBACK_2(HelloWorld::ontouchmoved,this);//触摸移动dispatcher->addEventListenerWithSceneGraPHPriority(Listener,this);returntrue;}//

3.3、实现触摸事件

> 触摸开始touchBegan ：流星位置设置为触摸点。

> 触摸移动touchmoved ：流星移动，streak跟随流星移动，形成拖尾效果。

////触摸开始：设置star和streak的位置boolHelloWorld::ontouchBegan(touch*ptouch,Event*pEvent){//获取触摸点位置Vec2pos=ptouch->getLocation();//设置位置star->setposition(pos);streak->setposition(star->getposition());//删除所有活动条带段streak->reset();returntrue;}//触摸移动：移动star和streak的位置voIDHelloWorld::ontouchmoved(touch*ptouch,Event*pEvent){//触摸移动的偏移量Vec2delta=ptouch->getDelta();//设置位置star->setposition(star->getposition()+delta);streak->setposition(star->getposition());}//

3.4、运行结果

（1）设置minSeg = 50、stroke = 30、color = WHITE、纹理为steak.png 。

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="1.gif" alt="wKiom1TQXbShRTGdABEGdg6odoE316.gif" src="http://s3.51cto.com/wyfs02/M02/59/56/wKiom1TQXbShRTGdABEGdg6odoE316.gif">

（2）设置minSeg = 1 、stroke = 10、color = RED 、纹理为steak.png 。

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="2.gif" alt="wKiom1TQXbjDADbpAAn8sufheik669.gif" src="http://s3.51cto.com/wyfs02/M00/59/56/wKiom1TQXbjDADbpAAn8sufheik669.gif">

（3）关于streak->reset() 函数。

细心的小伙伴，肯定发现了我在上面的两个gif图片的一开始，鼠标到处点了好几下。

为什么我会做这种“无用” *** 作呢？因为接下来我要讲的就是我为什么乱点的原因。

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="i_f07.gif" src="http://img.baIDu.com/hi/face/i_f07.gif">

我在ontouchBegan 中写了这么一句话：streak->reset() 。

如果去掉这句话。那么每次触摸开始时，流星直接移动到触摸点，streak也跟随改变位置，就会出现如下的现象：没有触摸拖动，只是点击鼠标，也会出现拖尾划痕。

而 streak->reset() 的作用就是：清除所有活动条带段。

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" title="3.gif" alt="wKiol1TQXqWT3_dqAAc8Ryqn9hM065.gif" src="http://s3.51cto.com/wyfs02/M00/59/53/wKiol1TQXqWT3_dqAAc8Ryqn9hM065.gif">

3.5、分析与总结

> 如果minSeq和stroke设置较大，即每一段条带都比较长或宽，视觉上就会看到明显“一节一节”的那种效果。

> 如果拖尾效果不与粒子特效组合使用的话，就会像上面的例子那样，比较单调。

> MotionStreak只要改变位置，就会形成拖尾效果。无论是setposition，还是执行动作（Moveto、JumpTo）。

> reset() 函数可以清除当前所有存在的渐隐条带，即所谓的重置。

我只能讲到这里了，MotionStreak能发挥多大的作用，就看大家怎么用了。

希望大家都能组合成各种“酷炫”的拖尾效果。

650) this.wIDth=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="i_f32.gif" src="http://img.baIDu.com/hi/face/i_f32.gif">

总结

以上是内存溢出为你收集整理的cocos2dx[3.2](20)――拖尾渐隐效果MotionStreak全部内容，希望文章能够帮你解决cocos2dx[3.2](20)――拖尾渐隐效果MotionStreak所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。