OpenWebGAL · HardyNLee · May 6, 2025
diff --git a/packages/webgal/index.html b/packages/webgal/index.html
@@ -13,8 +13,6 @@
   <!--快速显示落地页，让用户感知不到加载的过程-->
   <div id="ebg"></div>
   <div id="Title_enter_page" onclick="enter()" style="
-            width: 2560px;
-            height: 1440px;
             overflow: hidden;
             position: absolute;
             top: 0;
@@ -89,114 +87,6 @@
   </div>
   <div id="panic-overlay"> <!-- 紧急回避 --> </div>
   <div id="root"></div>
-  <script>
-    /**
-     * 在窗口大小改变时进行强制缩放
-     */
-    const ua = navigator.userAgent;
-    const isIOSDevice = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-    function resize() {
-      const targetHeight = 1440;
-      const targetWidth = 2560;
-
-      const h = window.innerHeight; // 窗口高度
-      const w = window.innerWidth; // 窗口宽度
-      const zoomH = h / targetHeight; // 以窗口高度为基准的变换比
-      const zoomW = w / targetWidth; // 以窗口宽度为基准的变换比
-      const zoomH2 = w / targetHeight; // 竖屏时以窗口高度为基础的变换比
-      const zoomW2 = h / targetWidth; // 竖屏时以窗口宽度为基础的变换比
-      let mh = (targetHeight - h) / 2; // y轴移动距离
-      let mw = (targetWidth - w) / 2; // x轴移动距离
-      let mh2os = targetWidth / 2 - w / 2; // 竖屏时 y轴移动距离
-      let mw2os = targetHeight / 2 - h / 2; // 竖屏时 x轴移动距离
-      let transform = '';
-      let ebgTransform = '';
-      const root = document.getElementById('root'); // 获取根元素
-      const title = document.getElementById('Title_enter_page');
-      const ebg = document.getElementById('ebg');
-      const elements = [root, title];
-      if (w > h) {
-        const ebg = document.getElementById('ebg');
-        if (ebg) {
-          ebg.style.height = `100vh`;
-          ebg.style.width = `100vw`;
-          ebgTransform = '';
-        }
-        mw = -mw;
-        mh = -mh;
-        if (w * (9 / 16) >= h) {
-          transform = `translate(${mw}px, ${mh}px) scale(${zoomH},${zoomH})`;
-        }
-        if (w * (9 / 16) < h) {
-          transform = `translate(${mw}px, ${mh}px) scale(${zoomW},${zoomW})`;
-        }
-      } else {
-        /**
-         * 旋转
-         */
-        if (ebg) {
-          ebg.style.height = `${targetHeight}px`;
-          ebg.style.width = `${targetWidth}px`;
-        }
-        mw2os = -mw2os;
-        if (h * (9 / 16) >= w) {
-          ebgTransform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomH2 * 1.75},${zoomH2 * 1.75})`;
-          transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomH2},${zoomH2})`;
-        }
-        if (h * (9 / 16) < w) {
-          ebgTransform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomW2 * 1.75},${zoomW2 * 1.75})`;
-          transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomW2},${zoomW2})`;
-        }
-        /**
-         * iOS 不强制旋转
-         */
-        if (isIOSDevice) {
-          const zoomWi = w / targetWidth;
-          transform = `translate(${-mw}px, ${-mh}px) scale(${zoomWi},${zoomWi})`
-        }
-      }
-      if (ebg) {
-        ebg.style.transform = ebgTransform;
-      }
-      for (const element of elements) {
-        if (element) {
-          element.style.transform = transform;
-        }
-      }
-    }
-
-    if (!isIOSDevice) {
-      // 创建一个新的 meta 标签
-      const meta = document.createElement('meta');
-      meta.name = "viewport";
-      meta.content = "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no";
-      // 将该标签添加到 head 中
-      document.getElementsByTagName('head')[0].appendChild(meta);
-      resize();
-      window.onload = resize;
-      window.onresize = resize;
-      // 监听键盘 F11 事件，全屏时触发页面调整
-      document.onkeydown = function (event) {
-        const e = event;
-        if (e && e.key === 'F11') {
-          setTimeout(() => {
-            resize();
-          }, 100);
-        }
-      };
-    } else {
-      // ios
-      const meta = document.createElement('meta');
-      meta.name = "viewport";
-      meta.content = "width=device-width, initial-scale=0.22, minimum-scale=0.01, maximum-scale=1";
-      document.getElementsByTagName('head')[0].appendChild(meta);
-      const style = document.createElement('style');
-      style.type = 'text/css';
-      style.textContent = '* { font-synthesis: none !important; }';
-      document.head.appendChild(style);
-    }
-
-  </script>
   <script>
     /**
      * 注册 Service Worker

diff --git a/packages/webgal/public/game/config.txt b/packages/webgal/public/game/config.txt
@@ -4,3 +4,5 @@ Title_img:WebGAL_New_Enter_Image.png;
 Title_bgm:s_Title.mp3;
 Game_Logo:WebGalEnter.png;
 Enable_Appreciation:true;
+Canvas_width:2560;
+Canvas_height:1440;
diff --git a/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts b/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
@@ -8,7 +8,6 @@ import { logger } from '@/Core/util/logger';
 import { isIOS } from '@/Core/initializeScript';
 import { WebGALPixiContainer } from '@/Core/controller/stage/pixi/WebGALPixiContainer';
 import { WebGAL } from '@/Core/WebGAL';
-import { SCREEN_CONSTANTS } from '@/Core/util/constants';
 import { addSpineBgImpl, addSpineFigureImpl } from '@/Core/controller/stage/pixi/spine';
 // import { figureCash } from '@/Core/gameScripts/vocal/conentsCash'; // 如果要使用 Live2D，取消这里的注释
 // import { Live2DModel, SoundManager } from 'pixi-live2d-display-webgal'; // 如果要使用 Live2D，取消这里的注释
@@ -79,8 +78,8 @@ export default class PixiStage {
   public notUpdateBacklogEffects = false;
   public readonly figureContainer: PIXI.Container;
   public figureObjects: Array<IStageObject> = [];
-  public stageWidth = SCREEN_CONSTANTS.width;
-  public stageHeight = SCREEN_CONSTANTS.height;
+  public stageWidth = WebGAL.canvasWidth;
+  public stageHeight = WebGAL.canvasHeight;
   public assetLoader = new PIXI.Loader();
   public readonly backgroundContainer: PIXI.Container;
   public backgroundObjects: Array<IStageObject> = [];
@@ -133,6 +132,7 @@ export default class PixiStage {
     app.renderer.autoResize = true;
     const appRoot = document.getElementById('root');
     if (appRoot) {
+      this.setRootSize(document);
       app.renderer.resize(appRoot.clientWidth, appRoot.clientHeight);
     }
     if (isIOS) {
@@ -167,6 +167,122 @@ export default class PixiStage {
     this.initialize().then(() => {});
   }
 
+  private setRootSize(document: Document) {
+    /**
+     * 在窗口大小改变时进行强制缩放
+     */
+    const ua = navigator.userAgent;
+    const isIOSDevice = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+    function resize() {
+      const targetHeight = WebGAL.canvasHeight;
+      const targetWidth = WebGAL.canvasWidth;
+
+      const h = window.innerHeight; // 窗口高度
+      const w = window.innerWidth; // 窗口宽度
+      const zoomH = h / targetHeight; // 以窗口高度为基准的变换比
+      const zoomW = w / targetWidth; // 以窗口宽度为基准的变换比
+      const zoomH2 = w / targetHeight; // 竖屏时以窗口高度为基础的变换比
+      const zoomW2 = h / targetWidth; // 竖屏时以窗口宽度为基础的变换比
+      let mh = (targetHeight - h) / 2; // y轴移动距离
+      let mw = (targetWidth - w) / 2; // x轴移动距离
+      let mh2os = targetWidth / 2 - w / 2; // 竖屏时 y轴移动距离
+      let mw2os = targetHeight / 2 - h / 2; // 竖屏时 x轴移动距离
+      let transform = '';
+      let ebgTransform = '';
+      const root = document.getElementById('root'); // 获取根元素
+      const title = document.getElementById('Title_enter_page');
+      const ebg = document.getElementById('ebg');
+      const elements = [root, title];
+      if (root) {
+        root.style.width = `${targetWidth}px`;
+        root.style.height = `${targetHeight}px`;
+      }
+      if (title) {
+        title.style.width = `${targetWidth}px`;
+        title.style.height = `${targetHeight}px`;
+      }
+      if (w > h) {
+        const ebg = document.getElementById('ebg');
+        if (ebg) {
+          ebg.style.height = `100vh`;
+          ebg.style.width = `100vw`;
+          ebgTransform = '';
+        }
+        mw = -mw;
+        mh = -mh;
+        if (w * (targetHeight / targetWidth) >= h) {
+          transform = `translate(${mw}px, ${mh}px) scale(${zoomH},${zoomH})`;
+        }
+        if (w * (targetHeight / targetWidth) < h) {
+          transform = `translate(${mw}px, ${mh}px) scale(${zoomW},${zoomW})`;
+        }
+      } else {
+        /**
+         * 旋转
+         */
+        if (ebg) {
+          ebg.style.height = `${targetHeight}px`;
+          ebg.style.width = `${targetWidth}px`;
+        }
+        mw2os = -mw2os;
+        if (h * (targetHeight / targetWidth) >= w) {
+          ebgTransform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomH2 * 1.75},${zoomH2 * 1.75})`;
+          transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomH2},${zoomH2})`;
+        }
+        if (h * (targetHeight / targetWidth) < w) {
+          ebgTransform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomW2 * 1.75},${zoomW2 * 1.75})`;
+          transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomW2},${zoomW2})`;
+        }
+        /**
+         * iOS 不强制旋转
+         */
+        if (isIOSDevice) {
+          const zoomWi = w / targetWidth;
+          transform = `translate(${-mw}px, ${-mh}px) scale(${zoomWi},${zoomWi})`
+        }
+      }
+      if (ebg) {
+        ebg.style.transform = ebgTransform;
+      }
+      for (const element of elements) {
+        if (element) {
+          element.style.transform = transform;
+        }
+      }
+    }
+
+    if (!isIOSDevice) {
+      // 创建一个新的 meta 标签
+      const meta = document.createElement('meta');
+      meta.name = "viewport";
+      meta.content = "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no";
+      // 将该标签添加到 head 中
+      document.getElementsByTagName('head')[0].appendChild(meta);
+      resize();
+      window.onload = resize;
+      window.onresize = resize;
+      // 监听键盘 F11 事件，全屏时触发页面调整
+      document.onkeydown = function (event) {
+        const e = event;
+        if (e && e.key === 'F11') {
+          setTimeout(() => {
+            resize();
+          }, 100);
+        }
+      };
+    } else {
+      // ios
+      const meta = document.createElement('meta');
+      meta.name = "viewport";
+      meta.content = "width=device-width, initial-scale=0.22, minimum-scale=0.01, maximum-scale=1";
+      document.getElementsByTagName('head')[0].appendChild(meta);
+      const style = document.createElement('style');
+      style.type = 'text/css';
+      style.textContent = '* { font-synthesis: none !important; }';
+      document.head.appendChild(style);
+    }
+  }
+
   public getFigureObjects() {
     return this.figureObjects;
   }

