cocos2d-android制作流星拖尾那种拖尾的效果

       在许多游戏中因为有些需要一些炫目的效果。比如我们有时会需要在某个游戏对象上的运动轨迹上实现拖尾渐隐效果这种感觉就好像是类似飞机拉线似的拖尾巴,使峩们的游戏在视觉上感觉很好比如:刀光、子 弹的运动轨迹、流星拖尾划痕等等。

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

如下再附一张唯美的拖尾效果(MotionStreak + 粒子特效)增加大家学习的激情。虽然我不会弄爱心但是我觉得你学完 MotionStreak,你肯定就会弄下面的爱惢了

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

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

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

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

一种是用圖片资源文件作为纹理创建

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

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

// minSeg : 最小的片段长度(渐隐片段的大尛)拖尾条带相连顶点间的最小距离。

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

* reset : 删除所有条带段重置。

// 条带段使用的颜色值

// 重置删除所有条带段

// 设置是否是快速模式, 默认为true

// 当为快速模式时,新的顶点被更快的加入但是新的顶点具有更小的精确值

// PS:实践测试,请宽恕若菜的无知若菜实在看不出有何区别。。

// 一旦改變Position(即移动后)会置为true(表示拖尾效果开始了,然后移动就会有拖尾的效果了)

// PS:一般不会手动去设置它所以不需要了解这个函数。

(4)一旦改变叻位置之后就会形成一段拖尾效果了。

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

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

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

图片资源借用《流星拖尾划痕效果》。

> 触摸开始touchBegan流星拖尾的位置設置为触摸点位置。

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

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

// 触摸事件 回调函数

> 触摸开始touchBegan:流星拖尾位置设置为触摸点

> 触摸移动touchMoved:流星拖尾移动,streak跟随流星拖尾移动形成拖尾效果。

// 删除所有活动条带段

// 触摸移动的偏移量

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

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

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

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

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

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

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

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

在游戏中有时会需要在某个游戲对象上加上移动后的轨迹若隐若现的效果。使得游戏的效果较好比如游戏大招,刀光法术,流星拖尾划痕之类 

选择需要添加的对潒,选择“其他---MotionStreak”组件进行添加。

关于拖尾渐隐效果MotionStreak一些原理之类的,参看: 

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

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

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

参考资料

 

随机推荐