💄 优化节点创建特效，之前的太浮夸了

Author: Littlefean

src/core/service/effectEngine/concrete/EntityCreateLineEffect.tsx

@@ -4,7 +4,7 @@ import { Rectangle } from "../../../dataStruct/shape/Rectangle";
 import { Vector } from "../../../dataStruct/Vector";
 import { StageStyleManager } from "../../stageStyle/StageStyleManager";
 import { EffectObject } from "../effectObject";
-import { ZapLineEffect } from "./ZapLineEffect";
+import { TechLineEffect } from "./TechLineEffect";
 
 export class EntityCreateLineEffect extends EffectObject {
   constructor(
@@ -14,85 +14,87 @@ export class EntityCreateLineEffect extends EffectObject {
     super(timeProgress);
     // 子特效
     this.subEffects = [];
+    const initLen = 20;
+    const segmentCount = 50;
+    const preChange = -1;
+    // const effectColor = StageStyleManager.currentStyle.CollideBoxSelectedColor;
+    const effectColor = StageStyleManager.currentStyle.StageObjectBorderColor;
+    const rotateDegrees = 90;
     // 顶部线
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 5; i++) {
       const topStartLocation = new Vector(
         Random.randomFloat(this.rect.left, this.rect.right),
         this.rect.top,
       );
-      const topEndLocation = topStartLocation.add(
-        topStartLocation.subtract(this.rect.center).multiply(100),
-      );
-      const zapLineEffect = new ZapLineEffect(
+      const topEndLocation = topStartLocation.add(new Vector(0, -1000));
+      const zapLineEffect = new TechLineEffect(
         topStartLocation,
         topEndLocation,
-        50,
-        20,
-        45,
-        StageStyleManager.currentStyle.StageObjectBorderColor,
+        segmentCount,
+        initLen,
+        preChange,
+        rotateDegrees,
+        effectColor,
         this.timeProgress.clone(),
         2,
       );
       this.subEffects.push(zapLineEffect);
     }
     // 底部线
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 5; i++) {
       const bottomStartLocation = new Vector(
         Random.randomFloat(this.rect.left, this.rect.right),
         this.rect.bottom,
       );
-      const bottomEndLocation = bottomStartLocation.add(
-        bottomStartLocation.subtract(this.rect.center).multiply(100),
-      );
-      const zapLineEffect = new ZapLineEffect(
+      const bottomEndLocation = bottomStartLocation.add(new Vector(0, 1000));
+      const zapLineEffect = new TechLineEffect(
         bottomStartLocation,
         bottomEndLocation,
-        50,
-        20,
-        45,
-        StageStyleManager.currentStyle.StageObjectBorderColor,
+        segmentCount,
+        initLen,
+        preChange,
+        rotateDegrees,
+        effectColor,
         this.timeProgress.clone(),
         2,
       );
       this.subEffects.push(zapLineEffect);
     }
     // 左侧线
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 5; i++) {
       const leftStartLocation = new Vector(
         this.rect.left,
         Random.randomFloat(this.rect.top, this.rect.bottom),
       );
-      const leftEndLocation = leftStartLocation.add(
-        leftStartLocation.subtract(this.rect.center).multiply(100),
-      );
-      const zapLineEffect = new ZapLineEffect(
+      const leftEndLocation = leftStartLocation.add(new Vector(-1000, 0));
+      const zapLineEffect = new TechLineEffect(
         leftStartLocation,
         leftEndLocation,
-        50,
-        20,
-        45,
-        StageStyleManager.currentStyle.StageObjectBorderColor,
+        segmentCount,
+        initLen,
+        preChange,
+        rotateDegrees,
+        effectColor,
         this.timeProgress.clone(),
         2,
       );
       this.subEffects.push(zapLineEffect);
     }
     // 右侧线
-    for (let i = 0; i < 10; i++) {
+    for (let i = 0; i < 5; i++) {
       const rightStartLocation = new Vector(
         this.rect.right,
         Random.randomFloat(this.rect.top, this.rect.bottom),
       );
-      const rightEndLocation = rightStartLocation.add(
-        rightStartLocation.subtract(this.rect.center).multiply(100),
-      );
-      const zapLineEffect = new ZapLineEffect(
+      const rightEndLocation = rightStartLocation.add(new Vector(1000, 0));
+      const zapLineEffect = new TechLineEffect(
         rightStartLocation,
         rightEndLocation,
-        50,
-        20,
-        45,
-        StageStyleManager.currentStyle.StageObjectBorderColor,
+        segmentCount,
+        initLen,
+        preChange,
+        rotateDegrees,
+        effectColor,
         this.timeProgress.clone(),
         2,
       );

src/core/service/effectEngine/concrete/TechLineEffect.tsx

@@ -0,0 +1,98 @@
+import { Random } from "../../../algorithm/random";
+import { Color, mixColors } from "../../../dataStruct/Color";
+import { ProgressNumber } from "../../../dataStruct/ProgressNumber";
+import { Vector } from "../../../dataStruct/Vector";
+import { CurveRenderer } from "../../../render/canvas2d/basicRenderer/curveRenderer";
+import { Renderer } from "../../../render/canvas2d/renderer";
+import { Camera } from "../../../stage/Camera";
+import { EffectObject } from "../effectObject";
+
+/**
+ * 一条富有科技感的连线特效
+ * 从start点开始，朝着end点前进，
+ * 经过segmentCount短折线，每段折线的长度为initLen，每次偏转角度为-rotateDegrees | 0 | rotateDegrees 之间随机
+ * 最终不一定到达end点，因为有随机偏移
+ */
+export class TechLineEffect extends EffectObject {
+  constructor(
+    start: Vector,
+    private end: Vector,
+    private segmentCount: number,
+    private initLen: number,
+    private lenPreChange: number,
+    private maxRotateDegrees: number,
+    private color: Color,
+    public timeProgress: ProgressNumber,
+    private lineWidth = 10,
+  ) {
+    super(timeProgress);
+    this.end = end;
+    this.segmentCount = segmentCount;
+    this.initLen = initLen;
+    this.lenPreChange = lenPreChange;
+    this.maxRotateDegrees = maxRotateDegrees;
+    this.currentPoints.push(start);
+  }
+
+  /**
+   * 记录所有走过的折线点
+   */
+  private currentPoints: Vector[] = [];
+
+  private currentLen = this.initLen;
+
+  tick(): void {
+    super.tick();
+    if (this.currentPoints.length < this.segmentCount + 1) {
+      // 开始增加点
+      const lastPoint = this.currentPoints[this.currentPoints.length - 1];
+      const direction = Vector.fromTwoPoints(lastPoint, this.end).normalize();
+      const randomDegrees = Random.randomItem([
+        -this.maxRotateDegrees,
+        0,
+        this.maxRotateDegrees,
+      ]);
+      const newLocation = lastPoint.add(
+        direction.rotateDegrees(randomDegrees).multiply(this.currentLen),
+      );
+      this.currentPoints.push(newLocation);
+      // 更新长度
+      this.currentLen += this.lenPreChange;
+    }
+  }
+
+  static normal(
+    startLocation: Vector,
+    endLocation: Vector,
+    color: Color,
+  ): TechLineEffect {
+    return new TechLineEffect(
+      startLocation,
+      endLocation,
+      10,
+      100,
+      -5,
+      15,
+      color,
+      new ProgressNumber(0, 50),
+    );
+  }
+
+  render(): void {
+    const currentColor = mixColors(
+      this.color,
+      Color.Transparent,
+      this.timeProgress.rate,
+    );
+    const viewLocations = this.currentPoints.map((p) =>
+      Renderer.transformWorld2View(p),
+    );
+    CurveRenderer.renderSolidLineMultipleWithShadow(
+      viewLocations,
+      currentColor,
+      (1 - this.timeProgress.rate) * this.lineWidth * Camera.currentScale,
+      this.color,
+      10,
+    );
+  }
+}