diff --git a/packages/webgal/src/Core/controller/storage/saveGame.ts b/packages/webgal/src/Core/controller/storage/saveGame.ts
@@ -36,9 +36,11 @@ export function generateCurrentStageData(index: number, isSavePreviewImage = tru
     const canvas: HTMLCanvasElement = document.getElementById('pixiCanvas')! as HTMLCanvasElement;
     const canvas2 = document.createElement('canvas');
     const context = canvas2.getContext('2d');
-    canvas2.width = 480;
-    canvas2.height = 270;
-    context!.drawImage(canvas, 0, 0, 480, 270);
+    const previewImageWidth = WebGAL.canvasWidth * 0.2;
+    const previewImageHeight = WebGAL.canvasHeight * 0.2;
+    canvas2.width = previewImageWidth;
+    canvas2.height = previewImageHeight;
+    context!.drawImage(canvas, 0, 0, previewImageWidth, previewImageHeight);
     urlToSave = canvas2.toDataURL('image/webp', 0.5);
     canvas2.remove();
   }

diff --git a/packages/webgal/src/Core/gameScripts/pixi/performs/cherryBlossoms.ts b/packages/webgal/src/Core/gameScripts/pixi/performs/cherryBlossoms.ts
@@ -2,7 +2,6 @@ import * as PIXI from 'pixi.js';
 import { registerPerform } from '@/Core/util/pixiPerformManager/pixiPerformManager';
 
 import { WebGAL } from '@/Core/WebGAL';
