Merge pull request #275 from MakinoharaShoko/dev

Dev
OpenWebGAL · May 14, 2023 · b3a026c · b3a026c
2 parents c4250f3 + adda888
commit b3a026c
Show file tree

Hide file tree

Showing 34 changed files with 427 additions and 147 deletions.
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,4 @@ dist-ssr
 stats.html
 packages/webgal/public/game.old
 packages/parser/build
+packages/webgal/src/Core/util/pixiPerformManager/initRegister.ts
diff --git a/README.md b/README.md
@@ -1,6 +1,7 @@
 ![WebGAL](https://user-images.githubusercontent.com/30483415/227242979-297ff392-f210-47ef-b0e9-d4788ddc8df0.png)
 
 **[English Version](/README_EN.md)**
+**[日本語版](/README_JP.md)**
 
 **[Help us with translation | 协助翻译 | 翻訳のお手伝い ](https://github.com/MakinoharaShoko/WebGAL/tree/dev/packages/webgal/src/translations)**
 

diff --git a/README_JP.md b/README_JP.md
@@ -0,0 +1,55 @@
+![WebGAL](https://user-images.githubusercontent.com/30483415/227242979-297ff392-f210-47ef-b0e9-d4788ddc8df0.png)
+
+**[中文版本](/README.md)**
+
+**[Help us with translation | 协助翻译 | 翻訳のお手伝い ](https://github.com/MakinoharaShoko/WebGAL/tree/dev/packages/webgal/src/translations)**
+
+**[Join Discord Server](https://discord.gg/kPrQkJttJy)**
+
+# WebGALとは
+
+**WebGALは、Webベースのビジュアルノベルエンジンです。魅力的な機能が豊富で、ビジュアルノベルゲームの開発が簡単にできます。**
+
+デモビデオ: https://youtu.be/S7xxVe9MGXk
+
+## ゲーム紹介
+
+デモゲーム（一部AI画像を使用しています）:
+
+https://webgal-jp-demo.onrender.com/
+
+現在公開されているゲーム（中国語）:
+
+[ベルカラー☆メモリー](http://hoshinasuzu.cn/suzu.html) by Hoshinasuzu  [代替リンク](http://hoshinasuzu.cc/)
+
+### WebGALでゲームを作成
+
+[WebGAL 開発ドキュメント](https://docs.msfasr.com/)
+※日本語の開発ドキュメントは準備中です
+
+[WebGAL Webエディターのダウンロードはこちら](https://github.com/MakinoharaShoko/WebGAL_Terre/releases)
+※日本語化は準備中です
+
+## WebGALの魅力と機能
+
+WebGALは、プログラミング知識が不要で、簡単にビジュアルノベルゲームを作ることができます。
+<br>作成したゲームをウェブサイトに公開すると、プレイヤーは、パソコンやスマホからいつでもどこでもゲームをプレイすることができます。
+<br>ウェブサイトだけではなく、Windowsで実行できるファイルとして出力することも可能です。
+
+主流のビジュアルノベルエンジンのほぼすべての機能をサポートしており、アニメーションや特殊効果を使用して、ゲームのエフェクトをカスタマイズすることも可能です。
+
+### WebGALのエンジン開発に参加（オープンソースプロジェクトに参加）
+
+**エンジン開発に参加したい開発者は、[このプロジェクトの参加ガイド](https://docs.msfasr.com/developers/)をお読みください**
+<br>上記のDiscordに参加すると多くの情報を得ることができます。
+
+### スポンサーシップ
+
+WebGAL はオープンソース ソフトウェアであるため、MPL-2.0 オープンソース ライセンスの範囲内で無料で使用でき、商用利用も可能です。
+<br>スポンサーシップは、開発者が前進し、このプロジェクトをさらに改善する動機となることができます。
+
+[このプロジェクトのスポンサー](https://docs.msfasr.com/sponsor/)
+
+## Stargazers over time
+
+[![Stargazers over time](https://starchart.cc/MakinoharaShoko/WebGAL.svg)](https://starchart.cc/MakinoharaShoko/WebGAL)
diff --git a/packages/webgal/index.html b/packages/webgal/index.html
@@ -185,7 +185,7 @@
   /**
    * 对标题页进行自动强制缩放
    */
-  function resizeTitle() {
+  function resizeTitle(){
     const targetHeight = 1440;
     const targetWidth = 2560;
 
@@ -199,28 +199,84 @@
     let mw = (targetWidth - w) / 2; // x轴移动距离
     let mh2os = targetWidth / 2 - w / 2; // 竖屏时 y轴移动距离
     let mw2os = targetHeight / 2 - h / 2; // 竖屏时 x轴移动距离
-    const root = document.getElementById("Title_enter_page"); // 获取根元素
-    if (root) {
-      if (w > h) {
-        mw = -mw;
-        mh = -mh;
-        if (w * (9 / 16) >= h) {
-          root.style.transform = `translate(${mw}px, ${mh}px) scale(${zoomH},${zoomH})`;
+    const root = document.getElementById('root'); // 获取根元素
+    const title = document.getElementById('Title_enter_page');
+    const elements = [root, title];
+    if (w > h) {
+      const ebg = document.getElementById('ebg');
+      if (ebg) {
+        ebg.style.translate = ``;
+        ebg.style.scale = ``;
+        ebg.style.rotate = ``;
+        ebg.style.height = `100vh`;
+        ebg.style.width = `100vw`;
+      }
+
+      mw = -mw;
+      mh = -mh;
+      if (w * (9 / 16) >= h) {
+        for (const element of elements) {
+          if (element) {
+            // element.style.transform = `translate(${mw}px, ${mh}px) scale(,${zoomH})`;
+            element.style.translate = `${mw}px ${mh}px`;
+            element.style.scale = `${zoomH}`;
+            element.style.rotate = ``;
+          }
+        }
+      }
+      if (w * (9 / 16) < h) {
+        for (const element of elements) {
+          if (element) {
+            element.style.translate = `${mw}px ${mh}px`;
+            element.style.scale = `${zoomW}`;
+            element.style.rotate = ``;
+          }
+        }
+      }
+    } else {
+      /**
+       * 旋转
+       */
+      const ebg = document.getElementById('ebg');
+      if (ebg) {
+        ebg.style.height = `${targetHeight}px`;
+        ebg.style.width = `${targetWidth}px`;
+      }
+      // mw2os = -mw2os;
+      if (h * (9 / 16) >= w) {
+        mh2os = -mh2os;
+        mw2os = -mw2os;
+        if (ebg) {
+          ebg.style.rotate = `90deg`;
+          ebg.style.translate = `${mh2os}px ${mw2os}px`;
+          ebg.style.scale = `${zoomH2 * 1.25}`;
         }
-        if (w * (9 / 16) < h) {
-          root.style.transform = `translate(${mw}px, ${mh}px) scale(${zoomW},${zoomW})`;
+        for (const element of elements) {
+          if (element) {
+            element.style.translate = `${mh2os}px ${mw2os}px`;
+            element.style.scale = `${zoomH2}`;
+            element.style.rotate = `90deg`;
+          }
         }
-      } else {
+      }
+      if (h * (9 / 16) < w) {
+        mh2os = -mh2os;
         mw2os = -mw2os;
-        if (h * (9 / 16) >= w) {
-          root.style.transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomH2},${zoomH2})`;
+        if (ebg) {
+          ebg.style.rotate = `90deg`;
+          ebg.style.translate = `${mh2os}px ${mw2os}px`;
+          ebg.style.scale = `${zoomH2}`;
         }
-        if (h * (9 / 16) < w) {
-          root.style.transform = `rotate(90deg) translate(${mw2os}px, ${mh2os}px) scale(${zoomW2},${zoomW2})`;
+        for (const element of elements) {
+          if (element) {
+            element.style.translate = `${mh2os}px ${mw2os}px`;
+            element.style.scale = `${zoomW2}`;
+            element.style.rotate = `90deg`;
+          }
         }
       }
     }
-  }
+  };
 </script>
 </body>
 </html>
diff --git a/packages/webgal/package.json b/packages/webgal/package.json
@@ -4,7 +4,7 @@
   "version": "4.3.15",
   "scripts": {
     "dev": "vite --host --port 3000",
-    "build": "tsc && vite build --base=./",
+    "build": "cross-env NODE_ENV=production tsc && vite build --base=./",
     "preview": "vite preview",
     "lint": "eslint src/** --fix"
   },
@@ -39,6 +39,7 @@
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
     "@vitejs/plugin-react": "^1.0.7",
+    "cross-env": "^7.0.3",
     "eslint": "^8.13.0",
     "eslint-config-alloy": "^4.5.1",
     "eslint-config-prettier": "^8.5.0",

diff --git a/packages/webgal/src/App.tsx b/packages/webgal/src/App.tsx
@@ -20,18 +20,18 @@ function App() {
 
   // Provider用于对各组件提供状态
   return (
-    <div className="App" style={{ height: '100%', width: '100%', background: 'rgba(0, 0, 0, 1)' }}>
+    <div className="App">
       <Provider store={webgalStore}>
         <Translation />
-        <DevPanel />
-        <Extra />
-        <Title />
-        <Menu />
         <Stage />
         <BottomControlPanel />
         <BottomControlPanelFilm />
         <Backlog />
+        <Title />
+        <Extra />
+        <Menu />
         <GlobalDialog />
+        <DevPanel />
       </Provider>
     </div>
   );

diff --git a/packages/webgal/src/Components/Stage/FullScreenPerform/FullScreenPerform.tsx b/packages/webgal/src/Components/Stage/FullScreenPerform/FullScreenPerform.tsx
@@ -14,7 +14,6 @@ export const FullScreenPerform = () => {
   return (
     <div className={styles.FullScreenPerform_main} style={{ width: stageWidth, height: stageHeight, top: top }}>
       <div id="videoContainer" />
-      <div id="pixiContianer" />
     </div>
   );
 };
diff --git a/packages/webgal/src/Components/Stage/FullScreenPerform/fullScreenPerform.module.scss b/packages/webgal/src/Components/Stage/FullScreenPerform/fullScreenPerform.module.scss
@@ -3,8 +3,6 @@
   width: 100%;
   height: 100%;
   top: 0;
-  z-index: 3;
-  transform: translateZ(3px);
 }
 
 .FullScreenPerform_element {
@@ -13,7 +11,6 @@
   width: 100%;
   height: 100%;
   z-index: 11;
-  transform: translateZ(11px);
 }
 
 .fullScreen_video {

diff --git a/packages/webgal/src/Components/Stage/Stage.tsx b/packages/webgal/src/Components/Stage/Stage.tsx
@@ -12,6 +12,7 @@ import { TextBoxFilm } from '@/Components/Stage/TextBox/TextBoxFilm';
 import { useHotkey } from '@/hooks/useHotkey';
 import { MainStage } from '@/Components/Stage/MainStage/MainStage';
 import IntroContainer from '@/Components/Stage/introContainer/IntroContainer';
+import { isIOS } from '@/Core/initializeScript';
 // import OldStage from '@/Components/Stage/OldStage/OldStage';
 
 export const Stage: FC = () => {
@@ -26,6 +27,8 @@ export const Stage: FC = () => {
       {/* 已弃用旧的立绘与背景舞台 */}
       {/* <OldStage /> */}
       <MainStage />
+      <div id="pixiContianer" className={styles.pixiContainer} style={{ zIndex: isIOS ? '-5' : undefined }} />
+      <div id="chooseContainer" className={styles.chooseContainer} />
       {GUIState.showTextBox && stageState.enableFilm === '' && !stageState.isDisableTextbox && <TextBox />}
       {GUIState.showTextBox && stageState.enableFilm !== '' && <TextBoxFilm />}
       <AudioContainer />
@@ -40,16 +43,8 @@ export const Stage: FC = () => {
           nextSentence();
         }}
         id="FullScreenClick"
-        style={{
-          width: '100%',
-          height: '100%',
-          position: 'absolute',
-          zIndex: '12',
-          transform: 'translateZ(12px);',
-          top: '0',
-        }}
+        style={{ width: '100%', height: '100%', position: 'absolute', zIndex: '12', top: '0' }}
       />
-      <div id="chooseContainer" />
       <IntroContainer />
     </div>
   );

diff --git a/packages/webgal/src/Components/Stage/TextBox/textbox.module.scss b/packages/webgal/src/Components/Stage/TextBox/textbox.module.scss
@@ -13,7 +13,6 @@
 .TextBox_main {
   position: absolute;
   z-index: 6;
-  transform: translateZ(6px);
   width: 100%;
   min-height: 37.5%;
   background: linear-gradient(
@@ -63,7 +62,7 @@
 .outer {
   position: absolute;
   left: 0;
-  top: 0;
+  top:0;
   background-image: linear-gradient(
     //135deg,
       #ffffff 0%,
@@ -79,7 +78,7 @@
 .inner {
   position: absolute;
   left: 0;
-  top: 0;
+  top:0;
   -webkit-text-stroke: 0.085em rgba(0, 0, 0, 0.35);
   z-index: 1;
   text-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);

diff --git a/packages/webgal/src/Components/Stage/stage.module.scss b/packages/webgal/src/Components/Stage/stage.module.scss
@@ -3,7 +3,6 @@
   height: 100%;
   position: absolute;
   z-index: 1;
-  transform: translateZ(1px);
   //animation: MainStage_showBgSoftly 100ms forwards;
   opacity: 1;
   overflow: hidden;
@@ -72,3 +71,12 @@
     opacity: 0;
   }
 }
+
+.pixiContainer{
+  position: absolute;
+  z-index: 5;
+}
+
+.chooseContainer{
+  z-index: 8;
+}
diff --git a/packages/webgal/src/Components/UI/Backlog/backlog.module.scss b/packages/webgal/src/Components/UI/Backlog/backlog.module.scss
@@ -5,7 +5,6 @@
   width: 100%;
   height: 100%;
   z-index: 10;
-  transform: translateZ(10px);
   background: rgba(0, 0, 0, 0.7);
   padding: 2em 0 2em 0;
   animation: backlog_soft_in 0.7s ease-out forwards;

diff --git a/packages/webgal/src/Components/UI/BottomControlPanel/ButtomControlPanel.tsx b/packages/webgal/src/Components/UI/BottomControlPanel/ButtomControlPanel.tsx
@@ -60,7 +60,8 @@ export const BottomControlPanel = () => {
   }
 
   return (
-    <div className={styles.ToCenter}>
+    // <div className={styles.ToCenter}>
+    <>
       {GUIStore.showTextBox && stageState.enableFilm === '' && (
         <div className={styles.main}>
           {GUIStore.showTextBox && (
@@ -216,6 +217,7 @@ export const BottomControlPanel = () => {
           </span>
         </div>
       )}
-    </div>
+    </>
+    // </div>
   );
 };
diff --git a/packages/webgal/src/Components/UI/BottomControlPanel/bottomControlPanel.module.scss b/packages/webgal/src/Components/UI/BottomControlPanel/bottomControlPanel.module.scss
@@ -1,18 +1,24 @@
-.ToCenter {
-  display: flex;
-  justify-content: center;
-}
+//.ToCenter {
+//  display: flex;
+//  justify-content: center;
+//  position: absolute;
+//  bottom: 0;
+//  left: 0;
+//  width: 100%;
+//  z-index: 9;
+//}
 
 .main {
   //border-bottom: 2px solid rgba(255,255,255,0.25);
   position: absolute;
   bottom: 0.3em;
+  will-change: z-index;
   z-index: 9;
-  transform: translateZ(9px);
   display: flex;
   flex-flow: row;
   justify-content: center;
   align-items: center;
+  width: 100%;
   //background-color: rgba(150, 150, 150, 0.25);
   padding: 0.15em 1.75em 0.15em 1.75em;
   //background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 100%);

diff --git a/packages/webgal/src/Components/UI/DevPanel/devPanel.module.scss b/packages/webgal/src/Components/UI/DevPanel/devPanel.module.scss
@@ -7,7 +7,6 @@
   width: 35%;
   background: rgba(255, 255, 255, 0.75);
   z-index: 99;
-  transform: translateZ(99px);
   overflow: auto;
 }
 

diff --git a/packages/webgal/src/Components/UI/Extra/extra.module.scss b/packages/webgal/src/Components/UI/Extra/extra.module.scss
@@ -5,7 +5,6 @@
   top: 0;
   left: 0;
   z-index: 14;
-  transform: translateZ(14px);
   background-image: linear-gradient(135deg, #93a5cf 0%, #e4efe9 100%);;
   padding: 2em 2em 2em 2em;
   box-sizing: border-box;