Merge pull request #692 from OpenWebGAL/dev

4.5.13

Author: MakinoharaShoko

dev-docs/演出调用说明.md

@@ -2,20 +2,37 @@
 
 第一步，语句调用器 `runScript.ts` 根据语句类型执行一个语句，语句会返回一个IPerform对象，并将当前语句的演出写入到场景状态。
 
-第二步，语句调用器 `runScript.ts` 会设定一个自动的计时器，用于结束并卸载对象。
-
 ```typescript
+/**
+ * 描述演出的接口，主要用于控制演出，而不是执行（在演出开始时被调用演出的执行器返回）
+ * @interface IPerform
+ */
 export interface IPerform {
-    performName: string,// 演出名称，用于在后面手动清除演出，如果没有标识，则代表不是保持演出，给予一个随机字符串
-    duration: number, // 持续时间，单位为ms，持续时间到后强制设置该演出为“已经结束”状态
-    isOver: boolean, //演出是否已经结束
-    isHoldOn: boolean, //演出是不是一个保持类型的演出
-    stopFunction: Function, // 卸载演出的函数，这个函数不一定要真的卸载演出，只是在演出结束时会默认调用。
-    blockingNext: Function // 演出是否阻塞游戏流程继续（一个函数，返回 boolean类型的结果，判断要不要阻塞）
-    blockingAuto: Function //演出是否阻塞自动模式（一个函数，返回 boolean类型的结果，判断要不要阻塞）
+  // 演出名称，用于在后面手动清除演出，如果没有标识，则代表不是保持演出，给予一个随机字符串
+  performName: string;
+  // 持续时间，单位为ms，持续时间到后自动回收演出
+  duration: number;
+  // 演出是不是一个保持类型的演出
+  isHoldOn: boolean;
+  // 卸载演出的函数
+  stopFunction: () => void;
+  // 演出是否阻塞游戏流程继续（一个函数，返回 boolean类型的结果，判断要不要阻塞）
+  blockingNext: () => boolean;
+  // 演出是否阻塞自动模式（一个函数，返回 boolean类型的结果，判断要不要阻塞）
+  blockingAuto: () => boolean;
+  // 自动回收使用的 Timeout，一般在调用演出的函数里不设置，演出管理器获取到 IPerofrm 后会根据 duration 自动设置
+  stopTimeout: undefined | ReturnType<typeof setTimeout>;
+  // 演出结束后转到下一句
+  goNextWhenOver?: boolean;
+  // 对于延迟触发的演出，使用 Promise
+  arrangePerformPromise?: Promise<IPerform>;
+  // 跳过由 nextSentence 函数引发的演出回收
+  skipNextCollect?: boolean;
 }
 ```
 
+第二步，语句调用器 `runScript.ts` 会设定一个自动的计时器，用于结束并卸载对象。
+
 第三步，在演出时间抵达时，卸载演出（语句调用器会在指定时间自动卸载），直到演出列表里没有演出（保持演出则不会卸载）
 
 **注意：`isOver` 为 `true` 时，不会阻塞auto和next，这时候不检查 `blockingNext` 与 `blockingAuto`**

package.json

@@ -23,7 +23,7 @@
   },
   "private": true,
   "engines": {
-    "node": "18"
+    "node": ">=18"
   },
   "packageManager": "[email protected]"
 }

packages/webgal/index.html

@@ -71,6 +71,8 @@
       </div>
       <div style="position: absolute;
         bottom: 1em;
+        color:#999;
+        font-size: 75%;
         display: flex;
         justify-content: center;
         width: 100%;
@@ -80,10 +82,6 @@
           Powered by <a href="https://github.com/OpenWebGAL/WebGAL"
             onclick="jump(event, 'https://github.com/OpenWebGAL/WebGAL')">WebGAL</a> Framework
         </div>
-        <div>
-          Made with ❤ by <a href="https://github.com/OpenWebGAL"
-            onclick="jump(event, 'https://github.com/OpenWebGAL')">OpenWebGAL</a>
-        </div>
       </div>
     </div>
   </div>

packages/webgal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webgal-engine",
-  "version": "4.5.12",
+  "version": "4.5.13",
   "scripts": {
     "dev": "vite --host --port 3000",
     "build": "cross-env NODE_ENV=production tsc && vite build --base=./",
@@ -50,6 +50,7 @@
     "prettier": "^2.6.2",
     "rollup-plugin-visualizer": "^5.6.0",
     "typescript": "^4.5.4",
+    "unplugin-info": "^1.2.2",
     "vite": "^4.5.5"
   }
 }

packages/webgal/public/game/scene/demo_zh_cn.txt