-import { SCREEN_CONSTANTS } from '@/Core/util/constants';
 
 const pixicherryBlossoms = (cherryBlossomsSpeed: number) => {
   // アニメーション パラメータ
@@ -35,8 +34,8 @@ const pixicherryBlossoms = (cherryBlossomsSpeed: number) => {
   function tickerFn(delta: number) {
     // 桜の位置を制御するために使用される長さと幅を取得します
     // 获取长宽，用于控制花出现位置
-    const stageWidth = SCREEN_CONSTANTS.width;
-    const stageHeight = SCREEN_CONSTANTS.height;
+    const stageWidth = WebGAL.canvasWidth;
+    const stageHeight = WebGAL.canvasHeight;
     // オブジェクトを作成
     // 创建对象
     const bunny = new PIXI.Sprite(texture);

diff --git a/packages/webgal/src/Core/gameScripts/pixi/performs/rain.ts b/packages/webgal/src/Core/gameScripts/pixi/performs/rain.ts
@@ -2,7 +2,6 @@ import * as PIXI from 'pixi.js';
 import { registerPerform } from '@/Core/util/pixiPerformManager/pixiPerformManager';
 
 import { WebGAL } from '@/Core/WebGAL';
-import { SCREEN_CONSTANTS } from '@/Core/util/constants';
 
 const pixiRain = (rainSpeed: number, number: number) => {
   // 动画参数
@@ -29,8 +28,8 @@ const pixiRain = (rainSpeed: number, number: number) => {
   // 监听动画更新
   function ticker(delta: number) {
     // 获取长宽，用于控制雪花出现位置
-    const stageWidth = SCREEN_CONSTANTS.width;
-    const stageHeight = SCREEN_CONSTANTS.height;
+    const stageWidth = WebGAL.canvasWidth;
+    const stageHeight = WebGAL.canvasHeight;
     for (let i = 0; i < number; i++) {
       // 创建对象
       const bunny = new PIXI.Sprite(texture);

diff --git a/packages/webgal/src/Core/gameScripts/pixi/performs/snow.ts b/packages/webgal/src/Core/gameScripts/pixi/performs/snow.ts
@@ -2,7 +2,6 @@ import * as PIXI from 'pixi.js';
 import { registerPerform } from '@/Core/util/pixiPerformManager/pixiPerformManager';
 
 import { WebGAL } from '@/Core/WebGAL';
-import { SCREEN_CONSTANTS } from '@/Core/util/constants';
 
 const pixiSnow = (snowSpeed: number) => {
   // 动画参数
@@ -27,8 +26,8 @@ const pixiSnow = (snowSpeed: number) => {
   const bunnyList: any = [];
   let addBunnyCounter = 0;
   // 获取长宽，用于控制雪花出现位置
-  const stageWidth = SCREEN_CONSTANTS.width;
-  const stageHeight = SCREEN_CONSTANTS.height;
+  const stageWidth = WebGAL.canvasWidth;
+  const stageHeight = WebGAL.canvasHeight;
   // 监听动画更新
   function tickerFn(delta: number) {
     addBunnyCounter++;