feat: 增加电视机雪花特效(close #256)

lib/ba-story-player/lib/layers/effectLayer/bgEffectHandlers.ts

@@ -67,6 +67,7 @@ export const bgEffectHandlerOptions: BGEffectHandlerOptions = {
   BG_Snow_L: {},
   BG_Fireworks_L_BGOff_01: {},
   "BG_ScrollR_1.0": {},
+  BG_TvNoise_Sound: {},
 };
 
 export const bgEffectHandlers: Record<
@@ -110,6 +111,7 @@ const bgEffects = [
   "BG_Snow_L",
   "BG_Fireworks_L_BGOff_01",
   "BG_ScrollR_1.0",
+  "BG_TvNoise_Sound",
 ];
 
 /**
@@ -125,29 +127,27 @@ export async function playBGEffect(bgEffectItem: BGEffectExcelTableItem) {
   //   return
   // }
   await removeBGEffect();
-  const resources = usePlayerStore().bgEffectImgMap.get(effect);
-  if (resources) {
-    const imgs: Sprite[] = [];
-    for (const resource of resources) {
-      imgs.push(Sprite.from(resource));
-    }
-    const handler = bgEffectHandlers[effect];
-    let removeFunction: any;
-    try {
-      removeFunction = await Reflect.apply(handler, undefined, [
-        imgs,
-        bgEffectItem,
-        bgEffectHandlerOptions[effect],
-      ]);
-    } catch (e) {
-      console.error(`执行 ${effect} 时发生错误`, e);
-    }
-    currentBGEffect = {
-      effect,
-      removeFunction,
-      resources: imgs,
-    };
+  const resources = usePlayerStore().bgEffectImgMap.get(effect) ?? [];
+  const imgs: Sprite[] = [];
+  for (const resource of resources) {
+    imgs.push(Sprite.from(resource));
+  }
+  const handler = bgEffectHandlers[effect];
+  let removeFunction: any;
+  try {
+    removeFunction = await Reflect.apply(handler, undefined, [
+      imgs,
+      bgEffectItem,
+      bgEffectHandlerOptions[effect],
+    ]);
+  } catch (e) {
+    console.error(`执行 ${effect} 时发生错误`, e);
   }
+  currentBGEffect = {
+    effect,
+    removeFunction,
+    resources: imgs,
+  };
 }
 for (const effect of bgEffects) {
   const handler = getEffectFunctions(effect);

lib/ba-story-player/lib/layers/effectLayer/effectFunctions/BG_TvNoise_Sound.ts

@@ -0,0 +1,71 @@
+import eventBus from "@/eventBus";
+import { usePlayerStore } from "@/stores";
+import { Container, Sprite, Texture, Graphics, filters } from "pixi.js";
+import { BGEffectHandlerFunction } from "@/types/effectLayer";
+
+const BG_TvNoise_Sound: BGEffectHandlerFunction<'BG_TvNoise_Sound'> = async () => {
+  // 原理是使用噪点滤镜产生电视机雪花的效果
+  const { app } = usePlayerStore();
+  const { width: appWidth, height: appHeight } = app.view;
+
+  const container = new Container();
+  app.stage.addChild(container);
+
+  // 第一层，电视雪花效果
+  const screen = new Sprite(Texture.WHITE);
+  screen.width = appWidth;
+  screen.height = appHeight;
+  container.addChild(screen);
+
+  // 第二层，渐变效果
+  const mask = new Graphics();
+  mask.beginFill(0x000000);
+  mask.drawRect(0, 0, appWidth, appHeight / 4);
+  mask.drawRect(0, 0, appWidth / 4, appHeight);
+  mask.drawRect(0, appHeight * 3 / 4, appWidth, appHeight / 4);
+  mask.drawRect(appWidth * 3 / 4, 0, appWidth / 4, appHeight);
+  mask.endFill();
+  mask.filters = [new filters.AlphaFilter(0.3), new filters.BlurFilter(50)];
+  container.addChild(mask);
+
+  // 第三层，纵向移动的黑色条纹
+  const bar = new Graphics();
+  bar.beginFill(0x000000);
+  bar.drawRect(0, -appHeight / 2, appWidth, appHeight / 6);
+  bar.drawRect(0, -appHeight * 3 / 2, appWidth, appHeight / 12);
+  bar.drawRect(0, -appHeight * 5 / 2, appWidth, appHeight / 3);
+  bar.endFill();
+  bar.filters = [new filters.AlphaFilter(0.3), new filters.BlurFilter(5)];
+  container.addChild(bar);
+
+  let count = 0;
+  const tvNoiseSpeed = 5;
+  const barMoveSpeed = 20;
+  const animation = (delta: number) => {
+    // 每隔一段时间添加噪点滤镜
+    count += delta;
+    if (count > tvNoiseSpeed) {
+      screen.filters = [
+        new filters.NoiseFilter(5),
+        new filters.BlurFilter(0.5),
+        new filters.FXAAFilter(),
+      ];
+      count %= tvNoiseSpeed;
+    }
+    // 黑色条纹纵向移动
+    bar.y += barMoveSpeed * delta;
+    if (bar.y > appHeight * 3.5) {
+      bar.y = 0;
+    }
+  }
+  app.ticker.add(animation);
+
+  eventBus.emit("playBgEffectSound", "BG_Flash_Sound");
+
+  return async () => {
+    app.ticker.remove(animation);
+    container.destroy();
+  }
+}
+
+export default BG_TvNoise_Sound;

lib/ba-story-player/lib/types/effectLayer.ts

@@ -48,6 +48,7 @@ export interface BGEffectHandlerOptions {
   BG_Snow_L: {};
   BG_Fireworks_L_BGOff_01: {};
   "BG_ScrollR_1.0": {};
+  BG_TvNoise_Sound: {};
 }
 
 /**

lib/ba-story-player/lib/types/excels.ts

@@ -43,7 +43,8 @@ export type BGEffectType =
   | "BG_ScrollR_0.5"
   | "BG_Snow_L"
   | "BG_Fireworks_L_BGOff_01"
-  | "BG_ScrollR_1.0";
+  | "BG_ScrollR_1.0"
+  | "BG_TvNoise_Sound";
 
 export enum Nation {
   None = 0,