Merge branch 'dev' into steamworks

Author: MakinoharaShoko

.gitattributes

@@ -1,2 +1,2 @@
 # Auto detect text files and perform LF normalization
-* text=auto
+* text=auto eol=lf

packages/webgal/package.json

@@ -15,6 +15,7 @@
     "angular-expressions": "^1.4.3",
     "axios": "^0.30.2",
     "cloudlogjs": "^1.0.9",
+    "gifuct-js": "^2.1.2",
     "i18next": "^22.4.15",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",

packages/webgal/src/Core/controller/gamePlay/scriptExecutor.ts

@@ -43,7 +43,7 @@ export const scriptExecutor = () => {
     WebGAL.sceneManager.sceneData.currentSentenceId >
     WebGAL.sceneManager.sceneData.currentScene.sentenceList.length - 1
   ) {
-    if (WebGAL.sceneManager.sceneData.sceneStack.length !== 0) {
+    if (WebGAL.sceneManager.sceneData.sceneStack.length !== 0 && !WebGAL.sceneManager.lockSceneWrite) {
       const sceneToRestore: ISceneEntry | undefined = WebGAL.sceneManager.sceneData.sceneStack.pop();
       if (sceneToRestore !== undefined) {
         restoreScene(sceneToRestore);

packages/webgal/src/Core/controller/stage/pixi/GifResource.ts

@@ -0,0 +1,158 @@
+import { BaseImageResource, Ticker, UPDATE_PRIORITY, settings } from 'pixi.js';
+import { parseGIF, decompressFrames } from 'gifuct-js';
+
+export interface GifResourceOptions {
+  autoLoad?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
+  animationSpeed?: number;
+  fps?: number;
+}
+
+interface PrecomputedFrame {
+  start: number;
+  end: number;
+  imageData: ImageData;
+}
+
+const findFrame = (frames: PrecomputedFrame[], time: number) => {
+  let low = 0;
+  let high = frames.length - 1;
+  while (low <= high) {
+    const mid = (low + high) >> 1;
+    const f = frames[mid];
+    if (time >= f.start && time < f.end) return f;
+    if (time < f.start) high = mid - 1;
+    else low = mid + 1;
+  }
+  return undefined;
+};
+
+export class GifResource extends BaseImageResource {
+  public static override test(_src: unknown, ext?: string): boolean {
+    return (
+      ext === 'gif' ||
+      (typeof _src === 'string' && _src.trim().toLowerCase().endsWith('.gif')) ||
+      (_src instanceof HTMLImageElement && _src.src.toLowerCase().endsWith('.gif'))
+    );
+  }
+
+  public declare source: HTMLCanvasElement;
+
+  public autoPlay: boolean;
+  public loop: boolean;
+  public animationSpeed: number;
+  public readonly fps: number;
+  public readonly url: string = '';
+
+  private _frames: PrecomputedFrame[] = [];
+  private _currentTime = 0;
+  private _playing = false;
+  private _loadPromise: Promise<this> | null = null;
+
+  public constructor(src: unknown, options: GifResourceOptions = {}) {
+    super(document.createElement('canvas'));
+    if (typeof src === 'string') this.url = src;
+    else if (src instanceof HTMLImageElement) this.url = src.src;
+    this.autoPlay = options.autoPlay ?? true;
+    this.loop = options.loop ?? true;
+    this.animationSpeed = options.animationSpeed ?? 1;
+    this.fps = options.fps ?? 30;
+
+    if (options.autoLoad !== false) this.load();
+  }
+
+  public override async load(): Promise<this> {
+    if (this._loadPromise) return this._loadPromise;
+
+    this._loadPromise = (async () => {
+      const res = await settings.ADAPTER.fetch(this.url);
+      const buffer = await res.arrayBuffer();
+
+      if (!buffer?.byteLength) throw new Error('Invalid GIF buffer');
+
+      const gif = parseGIF(buffer);
+      const gifFrames = decompressFrames(gif, true);
+      if (!gifFrames.length) throw new Error('Invalid GIF file');
+
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d', { willReadFrequently: true })!;
+      const patchCanvas = document.createElement('canvas');
+      const patchCtx = patchCanvas.getContext('2d')!;
+
+      canvas.width = gif.lsd.width;
+      canvas.height = gif.lsd.height;
+
+      let time = 0;
+      let prevFrame: ImageData | null = null;
+      const defaultDelay = 1000 / this.fps;
+
+      for (const frame of gifFrames) {
+        const { dims, delay = defaultDelay, disposalType = 2, patch } = frame;
+        const { width, height, left, top } = dims;
+
+        patchCanvas.width = width;
+        patchCanvas.height = height;
+        const patchData = new ImageData(new Uint8ClampedArray(patch), width, height);
+        patchCtx.putImageData(patchData, 0, 0);
+
+        ctx.drawImage(patchCanvas, left, top);
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+        this._frames.push({ start: time, end: (time += delay), imageData });
+
+        if (disposalType === 2) ctx.clearRect(0, 0, canvas.width, canvas.height);
+        else if (disposalType === 3 && prevFrame) ctx.putImageData(prevFrame, 0, 0);
+
+        prevFrame = imageData;
+      }
+
+      this.source.width = canvas.width;
+      this.source.height = canvas.height;
+      super.update();
+
+      if (this.autoPlay) this.play();
+
+      return this;
+    })();
+
+    return this._loadPromise;
+  }
+
+  public play(): void {
+    if (this._playing) return;
+    this._playing = true;
+    Ticker.shared.add(this._update, this, UPDATE_PRIORITY.HIGH);
+  }
+
+  public stop(): void {
+    if (!this._playing) return;
+    this._playing = false;
+    Ticker.shared.remove(this._update, this);
+  }
+
+  public override dispose(): void {
+    this.stop();
+    super.dispose();
+    this._frames = [];
+    this._loadPromise = null;
+  }
+
+  private _update(): void {
+    if (!this._playing || !this._frames.length) return;
+
+    this._currentTime += Ticker.shared.deltaMS * this.animationSpeed;
+    const frame = findFrame(this._frames, this._currentTime);
+
+    if (frame) {
+      this.source.getContext('2d')!.putImageData(frame.imageData, 0, 0);
+      super.update();
+    }
+
+    const end = this._frames[this._frames.length - 1].end;
+    if (this._currentTime > end) {
+      if (this.loop) this._currentTime %= end;
+      else this.stop();
+    }
+  }
+}

packages/webgal/src/Core/controller/stage/pixi/PixiController.ts

@@ -11,6 +11,8 @@ import { logger } from '@/Core/util/logger';
 import { v4 as uuid } from 'uuid';
 import { cloneDeep, isEqual } from 'lodash';
 import * as PIXI from 'pixi.js';
+import { INSTALLED } from 'pixi.js';
+import { GifResource } from './GifResource';
 
 export interface IAnimationObject {
   setStartState: Function;
@@ -62,6 +64,8 @@ export interface ILive2DRecord {
 // @ts-ignore
 window.PIXI = PIXI;
 
+INSTALLED.push(GifResource);
+
 export default class PixiStage {
   public static assignTransform<T extends ITransform>(target: T, source?: ITransform) {
     if (!source) return;
@@ -990,7 +994,6 @@ export default class PixiStage {
   }
 
   public getFigureMetadataByKey(key: string): IFigureMetadata | undefined {
-    console.log(key, webgalStore.getState().stage.figureMetaData);
     return webgalStore.getState().stage.figureMetaData[key];
   }
 

packages/webgal/src/Core/gameScripts/playEffect.ts

@@ -6,6 +6,7 @@ import { IPerform } from '@/Core/Modules/perform/performInterface';
 import { useSelector } from 'react-redux';
 import { WebGAL } from '@/Core/WebGAL';
 import { WEBGAL_NONE } from '@/Core/constants';
+import { end } from './end';
 
 /**
  * 播放一段效果音
@@ -91,7 +92,7 @@ export const playEffect = (sentence: ISentence): IPerform => {
         };
         resolve(perform);
         seElement?.play();
-        seElement.onended = () => {
+        const endFunc = () => {
           for (const e of WebGAL.gameplay.performController.performList) {
             if (e.performName === performInitName) {
               isOver = true;
@@ -100,6 +101,12 @@ export const playEffect = (sentence: ISentence): IPerform => {
             }
           }
         };
+        seElement.onended = endFunc;
+        seElement.addEventListener('error', (e) => {
+          logger.error(`播放效果音失败: ${url}`);
+          // 播放失败提前结束
+          endFunc();
+        });
       }, 1);
     }),
   };

packages/webgal/src/Core/util/pixiPerformManager/initRegister.ts

@@ -1,3 +1 @@
-import '../../gameScripts/pixi/performs/cherryBlossoms';
-import '../../gameScripts/pixi/performs/rain';
-import '../../gameScripts/pixi/performs/snow';
+import.meta.glob('../../gameScripts/pixi/performs/*.{ts,js,tsx,jsx}', { eager: true });

packages/webgal/vite.config.ts

@@ -1,10 +1,7 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import loadVersion from 'vite-plugin-package-version';
-import { resolve, relative } from 'path';
-import { visualizer } from 'rollup-plugin-visualizer';
-import { readdirSync, watch, writeFileSync } from 'fs';
-import { isEqual } from 'lodash';
+import { resolve } from 'path';
 import Info from 'unplugin-info/vite';
 import viteCompression from 'vite-plugin-compression';
 
@@ -13,40 +10,6 @@ import viteCompression from 'vite-plugin-compression';
 // @ts-ignore
 const env = process.env.NODE_ENV;
 console.log(env);
-(() => {
-  const pixiPerformScriptDirPath = './src/Core/gameScripts/pixi/performs/';
-  const pixiPerformManagerDirPath = './src/Core/util/pixiPerformManager/';
-  const relativePath = relative(pixiPerformManagerDirPath, pixiPerformScriptDirPath).replaceAll('\\', '/');
-  let lastFiles: string[] = [];
-
-  function setInitFile() {
-    console.log('正在自动编写pixi特效依赖注入');
-    writeFileSync(
-      resolve(pixiPerformManagerDirPath, 'initRegister.ts'),
-      lastFiles
-        .map((v) => {
-          const filePath = relativePath + '/' + v.slice(0, v.lastIndexOf('.'));
-          return `import '${filePath}';`;
-        })
-        .join('\n') + '\n',
-      { encoding: 'utf-8' },
-    );
-  }
-
-  function getPixiPerformScriptFiles() {
-    const pixiPerformScriptFiles = readdirSync(pixiPerformScriptDirPath, { encoding: 'utf-8' }).filter((v) =>
-      ['ts', 'js', 'tsx', 'jsx'].includes(v.slice(v.indexOf('.') + 1, v.length)),
-    );
-    if (!isEqual(pixiPerformScriptFiles, lastFiles)) {
-      lastFiles = pixiPerformScriptFiles;
-      setInitFile();
-    }
-  }
-
-  getPixiPerformScriptFiles();
-
-  if (env !== 'production') watch(pixiPerformScriptDirPath, { encoding: 'utf-8' }, getPixiPerformScriptFiles);
-})();
 
 export default defineConfig({
   plugins: [

yarn.lock

@@ -3037,6 +3037,13 @@ gh-pages@^4.0.0:
     fs-extra "^8.1.0"
     globby "^6.1.0"
 
+gifuct-js@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/gifuct-js/-/gifuct-js-2.1.2.tgz#06152437ba30ec914db8398bd838bd0fbc8a6ecd"
+  integrity sha512-rI2asw77u0mGgwhV3qA+OEgYqaDn5UNqgs+Bx0FGwSpuqfYn+Ir6RQY5ENNQ8SbIiG/m5gVa7CD5RriO4f4Lsg==
+  dependencies:
+    js-binary-schema-parser "^2.0.3"
+
 git-up@^8.1.0:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/git-up/-/git-up-8.1.1.tgz#06262adadb89a4a614d2922d803a0eda054be8c5"
@@ -3658,6 +3665,11 @@ jest-worker@^26.2.1:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
+js-binary-schema-parser@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/js-binary-schema-parser/-/js-binary-schema-parser-2.0.3.tgz#3d7848748e8586e63b34e8911b643f59cfb6396e"
+  integrity sha512-xezGJmOb4lk/M1ZZLTR/jaBHQ4gG/lqQnJqdIv4721DMggsa1bDVlHXNeHYogaIEHD9vCRv0fcL4hMA+Coarkg==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"