@@ -30,7 +30,7 @@ WebGAL:新版本添加了特性：获取用户输入，你要尝试一下吗？
 choose:尝试一下:userInput|算了吧:toNextPart;
 
 label:userInput;
-getUserInput:name -title=如何称呼你 -buttonText=确认;
+getUserInput:name -title=如何称呼你 -buttonText=确认 -defaultValue=WebGALPlayer;
 WebGAL:很高兴遇见你，{name}！
 jumpLabel:toNextPart;
 

packages/webgal/public/game/template/template.json

@@ -1,4 +1,4 @@
 {
   "name":"Default Template",
-  "webgal-version":"4.5.12"
+  "webgal-version":"4.5.13"
 }

packages/webgal/src/App.tsx

@@ -1,26 +1,23 @@
-import Title from '@/UI/Title/Title';
-import Logo from '@/UI/Logo/Logo';
-import { useEffect } from 'react';
-import { initializeScript } from './Core/initializeScript';
-import Menu from '@/UI/Menu/Menu';
 import { Stage } from '@/Stage/Stage';
-import { BottomControlPanel } from '@/UI/BottomControlPanel/BottomControlPanel';
 import { Backlog } from '@/UI/Backlog/Backlog';
-import { Extra } from '@/UI/Extra/Extra';
+import { BottomControlPanel } from '@/UI/BottomControlPanel/BottomControlPanel';
 import { BottomControlPanelFilm } from '@/UI/BottomControlPanel/BottomControlPanelFilm';
-import GlobalDialog from '@/UI/GlobalDialog/GlobalDialog';
 import DevPanel from '@/UI/DevPanel/DevPanel';
-import Translation from '@/UI/Translation/Translation';
+import { Extra } from '@/UI/Extra/Extra';
+import GlobalDialog from '@/UI/GlobalDialog/GlobalDialog';
+import Logo from '@/UI/Logo/Logo';
+import Menu from '@/UI/Menu/Menu';
 import { PanicOverlay } from '@/UI/PanicOverlay/PanicOverlay';
