Smooth Motion Streak movement

cocos2d/core/components/CCMotionStreak.js

@@ -61,6 +61,7 @@ var MotionStreak = cc.Class({
 
     ctor () {
         this._points = [];
+        this._lastWPos = new cc.Vec2();
     },
 
     properties: {
@@ -247,6 +248,8 @@ var MotionStreak = cc.Class({
     reset () {
         this._points.length = 0;
         this._assembler && this._assembler._renderData.clear();
+        this._lastWPos.x = 0;
+        this._lastWPos.y = 0;
         if (CC_EDITOR) {
             cc.engine.repaintInEditMode();
         }

cocos2d/core/renderer/webgl/assemblers/motion-streak.js

@@ -77,6 +77,11 @@ function computeMiter (miter, lineA, lineB, halfThick, maxMultiple) {
 }
 
 export default class MotionStreakAssembler extends Assembler2D {
+    constructor () {
+        super();
+        this._tailShortenTime = 0;
+    }
+
     initData () {
         this._renderData.createFlexData(0, 16, (16 - 2) * 3);
     }
@@ -91,78 +96,114 @@ export default class MotionStreakAssembler extends Assembler2D {
         let tx = matrix[12], ty = matrix[13];
 
         let points = comp._points;
+        let lastPos = comp._lastWPos;
+        let fadeTime = comp._fadeTime;
 
-        let cur;
-        if (points.length > 1) {
-            let difx = points[0].point.x - tx;
-            let dify = points[0].point.y - ty;
-            if ((difx*difx + dify*dify) < comp.minSeg) {
+        let moved = lastPos.x !== tx || lastPos.y !== ty;
+        if (moved) {
+            let cur;
+            let newHead = false;
+            if (points.length === 0) {
+                // new
+                let prev = new Point();
+                prev.setPoint(lastPos.x, lastPos.y);
+                this._tailShortenTime = prev.time = fadeTime;
+                points.push(prev);
+
+                cur = new Point();
+                points.unshift(cur);
+            }
+            else {
+                // check moved distance
                 cur = points[0];
+                let prev = points[1];
+                let difx = prev.point.x - tx;
+                let dify = prev.point.y - ty;
+                newHead = ((difx*difx + dify*dify) >= comp.minSeg*comp.minSeg);
+            }
+            // update head
+            cur.setPoint(tx, ty);
+            cur.time = fadeTime + dt;
+            let prev = points[1];
+            cur.distance = cur.point.sub(prev.point, _vec2).mag();
+            _vec2.normalizeSelf();
+            cur.setDir(_vec2.x, _vec2.y);
+
+            let prevIsTail = points.length === 2;
+            if (prevIsTail) {
+                prev.setDir(_vec2.x, _vec2.y);
             }
-        }
 
-        if (!cur) {
-            cur = new Point();
-            points.unshift(cur);
+            if (newHead) {
+                let point = new Point(cur.point.clone(), cur.dir.clone());
+                point.distance = cur.distance;
+                point.time = cur.time;
+                points.unshift(point);
+            }
         }
 
-        cur.setPoint(tx, ty);
-        cur.time = comp._fadeTime + dt;
-
-        let verticesCount = 0;
-        let indicesCount = 0;
+        lastPos.x = tx;
+        lastPos.y = ty;
 
         if (points.length < 2) {
             return;
         }
 
-        let color = comp._color,
-            cr = color.r, cg = color.g, cb = color.b, ca = color.a;
+        // cc.log(points.map(x => x.time.toFixed(2)).reverse().join(' '), ',', this._tailShortenTime.toFixed(2));
 
-        let prev = points[1];
-        prev.distance = cur.point.sub(prev.point, _vec2).mag();
-        _vec2.normalizeSelf();
-        prev.setDir(_vec2.x, _vec2.y);
-        cur.setDir(_vec2.x, _vec2.y);
+        let color = comp._color, ca = color.a;
+        let crgb = (color.b<<16) | (color.g<<8) | color.r;
 
+        let verticesCount = 0;
+        let indicesCount = 0;
         let flexBuffer = this._renderData._flexBuffer;
         flexBuffer.reserve(points.length*2, (points.length-1)*6);
         let vData = flexBuffer.vData;
         let uintVData = flexBuffer.uintVData;
         let vertsOffset = 5;
 
-        let fadeTime = comp._fadeTime;
-        let findLast = false;
         for (let i = points.length - 1; i >=0 ; i--) {
             let p = points[i];
             let point = p.point;
             let dir = p.dir;
             p.time -= dt;
-
-            if (p.time < 0) {
+
+            let isLast = i === points.length - 1;
+
+            if (p.time <= 0) {
+                if (isLast && i - 1 >= 0) {
+                    this._tailShortenTime = points[i - 1].time - dt;
+                }
                 points.splice(i, 1);
                 continue;
             }
 
             let progress = p.time / fadeTime;
 
-            let next = points[i - 1];
-            if (!findLast) {
+            if (isLast) {
+                let next = points[i - 1];
                 if (!next) {
                     points.splice(i, 1);
                     continue;
                 }
-
-                point.x = next.point.x - dir.x * progress;
-                point.y = next.point.y - dir.y * progress;
+                let nextIsStatic = points.length >= 3;
+                if (nextIsStatic) {
+                    let segmentProgress = p.time / this._tailShortenTime;
+                    if (segmentProgress <= 1) {
+                        point.x = next.point.x - next.distance * next.dir.x * segmentProgress;
+                        point.y = next.point.y - next.distance * next.dir.y * segmentProgress;
+                    }
+                }
+                else {
+                    this._tailShortenTime = p.time;
+                }
             }
-            findLast = true;
 
             normal(_normal, dir);
 
 
-            let da = progress*ca;
-            let c = ((da<<24) >>> 0) + (cb<<16) + (cg<<8) + cr;
+            let da = progress * ca;
+            let c = ((da<<24) >>> 0) | crgb;
 
             let offset = verticesCount * vertsOffset;
 
@@ -183,7 +224,7 @@ export default class MotionStreakAssembler extends Assembler2D {
             verticesCount += 2;
         }
 
-        indicesCount = verticesCount <= 2 ? 0 : (verticesCount - 2)*3;
+        indicesCount = verticesCount <= 2 ? 0 : (verticesCount - 2) * 3;
 
         flexBuffer.used(verticesCount, indicesCount);
     }