From 295f8236173b8270a4171619fa21197788b4c6f7 Mon Sep 17 00:00:00 2001 From: ChangeSuger Date: Mon, 14 Oct 2024 15:21:58 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=94=B5=E8=A7=86?= =?UTF-8?q?=E6=9C=BA=E9=9B=AA=E8=8A=B1=E7=89=B9=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layers/effectLayer/bgEffectHandlers.ts | 44 ++++++------ .../effectFunctions/BG_TvNoise_Sound.ts | 71 +++++++++++++++++++ lib/ba-story-player/lib/types/effectLayer.ts | 1 + lib/ba-story-player/lib/types/excels.ts | 3 +- 4 files changed, 96 insertions(+), 23 deletions(-) create mode 100644 lib/ba-story-player/lib/layers/effectLayer/effectFunctions/BG_TvNoise_Sound.ts diff --git a/lib/ba-story-player/lib/layers/effectLayer/bgEffectHandlers.ts b/lib/ba-story-player/lib/layers/effectLayer/bgEffectHandlers.ts index 5388cb6a..e44b189d 100644 --- a/lib/ba-story-player/lib/layers/effectLayer/bgEffectHandlers.ts +++ b/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); diff --git a/lib/ba-story-player/lib/layers/effectLayer/effectFunctions/BG_TvNoise_Sound.ts b/lib/ba-story-player/lib/layers/effectLayer/effectFunctions/BG_TvNoise_Sound.ts new file mode 100644 index 00000000..56233623 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/lib/ba-story-player/lib/types/effectLayer.ts b/lib/ba-story-player/lib/types/effectLayer.ts index fcd7b890..0f536e00 100644 --- a/lib/ba-story-player/lib/types/effectLayer.ts +++ b/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: {}; } /** diff --git a/lib/ba-story-player/lib/types/excels.ts b/lib/ba-story-player/lib/types/excels.ts index f76c2d4a..fe60f7dc 100644 --- a/lib/ba-story-player/lib/types/excels.ts +++ b/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,