CocosCreater的MotionsTreak组件实现轮胎印

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

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

分析

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

 

实现

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;

 

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

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

转自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/