完成雷电效果

AndewSteve · AndewSteve · commit 97cbbed35893 · 2026-01-22T00:35:11.000+08:00
diff --git a/src/config/AssetKeys.ts b/src/config/AssetKeys.ts
@@ -82,6 +82,9 @@ export const VFXTextureKeys = {
   VfxNoiseBar: 'vfx_noise_bar', 
   // 对应截图上方的圆环图 (用来做冲击波)
   VfxRing: 'vfx_ring',
+  VfxLightningLine: 'vfx_lightning_line',
+  VfxAlertIcon: 'vfx_alert_icon',
+  VfxAlertBg: 'vfx_alert_bg',
 } as const;
 export type VFXTextureKey = typeof VFXTextureKeys[keyof typeof VFXTextureKeys];
 
diff --git a/src/config/AssetManifest.ts b/src/config/AssetManifest.ts
@@ -9,6 +9,26 @@ export interface IAssetDefinition {
   frameConfig?: Phaser.Types.Loader.FileTypes.ImageFrameConfig; // 用于精灵表
 }
 
+const createSpriteSheet = (
+  key: string,
+  path: string,
+  frameWidth: number,
+  frameHeight: number,
+  _frameMax?: number,
+  margin: number = 0,
+  spacing: number = 0
+): IAssetDefinition => ({
+  key,
+  path,
+  type: 'spritesheet',
+  frameConfig: {
+    frameWidth,
+    frameHeight,
+    // frameMax,
+    margin,
+    spacing
+  }
+});
 const SkinConfigs = [
   { baseKey: TextureKeys.DefaultYellowKite, prefix: 'kite_default_yellow',
     parts: ['body_main',                                          'string', 'knot'] },
@@ -95,6 +115,10 @@ export const AssetManifest: IAssetDefinition[] = [
   { key: VFXTextureKeys.VfxNoiseBar, path: 'assets/vfx/noise_bar.png', type: 'image' },
   // 请将截图里的 "FX_TEX_Circle_Ring_Wave_01.png" 改名为 ring.png
   { key: VFXTextureKeys.VfxRing, path: 'assets/vfx/ring.png', type: 'image' },
+  createSpriteSheet(VFXTextureKeys.VfxLightningLine, 'assets/vfx/FX_TEX_Lightning_Line_03a.png', 256, 64, 4),
+  { key: VFXTextureKeys.VfxAlertIcon, path: 'assets/vfx/FX_TEX_Alert_01.png', type: 'image' },
+  // 3x3 网格，256 / 3 = 85.33，向下取整为 85
+  createSpriteSheet(VFXTextureKeys.VfxAlertBg, 'assets/vfx/FX_TEX_Lightning_04.png', 85, 85, 9),
 
 
 
@@ -124,3 +148,7 @@ export const AssetManifest: IAssetDefinition[] = [
   { key: AudioKeys.SfxThunderstorm, path: 'assets/audio/sfx_thunderstorm.wav', type: 'audio' },
   { key: AudioKeys.SfxAurora, path: 'assets/audio/sfx_aurora.mp3', type: 'audio' },
 ]
+
+
+
+
diff --git a/src/entities/summons/LightningColumn.ts b/src/entities/summons/LightningColumn.ts
@@ -1,12 +1,17 @@
 import { BaseSummon, type ISummonInitData } from './BaseSummon';
 import { GameConfig } from '../../config/GameConfig';
 import AudioManager from '../../managers/AudioManager';
-import { AudioKeys } from '../../config/AssetKeys';
+import { AudioKeys, VFXTextureKeys } from '../../config/AssetKeys';
+import { PipelineID } from '../../managers/RenderManager';
+import type LightningFadePipeline from '../../pipelines/LightningFadePipeline';
 
 export class LightningColumn extends BaseSummon {
   private isStriking: boolean = false; // 是否处于伤害阶段
   private warningRect?: Phaser.GameObjects.Rectangle; // 预警线
-  private strikeRect?: Phaser.GameObjects.Rectangle;  // 正式闪电
+  private alertIcon?: Phaser.GameObjects.Image; // 预警图标
+  private alertBg?: Phaser.GameObjects.Sprite; // 预警背景动效
+  private strikeSprite?: Phaser.GameObjects.Sprite;  // 正式闪电
+  private strikeProgress: number = 0;
   
   // 伤害配置
   private readonly WARNING_WIDTH = 200;   // 预警线宽度
@@ -24,31 +29,61 @@ export class LightningColumn extends BaseSummon {
     const screenHeight = this.scene.scale.height;
     // const screenWidth = this.scene.scale.width;
     this.isStriking = false;
+    this.strikeProgress = 0;
 
-    // 1. 创建预警线 (淡淡的细线)
+    // 1. 创建预警线 (红色闪烁)
     // 随机 X 位置已经在 Spawn 时决定了 (this.x)
     this.warningRect = this.scene.add.rectangle(
-      this.x, 
-      screenHeight / 2, 
-      this.WARNING_WIDTH, 
-      screenHeight / minZoom, 
-      0xFFFFFF, 0.3
+      this.x,
+      screenHeight / 2,
+      this.WARNING_WIDTH,
+      screenHeight / minZoom,
+      0xFF3333, 0.3
     )
         .setScrollFactor(0)
         .setDepth(40); // 在玩家下面一点
 
+    const alertAnimKey = 'alert_lightning_bg';
+    if (!this.scene.anims.exists(alertAnimKey)) {
+      this.scene.anims.create({
+        key: alertAnimKey,
+        frames: this.scene.anims.generateFrameNumbers(VFXTextureKeys.VfxAlertBg, { start: 0, end: 8 }),
+        frameRate: 12,
+        repeat: -1
+      });
+    }
+
+    this.alertBg = this.scene.add.sprite(this.x, screenHeight / 2, VFXTextureKeys.VfxAlertBg)
+      .setScrollFactor(0)
+      .setDepth(41)
+      .setScale(2.5);
+    this.alertBg.play(alertAnimKey);
+
+    this.alertIcon = this.scene.add.image(this.x, screenHeight / 2, VFXTextureKeys.VfxAlertIcon)
+      .setScrollFactor(0)
+      .setDepth(42)
+      .setScale(0.5);
+
     // 2. 预警动画 (1.5秒后劈下)
     this.scene.tweens.add({
         targets: this.warningRect,
-        alpha: { from: 0.1, to: 0.5 },
+        alpha: { from: 0.1, to: 0.7 },
         yoyo: true,
-        repeat: 3,
+        repeat: 4,
         duration: 200,
         onComplete: () => {
             this.strike();
         }
     });
-    
+
+    this.scene.tweens.add({
+        targets: this.alertIcon,
+        alpha: { from: 0.2, to: 1 },
+        yoyo: true,
+        repeat: 4,
+        duration: 200
+    });
+
     // 3. 禁用物理 (手动判定)
     if (this.body) this.body.enable = false;
   }
@@ -62,45 +97,71 @@ export class LightningColumn extends BaseSummon {
 
     // 移除预警
     this.warningRect?.destroy();
+    this.alertIcon?.destroy();
+    this.alertBg?.destroy();
     
-    // 创建闪电 (高亮粗柱子)
-    // 颜色：雷电紫/白
-    this.strikeRect = this.scene.add.rectangle(
-      this.x, 
-      screenHeight / 2, 
-      this.DAMAGE_WIDTH, 
-      screenHeight / minZoom, 
-      0x8844FF
+    const frameIndex = Phaser.Math.Between(0, 5);
+    this.strikeSprite = this.scene.add.sprite(
+      this.x,
+      screenHeight / 2,
+      VFXTextureKeys.VfxLightningLine,
+      frameIndex
     )
         .setScrollFactor(0)
         .setDepth(100); // 最上层
+    this.strikeSprite.setRotation(Math.PI / 2);
+    this.strikeSprite.setDisplaySize(screenHeight / minZoom, this.DAMAGE_WIDTH);
 
     AudioManager.playSfx(AudioKeys.SfxThunderbolt);
+
+    let pipeline: LightningFadePipeline | undefined;
+    if (this.scene.game.renderer instanceof Phaser.Renderer.WebGL.WebGLRenderer) {
+      this.strikeSprite.setPipeline(PipelineID.LightningFade);
+      pipeline = this.strikeSprite.pipeline as LightningFadePipeline;
+      pipeline?.setProgress(0);
+      // pipeline?.setColor(0x3aa0ff);
+    }
     
-    // 闪电冲击动画 (0.2秒瞬间)
+    // 闪电冲击动画 (0.5秒进度 + 0.5秒淡出)
     this.scene.tweens.add({
-        targets: this.strikeRect,
-        alpha: { from: 1, to: 0 },
-        width: { from: this.DAMAGE_WIDTH, to: 0 },
-        duration: 300,
+        targets: this,
+        strikeProgress: 1,
+        duration: 500,
         ease: 'Sine.easeOut',
+        onUpdate: () => {
+            if (pipeline) {
+              pipeline.setProgress(this.strikeProgress);
+            }
+        },
         onComplete: () => {
-            // ✅ 1. 视觉上：彻底移除闪电，让玩家以为结束了
-            if (this.strikeRect) {
-                this.strikeRect.destroy();
-                this.strikeRect = undefined;
+            if (!this.strikeSprite) {
+                this.isStriking = false;
+                return;
             }
-
-            // ✅ 2. 逻辑上：强制关闭伤害判定 (防止隐形电人)
-            this.isStriking = false;
-
-            // ✅ 3. 核心修改：延迟 2秒 再真正回收
-            // 这 2秒 期间，getActiveCount() 依然是 1，
-            // 所以 LightningStrikeAction 会一直返回，不会生成新雷
-            const COOLDOWN_TIME = 2000; 
-
-            this.scene.time.delayedCall(COOLDOWN_TIME, () => {
-                 this.despawn(); 
+            this.scene.tweens.add({
+                targets: this.strikeSprite,
+                alpha: 0,
+                duration: 500,
+                ease: 'Sine.easeOut',
+                onComplete: () => {
+                    // ? 1. 视觉上：彻底移除闪电，让玩家以为结束了
+                    if (this.strikeSprite) {
+                        this.strikeSprite.destroy();
+                        this.strikeSprite = undefined;
+                    }
+
+                    // ? 2. 逻辑上：强制关闭伤害判定 (防止隐形电人)
+                    this.isStriking = false;
+
+                    // ? 3. 核心修改：延迟 2秒 再真正回收
+                    // 这 2秒 期间，getActiveCount() 依然是 1，
+                    // 所以 LightningStrikeAction 会一直返回，不会生成新雷
+                    const COOLDOWN_TIME = 2000; 
+
+                    this.scene.time.delayedCall(COOLDOWN_TIME, () => {
+                         this.despawn(); 
+                    });
+                }
             });
         }
     });
@@ -111,8 +172,8 @@ export class LightningColumn extends BaseSummon {
 
   protected onUpdate(_dt: number): void {
     // 只有在劈下的一瞬间 (isStriking) 且 闪电还没完全消失时判定
-    // ✅ 增加 check：如果 strikeRect 已经被销毁了 (处于幽灵冷却期)，直接返回
-    if (!this.isStriking || !this.strikeRect || this.strikeRect.alpha < 0.5) return;
+    // ✅ 增加 check：如果 strikeSprite 已经被销毁了 (处于幽灵冷却期)，直接返回
+    if (!this.isStriking || !this.strikeSprite || this.strikeProgress >= 1) return;
     if (!this.target || !this.target.active) return;
 
     // --- 碰撞判定 (屏幕空间) ---
@@ -154,7 +215,10 @@ export class LightningColumn extends BaseSummon {
 
   protected override onDespawn(): void {
     this.warningRect?.destroy();
-    this.strikeRect?.destroy();
+    this.strikeSprite?.destroy();
     this.kill();
   }
-}
+}
+
+
+
diff --git a/src/managers/BackgroundManager.ts b/src/managers/BackgroundManager.ts
@@ -21,7 +21,7 @@ export default class BackgroundManager {
   private readonly PARALLAX_X = 0.5;
   private readonly CLOUD_SPEED_MULT = 2.0;
   // ✅ 新增：缝隙修复像素 (让图片产生微小重叠，消除接缝闪烁)
-  private readonly OVERLAP_FIX = 2;
+  private readonly OVERLAP_FIX = 4;
 
   // --- 尺寸与定位 ---
   private scaleRatio: number = 1;
diff --git a/src/managers/RenderManager.ts b/src/managers/RenderManager.ts
@@ -3,11 +3,13 @@ import FogPipeline from '../pipelines/FogPipeline';
 import MagicFieldPipeline from '../pipelines/MagicFieldPipeline';
 import DissolvePipeline from '../pipelines/DissolvePipeline';
 import ColdnessPipeline from '../pipelines/ColdnessPipeline';
+import LightningFadePipeline from '../pipelines/LightningFadePipeline';
 
 export const PipelineID = {
   Fog: 'FogPipeline',
   MagicField: 'MagicField',
   Dissolve: 'Dissolve',
+  LightningFade: 'LightningFade',
   Coldness: 'Coldness', // ✅ Add ID
 } as const;
 export type PipelineKey = typeof PipelineID[keyof typeof PipelineID];
@@ -50,6 +52,12 @@ export default class RenderManager {
       this.renderer.pipelines.add(PipelineID.Coldness, new ColdnessPipeline(this.scene.game));
       console.log(`[RenderManager] Pipeline Registered: ${PipelineID.Coldness}`);
     }
+
+    // ✅ 注册 LightningFade Pipeline
+    if (!this.renderer.pipelines.has(PipelineID.LightningFade)) {
+      this.renderer.pipelines.add(PipelineID.LightningFade, new LightningFadePipeline(this.scene.game));
+      console.log(`[RenderManager] Pipeline Registered: ${PipelineID.LightningFade}`);
+    }
   }
 
   // ✅ 3. 公开获取 Pipeline 的方法
@@ -70,4 +78,5 @@ export default class RenderManager {
   public update(_time: number, _delta: number) {
     // 预留 update 接口
   }
-}
+}
+
diff --git a/src/pipelines/LightningFadePipeline.ts b/src/pipelines/LightningFadePipeline.ts
@@ -0,0 +1,30 @@
+import Phaser from 'phaser';
+import LightningFadeVert from '../shaders/LightningFade.vert?raw';
+import LightningFadeFrag from '../shaders/LightningFade.frag?raw';
+
+export default class LightningFadePipeline extends Phaser.Renderer.WebGL.Pipelines.MultiPipeline {
+  private _progress: number = 0;
+  private _color = new Phaser.Display.Color(0, 0, 255);
+
+  constructor(game: Phaser.Game) {
+    const safeFragShader = LightningFadeFrag.replace(/%count%/gi, '1');
+    super({
+      game,
+      vertShader: LightningFadeVert,
+      fragShader: safeFragShader,
+    });
+  }
+
+  onPreRender() {
+    this.set1f('uProgress', this._progress);
+    this.set3f('uColor', this._color.redGL, this._color.greenGL, this._color.blueGL);
+  }
+
+  public setProgress(value: number) {
+    this._progress = Phaser.Math.Clamp(value, 0, 1);
+  }
+
+  public setColor(color: number) {
+    this._color = Phaser.Display.Color.IntegerToColor(color);
+  }
+}
diff --git a/src/scenes/PreloadScene.ts b/src/scenes/PreloadScene.ts
@@ -67,8 +67,8 @@ export default class PreloadScene extends Phaser.Scene {
     // 资源加载完毕，准备进入游戏
     AudioManager.init(this.game);
     
-    // this.scene.start(SceneKeys.Lab);
-    this.scene.start(SceneKeys.MainMenu);
+    this.scene.start(SceneKeys.Lab);
+    // this.scene.start(SceneKeys.MainMenu);
     // // 🧪 检查 URL 参数，决定是进实验室还是进游戏
     // const urlParams = new URLSearchParams(window.location.search);
     // if (urlParams.has('lab')) {
diff --git a/src/shaders/LightningFade.frag b/src/shaders/LightningFade.frag
@@ -0,0 +1,30 @@
+#define SHADER_NAME LIGHTNING_FADE_FS
+precision mediump float;
+
+uniform sampler2D uMainSampler[%count%];
+uniform float uProgress; // 0.0 - 1.0, reveal top to bottom
+uniform vec3 uColor;
+
+varying vec2 outTexCoord;
+varying float outTexId;
+varying float outTintEffect;
+varying vec4 outTint;
+
+void main()
+{
+    vec4 texColor = texture2D(uMainSampler[0], outTexCoord);
+
+    float softness = 0.05;
+    float mask = 1.0 - smoothstep(uProgress, uProgress + softness, outTexCoord.y);
+    // float luminance = dot(texColor.rgb, vec3(0.299, 0.587, 0.114));
+
+    vec4 color;
+    // color.rgb = uColor * luminance;
+    color.rgb = texColor.rgb;
+    // color.a = mask * luminance * outTint.a;
+    color.a = mask * texColor.a;
+    color.rgb *= color.a;
+
+    // gl_FragColor = color;
+    gl_FragColor = color;
+}
diff --git a/src/shaders/LightningFade.vert b/src/shaders/LightningFade.vert