-import { useFullScreen } from './hooks/useFullScreen';
+import Title from '@/UI/Title/Title';
+import Translation from '@/UI/Translation/Translation';
+import { useEffect } from 'react';
+import { initializeScript } from './Core/initializeScript';
 
 function App() {
   useEffect(() => {
     initializeScript();
   }, []);
 
-  useFullScreen();
-
   // Provider用于对各组件提供状态
   return (
     <div className="App">

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

@@ -50,8 +50,9 @@ export const scriptExecutor = () => {
     }
     return;
   }
-  const currentScript: ISentence =
-    WebGAL.sceneManager.sceneData.currentScene.sentenceList[WebGAL.sceneManager.sceneData.currentSentenceId];
+  const currentScript: ISentence = cloneDeep(
+    WebGAL.sceneManager.sceneData.currentScene.sentenceList[WebGAL.sceneManager.sceneData.currentSentenceId],
+  );
 
   const interpolationOneItem = (content: string): string => {
     let retContent = content;

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

@@ -563,7 +563,7 @@ export default class PixiStage {
           const targetHeight = originalHeight * targetScale;
           thisFigureContainer.setBaseY(this.stageHeight / 2);
           if (targetHeight < this.stageHeight) {
-            thisFigureContainer.setBaseY(this.stageHeight / 2 + this.stageHeight - targetHeight / 2);
+            thisFigureContainer.setBaseY(this.stageHeight / 2 + (this.stageHeight - targetHeight) / 2);
           }
           if (presetPosition === 'center') {
             thisFigureContainer.setBaseX(this.stageWidth / 2);
@@ -627,8 +627,9 @@ export default class PixiStage {
       }
       // 挂载
       this.figureContainer.addChild(thisFigureContainer);
+      const figureUuid = uuid();
       this.figureObjects.push({
-        uuid: uuid(),
+        uuid: figureUuid,
         key: key,
         pixiContainer: thisFigureContainer,
         sourceUrl: jsonPath,
@@ -639,7 +640,7 @@ export default class PixiStage {
       const instance = this;
 
       const setup = (stage: PixiStage) => {
-        if (thisFigureContainer) {
+        if (thisFigureContainer && this.getStageObjByUuid(figureUuid)) {
           (async function () {
             let overrideBounds: [number, number, number, number] = [0, 0, 0, 0];
             const mot = webgalStore.getState().stage.live2dMotion.find((e) => e.target === key);
@@ -662,22 +663,29 @@ export default class PixiStage {
             models.forEach((model) => {
               const scaleX = stageWidth / model.width;
               const scaleY = stageHeight / model.height;
-              const targetScale = Math.min(scaleX, scaleY) * 1.5;
+              const targetScale = Math.min(scaleX, scaleY);
               const targetWidth = model.width * targetScale;
-              // const targetHeight = model.height * targetScale;
-
-              model.scale.set(targetScale);
+              const targetHeight = model.height * targetScale;
+              model.scale.x = targetScale;
+              model.scale.y = targetScale;
               model.anchor.set(0.5);
-              model.position.x = stageWidth / 2;
-              model.position.y = stageHeight / 1.2;
+              model.position.x = 0;
+              model.position.y = stageHeight / 2;
 
-              if (pos === 'left') {
-                model.position.x = targetWidth / 2;
+              let baseY = stageHeight / 2;
+              if (targetHeight < stageHeight) {
+                baseY = stageHeight / 2 + (stageHeight - targetHeight) / 2;
               }
-              if (pos === 'right') {
-                model.position.x = stageWidth - targetWidth / 2;
+              thisFigureContainer.setBaseY(baseY);
+              if (pos === 'center') {
+                thisFigureContainer.setBaseX(stageWidth / 2);
+              } else if (pos === 'left') {
+                thisFigureContainer.setBaseX(targetWidth / 2);
+              } else if (pos === 'right') {
+                thisFigureContainer.setBaseX(stageWidth - targetWidth / 2);
               }
 
+              thisFigureContainer.pivot.set(0, stageHeight / 2);
               let motionToSet = motion;
               let animation_index = 0;
               let priority_number = 3;

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

@@ -15,6 +15,7 @@ import {
   getRadiusAlphaFilter,
   setRadiusAlphaFilter,
 } from '@/Core/controller/stage/pixi/shaders/RadiusAlphaFilter';
+import { AdjustmentFilter } from 'pixi-filters';
 
 export class WebGALPixiContainer extends PIXI.Container {
   public containerFilters = new Map<string, PIXI.Filter>();
@@ -115,6 +116,82 @@ export class WebGALPixiContainer extends PIXI.Container {
     }
   }
 
+  /**
+   * adjustment filter
+   * @public
+   */
+  public getOrCreateAdjustmentFilter(): AdjustmentFilter {
+    const filterFromMap = this.containerFilters.get('adjustment');
+    if (filterFromMap) {
+      return filterFromMap as AdjustmentFilter;
+    } else {
+      const adjustment = new AdjustmentFilter();
+      this.addFilter(adjustment);
+      this.containerFilters.set('adjustment', adjustment);
+      return adjustment;
+    }
+  }
+
+  public isAdjustmentFilterExist(): boolean {
+    return this.containerFilters.has('adjustment');
+  }
+
+  public get brightness(): number {
+    return this.getOrCreateAdjustmentFilter().brightness;
+  }
+  public set brightness(value: number) {
+    if (value === 1 && !this.isAdjustmentFilterExist()) return;
+    this.getOrCreateAdjustmentFilter().brightness = value;
+  }
+
+  public get contrast(): number {
+    return this.getOrCreateAdjustmentFilter().contrast;
+  }
+  public set contrast(value: number) {
+    if (value === 1 && !this.isAdjustmentFilterExist()) return;
+    this.getOrCreateAdjustmentFilter().contrast = value;
+  }
+
+  public get saturation(): number {
+    return this.getOrCreateAdjustmentFilter().saturation;
+  }
+  public set saturation(value: number) {
+    if (value === 1 && !this.isAdjustmentFilterExist()) return;
+    this.getOrCreateAdjustmentFilter().saturation = value;
+  }
+
+  public get gamma(): number {
+    return this.getOrCreateAdjustmentFilter().gamma;
+  }
+  public set gamma(value: number) {
+    if (value === 1 && !this.isAdjustmentFilterExist()) return;
+    this.getOrCreateAdjustmentFilter().gamma = value;
+  }
+
+  public get colorRed(): number {
+    return this.getOrCreateAdjustmentFilter().red * 255.0;
+  }
+  public set colorRed(value: number) {
+    if (value === 255 && !this.isAdjustmentFilterExist()) return;
+    this.getOrCreateAdjustmentFilter().red = value / 255.0;
+  }
+
+  public get colorGreen(): number {
+    return this.getOrCreateAdjustmentFilter().green * 255.0;
+  }
+  public set colorGreen(value: number) {
+    if (value === 255 && !this.isAdjustmentFilterExist()) return;
+    this.getOrCreateAdjustmentFilter().green = value / 255.0;
+  }
+
+  public get colorBlue(): number {
+    return this.getOrCreateAdjustmentFilter().blue * 255.0;
+  }
+  public set colorBlue(value: number) {
+    if (value === 255 && !this.isAdjustmentFilterExist()) return;
+    this.getOrCreateAdjustmentFilter().blue = value / 255.0;
+  }
+
   /**
    * old film filter
    * @public