Cocos2d-x 3.x基础学习: 拖尾渐隐效果MotionStreak
在许多游戏中，因为有些需要一些炫目的效果。比如我们有时会需要在某个游戏对象上的运动轨迹上实现拖尾渐隐效果，这种感觉就好像是类似飞机拉线似的拖尾巴，使我们的游戏在视觉上感觉很好。比如：刀光、子 弹的运动轨迹、流星划痕等等。
Cocos2d-x提供了一种内置的拖尾渐隐效果的实现方法：MotionStreak。
借用几张图
当然要做出酷炫的拖尾效果，都是需要与 粒子特效Particle 相结合的。
如下再附一张唯美的拖尾效果(MotionStreak + 粒子特效)，增加大家学习的激情。虽然我不会弄爱心，但是我觉得你学完 MotionStreak，你肯定就会弄下面的爱心了。
【MotionStreak】
1、原理
MotionStreak 的拖尾效果，原理实际上是：在相应距离内动态生成一段段的条带，然后一段段逐渐的消隐。
可以指定消隐的速度fade(时间秒)，一段条带最小距离minSeg，以及条带的宽度粗细(stroke)，条带的颜色值(color)，以及相应的纹理图片对象。
原理说明：MotionStreak在移动的过程中(setPosition位置发生改变时)，会动态生成一段段条带段，然后这些条带段会在生命周期fade秒内，渐渐隐去(慢慢变透明)，从而形成了拖尾的效果。
如下如所示：
PS：因为是一段段条带相连形成拖尾，所以如果条带太粗(stroke太大)，在视觉上可能会出现“脱节”的效果，就像上面的图一样。所以在实际使用中，stroke的大小设置应该合理。
2、创建方式
创建MotionStreak有两种方式：
一种是用图片资源文件作为纹理创建。
另一种是通过纹理图片Texture2D创建。
各个参数的说明，在“原理”中已经给出解释。
/*** 创建MotionStreak 的两种方式**/// fade : 拖尾渐隐时间(秒)// minSeg : 最小的片段长度(渐隐片段的大小)。拖尾条带相连顶点间的最小距离。// stroke : 渐隐条带的宽度。// color : 片段颜色值。// path : 纹理图片的文件名。// texture : 纹理图片的对象指针。static MotionStreak* create(float fade, float minSeg, float stroke, const Color3B& color, const std::string& path);static MotionStreak* create(float fade, float minSeg, float stroke, const Color3B& color, Texture2D* texture);// 使用举例auto motionstreak = MotionStreak::create(1.0f, 1.0f, 10.0f, Color3B(255, 0, 0), "streak.png");//3、相关函数
为了实现拖尾渐隐效果，MotionStreak还对Node类的一些函数进行了重载，如update、draw、setPosition等。
每当MotionStreak改变了位置(setPosition)后，就会形成一条拖尾。而update里则根据位置信息产生一段段新的顶点(条带段)，并让之前生成的条带段渐隐或消失。
///*** 相关函数* tintWithColor : 设置顶点颜色值。* reset : 删除所有条带段，重置。* setFastMode : 设置快速模式。* setStartingPositionInitialized : 不需要了解，也不需要去使用。**/// 条带段使用的颜色值void tintWithColor(const Color3B& colors);// 重置，删除所有条带段void reset();// 设置是否是快速模式, 默认为true// 当为快速模式时，新的顶点被更快的加入，但是新的顶点具有更小的精确值// PS：实践测试，请宽恕若菜的无知，若菜实在看不出有何区别。。。inline bool isFastMode() const { return _fastMode; }inline void setFastMode(bool bFastMode) { _fastMode = bFastMode; }// 在刚创建MotionStreak的时候会置为false(表示创建后，还未移动过)// 一旦改变Position(即移动后)，会置为true(表示拖尾效果开始了，然后移动就会有拖尾的效果了)// PS：一般不会手动去设置它，所以不需要了解这个函数。inline bool isStartingPositionInitialized() const { return _startingPositionInitialized; }inline void setStartingPositionInitialized(bool bStartingPositionInitialized) { _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的位置，来形成拖尾的。
2、《流星划痕效果》(精灵移动 + MotionStreak + 粒子效果)
代码实现可参见：http://cn.cocos2d-x.org/tutorial/show?id=1483
流星的尾巴，是在schedule/update中不断改变MotionStreak的位置，来形成拖尾的。
以下，再让我介绍一个MotionStreak的简单实现的“酷炫”例子吧。
3、通过触摸事件，实现拖尾效果
图片资源借用《流星划痕效果》。
[PIC_XX.png]
[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中添加如下变量与函数
//class HelloWorld : public cocos2d::Layer{public:static cocos2d::Scene* createScene();virtual bool init();CREATE_FUNC(HelloWorld);// 触摸事件 回调函数bool onTouchBegan(Touch* pTouch, Event* pEvent);void onTouchMoved(Touch* pTouch, Event* pEvent);private:Sprite* star; // 流星精灵MotionStreak* streak; // 拖尾};//3.2、在HelloWorld.cpp的init()中，创建流星精灵、MotionStreak拖尾，并添加触摸监听事件
//bool HelloWorld::init(){if ( !Layer::init() ) return false;// 流星精灵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);// 注册单点触摸auto dispatcher = this->getEventDispatcher();auto listener = EventListenerTouchOneByOne::create();listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this); // 触摸开始listener->onTouchMoved = CC_CALLBACK_2(HelloWorld::onTouchMoved, this); // 触摸移动dispatcher->addEventListenerWithSceneGraphPriority(listener, this);return true;}//3.3、实现触摸事件
> 触摸开始touchBegan：流星位置设置为触摸点。
> 触摸移动touchMoved：流星移动，streak跟随流星移动，形成拖尾效果。
//// 触摸开始 ：设置star和streak的位置bool HelloWorld::onTouchBegan(Touch* pTouch, Event* pEvent){// 获取触摸点位置Vec2 pos = pTouch->getLocation();// 设置位置star->setPosition(pos);streak->setPosition(star->getPosition());// 删除所有活动条带段streak->reset();return true;}// 触摸移动 ：移动star和streak的位置void HelloWorld::onTouchMoved(Touch* pTouch, Event* pEvent){// 触摸移动的偏移量Vec2 delta = pTouch->getDelta();// 设置位置star->setPosition(star->getPosition() + delta);streak->setPosition(star->getPosition());}//3.4、运行结果
(1)设置minSeg = 50、stroke = 30、color = WHITE、纹理为steak.png。
(2)设置minSeg = 1、stroke = 10、color = RED、纹理为steak.png。
(3)关于streak->reset() 函数。
细心的小伙伴，肯定发现了我在上面的两个GIF图片的一开始，鼠标到处点了好几下。
为什么我会做这种“无用”操作呢?因为接下来我要讲的就是我为什么乱点的原因。
我在 onTouchBegan 中写了这么一句话：streak->reset()。
如果去掉这句话。那么每次触摸开始时，流星直接移动到触摸点，streak也跟随改变位置，就会出现如下的现象：没有触摸拖动，只是点击鼠标，也会出现拖尾划痕。
而streak->reset()的作用就是：清除所有活动条带段。
3.5、分析与总结
> 如果minSeq和stroke设置较大，即每一段条带都比较长或宽，视觉上就会看到明显“一节一节”的那种效果。
> 如果拖尾效果不与粒子特效组合使用的话，就会像上面的例子那样，比较单调。
> MotionStreak只要改变位置，就会形成拖尾效果。无论是setPosition，还是执行动作(MoveTo、JumpTo)。
> reset() 函数可以清除当前所有存在的渐隐条带，即所谓的重置。
我只能讲到这里了，MotionStreak能发挥多大的作用，就看大家怎么用了。
希望大家都能组合成各种“酷炫”的拖尾效果。
Cocos2d-x 3.x基础学习: 拖尾渐隐效果MotionStreak相关推荐
- cocos：MotionStreak拖尾渐隐效果
目录 前言 小例 创建和传参 推送 结语 前言 本文简介cocos的MotionStreak组件,该组件非常方便的实现了一个拖尾效果,配合粒子能够实现非常好看的效果,本文则从使用上介绍一下,以后有机会 ...
- JS-鼠标彩色拖尾小效果
实现步骤解析: * 这原本就是一个鼠标后面跟随一串小方块的效果, * 后来我就想,运用之前学的随机数的案例把小方块的颜色做成彩色的, * 并且每一个小方块的色彩是随机分配而不是我自己手 ...
- UE4 粒子特效基础学习 （04-光圈效果制作）
在上一个博客(UE4 粒子特效基础学习 (03-制作上升光线特效))的基础上继续完成光圈效果的制作 . 效果: 步骤: 1.打开PS软件,新建一个文档,宽高都设为512 2.ctrl+R打开标尺 3. ...
- 还在用土方法建站？半个钟零基础学习拖拽式建站了解一下。
一.
- html+js+css 调用jquery 工人信息管理功能（增删改查）前端实现，以及调用实现鼠标拖尾粒子效果的js库
html + js + css 调用jquery以及underscore.min.js(配合代码实现鼠标粒子效果)实现全前端信息管理基本功能(增删改查) 先附上我运行的一段视频,手机打开清晰一点或者直 ...
- 鼠标实现物体拖动带拖尾的效果
今天,小编为大家分享一下,用鼠标拖动物体,还带一个小尾巴效果哈![+V:Anime__King] 1.新建一个unity项目,新建一个测试场景.一个MoveTo.cs类附加在GameObject(命名 ...
- Cocos Creator 的实现拖尾效果
在游戏中,有时会需要在某个游戏对象上加上移动后的轨迹若隐若现的效果.使得游戏的效果较好,比如游戏大招,刀光,法术,流星划痕之类. Cocos Creator提供了一种内置的拖尾渐隐效果的实现方法:组件 ...
- [Unity学习笔记：FPS游戏制作（3）]子弹拖尾，碰撞与枪口火焰效果
往期博客[Unity学习笔记:FPS游戏制作(2)] 发射子弹----(2021.6.20学习笔记) 文章目录 一,实现思路 二,粒子效果的实现 (1)子弹拖尾特效的实现 (2)枪口火焰特效的实现 ( ...
- html鼠标拖尾效果,Canvas实现特效（一）：粒子拖尾
粒子特效 效果: 作一新求抖直微圈 先图 一框发互会理工.择各近些架现跳轻机审蓝器 为了实现粒子在运动轨迹上所留下的尾巴效果,在网上看见有一位网友是在上一帧的基础之上,加上了一层半透明蒙层.也就是rg ...
- HTML5 canvas 拖尾效果（或尾巴 或方向标 或留痕。。。）
[canvas]带拖尾效果的旋转扩散 使用 HTML5 canvas 制作一个圆形的拖尾,以及附加上拖尾的扩散效果 我说说的拖尾,就是拖着一个尾巴,其他简短的名词暂时想不到了.下图效果弄出来,着实费劲 ...
最新文章
- zabbix nginx php postgresql,debian10安装zabbix4.2+nginx+postgresql
- 【python图像处理】两幅图像的合成一幅图像（blending two images）
- 【CyberSecurityLearning 附】使用PHP语言搭建简单的论坛:注册功能实现+PHP个人中心设计+简单留言板
- 父与子一起学python3,父与子的编程之旅 与小卡特一起学Python 第3版（全彩印刷）...
- P7988-[USACO21DEC] HILO G【set,线段树】
- 她的癌细胞救了上亿条命，却很少有人知道她的名字
- 3GPP协议学习-TS 38.201-NR；物理层；总体描述
- 6. laravel 控制器
- java （Eclipse）连接MySQL数据库
- SAP针对中国市场推出双轨制医疗计划
- win10 Python3安装pysqlcipher3的问题总结
- 解决华硕FX80G* Fn+F5或其他功能键切换不显示问题
- Java打包JRE于exe中方法
- service常驻后台
- 中移动Open NFV实验室迎新合作伙伴
- Google无限容量网盘
- 顺序查找与二分查找时间复杂度的比较
- 如何压缩图片大小到200k以下？照片太大怎么压缩到200k？
- 大数据计数原理1+0=1这你都不会算(一)No.47
- 签到网站js逆向与python实现