feat: 暗角特效 BG_Filter_Gray_BG, close #258

ba-archive · Oct 17, 2024 · 691e956 · 691e956
1 parent 58f40d7
commit 691e956
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 3 deletions.
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
diff --git a/lib/ba-story-player/lib/layers/effectLayer/bgEffectHandlers.ts b/lib/ba-story-player/lib/layers/effectLayer/bgEffectHandlers.ts
@@ -68,6 +68,7 @@ export const bgEffectHandlerOptions: BGEffectHandlerOptions = {
   BG_Fireworks_L_BGOff_01: {},
   "BG_ScrollR_1.0": {},
   BG_TvNoise_Sound: {},
+  BG_Filter_Gray_BG: {},
 };
 
 export const bgEffectHandlers: Record<
@@ -112,6 +113,7 @@ const bgEffects = [
   "BG_Fireworks_L_BGOff_01",
   "BG_ScrollR_1.0",
   "BG_TvNoise_Sound",
+  "BG_Filter_Gray_BG",
 ];
 
 /**

diff --git a/lib/ba-story-player/lib/layers/effectLayer/effectFunctions/BG_Filter_Gray_BG.ts b/lib/ba-story-player/lib/layers/effectLayer/effectFunctions/BG_Filter_Gray_BG.ts
@@ -0,0 +1,26 @@
+import { usePlayerStore } from "@/stores";
+import { Sprite } from "pixi.js";
+
+export default async function BG_Filter_Gray_BG(resources: Sprite[]) {
+  // 两种思路，一种是用社区的老电影滤镜，可定制程度更高
+  // 另一种是参考 BG_Shining_L_BGOff 实现，给背景遮罩asset换色，不用带脑子
+  // 虽然两种都很简单，但后者更符合游戏内表现并且不用引入新依赖和新asset，暂时使用后者
+  const { app } = usePlayerStore();
+  const appWidth = app.view.width;
+  const appHeight = app.view.height;
+
+  // 加载资源，加入 tinting
+  const graySprite = resources[0];
+  graySprite.width = appWidth;
+  graySprite.height = appHeight;
+
+  graySprite.tint = 0x000000;
+  graySprite.alpha = 0.8;
+  // 挂载
+  app.stage.addChild(graySprite);
+
+  // 提供销毁特效的回调函数
+  return async () => {
+    app.stage.removeChild(graySprite);
+  };
+}
diff --git a/lib/ba-story-player/lib/stores/index.ts b/lib/ba-story-player/lib/stores/index.ts
@@ -111,6 +111,8 @@ const bgEffectImgTable: BGEffectImgTable = {
   BG_Snow_L: [],
   BG_Fireworks_L_BGOff_01: [],
   "BG_ScrollR_1.0": [],
+  BG_TvNoise_Sound: [],
+  BG_Filter_Gray_BG: ["Gacha/FX_TEX_GT_Circle_Blur_inv.png"],
 };
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

diff --git a/lib/ba-story-player/lib/types/effectLayer.ts b/lib/ba-story-player/lib/types/effectLayer.ts
@@ -49,6 +49,7 @@ export interface BGEffectHandlerOptions {
   BG_Fireworks_L_BGOff_01: {};
   "BG_ScrollR_1.0": {};
   BG_TvNoise_Sound: {};
+  BG_Filter_Gray_BG: {};
 }
 
 /**

diff --git a/lib/ba-story-player/lib/types/excels.ts b/lib/ba-story-player/lib/types/excels.ts
@@ -44,7 +44,8 @@ export type BGEffectType =
   | "BG_Snow_L"
   | "BG_Fireworks_L_BGOff_01"
   | "BG_ScrollR_1.0"
-  | "BG_TvNoise_Sound";
+  | "BG_TvNoise_Sound"
+  | "BG_Filter_Gray_BG";
 
 export enum Nation {
   None = 0,

diff --git a/lib/ba-story-player/package.json b/lib/ba-story-player/package.json
@@ -44,7 +44,8 @@
     "type-fest": "~4.2.0",
     "uuid": "~9.0.0",
     "@types/uuid": "~9.0.2",
-    "element-plus": "^2.7.3"
+    "element-plus": "^2.7.3",
+    "vite-plugin-vue-devtools": "^7.4.6"
   },
   "devDependencies": {
     "@types/node": "^20.12.12",

diff --git a/lib/ba-story-player/vite.config.ts b/lib/ba-story-player/vite.config.ts
@@ -2,6 +2,7 @@ import { resolve } from "path";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import dts from "vite-plugin-dts";
+import vueDevTools from "vite-plugin-vue-devtools";
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -11,7 +12,7 @@ export default defineConfig(({ mode }) => {
         "@": resolve(__dirname, "./lib"),
       },
     },
-    plugins: [vue(), dts()],
+    plugins: [vue(), dts(), vueDevTools()],
     esbuild: {
       drop: mode === "production" ? ["debugger"] : [],
       pure: mode === "production" ? ["console.log"] : [],