CocosCreater的MotionsTreak组件实现轮胎印

参考游戏Sling Drift,这款游戏的漂移,轮胎印效果特别好,我对这个轮胎印比较感兴趣,所以用Creator实现一个。实现的具体代码可以点击查看工程。

做之前先了解一下MotionStreak组件。MotionStreak组件可以产生拖尾,但就目前看来,是有条件的。那就是必须是组件自身的position属性发生改变。MotionStreak组件不跟随父节点移动产生拖尾,也不会在runAction的动作中产生拖尾(虽然在使用this.motionStreakNode.getComponent(cc.MotionStreak)._onNodePositionChanged()方法时可以产生,但在后续制作过程中发现无法满足我们的需求,如拖尾会随着父节点的旋转而旋转),只有设置组件本身的position才会产生拖尾。

分析

绳子将中间的黄色桩和车连接,车做圆周运动,轮胎印从开始到结束,颜色由轻到重,并且有一定的停留时间。

CocosCreater的MotionsTreak组件实现轮胎印_第1张图片

 

实现

CocosCreater的MotionsTreak组件实现轮胎印_第2张图片

Creator的拖尾正好就是渐变的效果,但那适用于短时间的情况,拖尾停留的时间比较长,所以需要对图片做一点处理,做成渐变的图,可以Demo中查看。

车当前的角度为车头和车尾的连线,车和桩之间的连线角度也可以计算出来,代码如下:

this.carHead.rotation = cc.radiansToDegrees(cc.pAngleSigned(cc.pSub(this.carHead.position, this.carTail.position), cc.p(0, 1)));
this.line.rotation = cc.radiansToDegrees(cc.pAngleSigned(cc.pSub(this.carControl.position, this.carHead.position), cc.p(1, 0)));

车分车头和车尾两部分,车头提供动力,车尾被车头拉动。车的速度方向始终为车头的朝向。

let speedX = 2000 * Math.sin(this.carHead.rotation * Math.PI / 180);
let speedY = 2000 * Math.cos(this.carHead.rotation * Math.PI / 180);
this.carHead.getComponent(cc.RigidBody).linearVelocity = cc.v2(speedX, speedY);

车上有两个轮胎的位置,车在运动过程中轮胎会跟着父节点车走。我们要获取到轮胎的世界坐标,然后把车轮印的坐标设置上去。

this.tireStreak_left.position = cc.pSub(this.posTireLeft.convertToWorldSpace(cc.v2(0, 0)), cc.v2(cc.winSize.width / 2, cc.winSize.height / 2));
this.tireStreak_right.position = cc.pSub(this.posTireRight.convertToWorldSpace(cc.v2(0, 0)), cc.v2(cc.winSize.width / 2, cc.winSize.height / 2));

如果要实现镜头跟着车走,则再添加一个摄像机,在update方法中更新摄像机的坐标为车的坐标就ok。

this.cameraNode.position = this.carHead.position;

CocosCreater的MotionsTreak组件实现轮胎印_第3张图片

 

这样就实现了通过修改车轮印的坐标实现拖尾。

有什么问题可以在下方留言,也可以扫码加我微信。

转自https://www.ifeelgame.net/cocoscreator/cocoscreator%E7%9A%84motionstreak%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0%E8%BD%AE%E8%83%8E%E5%8D%B0/

你可能感兴趣的:(CocosCreater)