Refresh UI

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

@@ -1,5 +1,5 @@
 webgal:我会修改标题 -hold;
-setVar:Game_name=WebGal_Change -global;
+setVar:Game_name=WebGAL_Change -global;
 webgal:游戏标题已经被我修改为{Game_name} -hold;
 webgal:我会修改游戏背景 -hold;
 setVar:Title_img=bg.webp -global;

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

@@ -1,7 +1,7 @@
 bgm:s_Title.mp3 -volume=80 -enter=3000;
 unlockBgm:s_Title.mp3 -name=welcome;
 intro:*Getting started| The image materials used in this demo game are AI-generated images;
-intro:*Credit| Created By ondoku3.com;
+intro:*Credit| Created by ondoku3.com;
 changeBg:bg.webp -next;
 unlockCg:bg.webp -name=良い夜;
 changeFigure:stand.webp -left -enter=enter-from-left -next;
@@ -22,7 +22,7 @@ pixiPerform:snow;
 For example, let's make it snow as a special effect. -e008_For_example_let's_make.mp3;
 As you can see, WebGAL has attractive features. |Try it out and experience it. -e009_As_you_can see_WebGAL.mp3;
 That's all for the feature introduction. -e010_That's_all_for_the_feature introduction.mp3;
-Next,I will introduce the history and trivia of WebGAL. -e011_Next_I_will introduce_the_ history.mp3;
+Next, I will introduce the history and trivia of WebGAL. -e011_Next_I_will introduce_the_ history.mp3;
 pixiInit;
 choose:WebGAL History:choose1|WebGAL Trivia:choose2;
 ;選択１

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

@@ -1,3 +1,3 @@
 intro:我会显示出来：\:\,\.\;不信你看看 -hold;
-WebGal:我会显示出来：\:\,\.\;不信你看看;
+WebGAL:我会显示出来：\:\,\.\;不信你看看;
 choose:我会显示出来：\:\,\.\;不信你看看;

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

@@ -1,23 +1,23 @@
 bgm:s_Title.mp3 -volume=80 -enter=3000;
 unlockBgm:s_Title.mp3 -name=雲を追いかけて;
-intro:你好|欢迎来到 {egine} 的世界;
+intro:你好|欢迎来到 {engine} 的世界;
 changeBg:WebGalEnter.webp -next;
 setTransition: -target=bg-main -exit=shockwaveOut;
-:你好|欢迎来到 {egine} 的世界;
+:你好|欢迎来到 {engine} 的世界;
 changeBg:bg.webp -next;
 setTransition: -target=bg-main -enter=shockwaveIn -next;
 unlockCg:bg.webp -name=良い夜; // 解锁CG并赋予名称
 changeFigure:stand.webp -left -enter=enter-from-left -next;
 miniAvatar:miniavatar.webp;
-{heroine}:欢迎使用 {egine}！这是一款全新的网页端视觉小说引擎。 -v1.wav;
+{heroine}:欢迎使用 {engine}！这是一款全新的网页端视觉小说引擎。 -v1.wav;
 changeFigure:stand2.webp -right -next;
-{egine} 是使用 Web 技术开发的引擎，因此在网页端有良好的表现。 -v2.wav;
-由于这个特性，如果你将 {egine} 部署到服务器或网页托管平台上，玩家只需要一串链接就可以开始游玩！ -v3.wav;
+{engine} 是使用 Web 技术开发的引擎，因此在网页端有良好的表现。 -v2.wav;
+由于这个特性，如果你将 {engine} 部署到服务器或网页托管平台上，玩家只需要一串链接就可以开始游玩！ -v3.wav;
 setAnimation:move-front-and-back -target=fig-left -continue;
 听起来是不是非常吸引人？ -v4.wav;
 changeFigure:none -right -next;
 setTransform:{"position": {"x": 500,"y": 0}} -target=fig-left -next;
-{egine} 引擎也具有动画系统和特效系统，使用 {egine} 开发的游戏可以拥有很好的表现效果。 -v5.wav;
+{engine} 引擎也具有动画系统和特效系统，使用 {engine} 开发的游戏可以拥有很好的表现效果。 -v5.wav;
 pixiInit;
 pixiPerform:snow;
 比如，这个下起小雪的特效。 -v6.wav;
@@ -35,29 +35,29 @@ WebGAL:很高兴遇见你，{name}！
 jumpLabel:toNextPart;
 
 label:toNextPart;
-你可以通过以下两个分支了解 {egine} 的更多故事。 -v8.wav;
-choose:{egine} 发展历程:choose1|{egine} 冷知识:choose2;
+你可以通过以下两个分支了解 {engine} 的更多故事。 -v8.wav;
+choose:{engine} 发展历程:choose1|{engine} 冷知识:choose2;
 
 ;分支1
 label:choose1;
-{egine} 的开发初衷是能够让更多人可以更方便地制作属于自己的视觉小说。 -v9.wav;
-在一开始，{egine} 只具备很少的功能，仅仅能支持立绘和背景的显示、语音播放和分支选择。 -v10.wav;
+{engine} 的开发初衷是能够让更多人可以更方便地制作属于自己的视觉小说。 -v9.wav;
+在一开始，{engine} 只具备很少的功能，仅仅能支持立绘和背景的显示、语音播放和分支选择。 -v10.wav;
 setAnimation:move-front-and-back -target=fig-left -next;
 在经历一年的发展后，现在已经是支持了很多优秀的表现效果的引擎了！ -v11.wav;
-除此以外，{egine} 编辑器的加入也使得制作和导出一个游戏更加方便快捷。 -v12.wav;
+除此以外，{engine} 编辑器的加入也使得制作和导出一个游戏更加方便快捷。 -v12.wav;
 jumpLabel:end;
 
 ;分支2
 label:choose2;
 这个演示游戏使用的素材是 AI 生成的。 -v13.wav;
-{egine} 项目只用了一年不到就在 GitHub 获得了 1000 星标！ -v14.wav;
-{egine} 的开发历程，是一个在开发中学习开发的过程。因此她经历了3次重构，并且每次几乎都是推倒重来式的。 -v15.wav;
-{egine} 的脚本语言是为了简化制作难度而全新设计的！ -v16.wav;
+{engine} 项目只用了一年不到就在 GitHub 获得了 1000 星标！ -v14.wav;
+{engine} 的开发历程，是一个在开发中学习开发的过程。因此她经历了3次重构，并且每次几乎都是推倒重来式的。 -v15.wav;
+{engine} 的脚本语言是为了简化制作难度而全新设计的！ -v16.wav;
 ;
 ;l2d
 ;label:l2d;
 ;changeFigure:hiyori/hiyori_pro_t11.model3.json -left -motion=Idle -next;
-;{egine} 项目现在也开始尝试实验性支持 live2D！今后可能会成为一个正式功能！
+;{engine} 项目现在也开始尝试实验性支持 live2D！今后可能会成为一个正式功能！
 ;
 ;结束分支
 label:end;
@@ -69,6 +69,6 @@ label:end;
 setTempAnimation:[{"position": {"x": 500,"y": 0},"duration": 0},{"position": {"x": 400,"y": 0},"duration": 250},{"position": {"x": 600,"y": 0},"duration": 500},{"position": {"x": 500,"y": 0},"duration": 250}] -target=fig-left -next;
 当然，这不算什么，因为大多数成熟的引擎都有这些功能。但是在 Web 端，这却是很少见的。 -v20.wav;
 我们为可能初次开发游戏的开发者提供了美观的通用 UI 和丰富的预设功能与动画。所以你可以没有顾虑地快速开始制作游戏。 -v21.wav;
-{egine} 项目组期待你的作品能够在 {egine} 上呈现！只需要一个链接就可以让万千用户立刻开始享受你的作品。 -v22.wav;
-感谢你关注 {egine} 项目！ -v23.wav;
+{engine} 项目组期待你的作品能够在 {engine} 上呈现！只需要一个链接就可以让万千用户立刻开始享受你的作品。 -v22.wav;
+感谢你关注 {engine} 项目！ -v23.wav;
 end;

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

@@ -1,3 +1,3 @@
 setVar:heroine=WebGAL;
-setVar:egine=WebGAL;
+setVar:engine=WebGAL;
 choose:简体中文:demo_zh_cn.txt|日本語:demo_ja.txt|English:demo_en.txt|Test:function_test.txt;

packages/webgal/public/game/template/Stage/TextBox/textbox.scss

@@ -1,16 +1,16 @@
 .TextBox_main {
   z-index: 3;
   position: absolute;
-  right: 25px;
-  min-height: 330px;
-  max-height: 330px;
+  min-height: 430px;
+  max-height: 430px;
   background-blend-mode: darken;
-  border-radius: 165px 20px 20px 165px;
-  bottom: 20px;
-  left: 275px;
+  border-radius: 0;
+  bottom: -2px;
+  right: -2px;
+  left: 0;
   font-weight: bold;
   color: white;
-  padding: 1em 50px 70px 200px;
+  padding: calc(1em + 100px) 50px 70px 490px;
   box-sizing: border-box;
   display: flex;
   flex-flow: column;
@@ -20,12 +20,18 @@
 }
 
 .TextBox_main_miniavatarOff {
-  left: 25px;
+  left: 0;
 }
 
 .TextBox_Background {
   z-index: 2;
-  background: linear-gradient(rgba(245, 247, 250, 1) 0%, rgba(189, 198, 222, 1) 100%);
+  background-color: rgba(167, 186, 214, 0.28);
+  background-image:
+    linear-gradient(118deg, rgba(147, 165, 207, 0.9) 0%, rgba(182, 198, 222, 0.82) 48%, rgba(228, 239, 233, 0.82) 100%);
+  mask-image:
+    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.28) 10%, #000 75%),
+    linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.28) 10%, #000 42%);
+  mask-composite: intersect;
 }
 
 @keyframes showSoftly {
@@ -79,22 +85,35 @@
 
 .TextBox_showName {
   font-size: 85%;
-  padding: 0 2em 0 2em;
+  padding: 0 1em 10px 0;
+  min-width: 50%;
   position: absolute;
-  left: 150px;
-  top: -68px;
-  height: 80px;
+  left: 490px;
+  top: 26px;
+  height: 90px;
   line-height: 68px;
-  border-radius: 40px;
+  border-radius: 0;
   z-index: 3;
   border: 4px solid rgba(255, 255, 255, 0);
 }
 
 .TextBox_ShowName_Background {
   z-index: 2;
-  background: rgba(11, 52, 110, 1);
-  border: 4px solid rgba(255, 255, 255, 0.75);
-  box-shadow: 3px 3px 10px rgba(100, 100, 100, 0.5);
+  background: transparent;
+  border: 0;
+  border-bottom: 3px solid transparent;
+  border-image: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0.5) 5%,
+      rgba(255, 255, 255, 0) 100%
+    )
+    1;
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  -webkit-mask-image: none;
+  mask-image: none;
 }
 
 @keyframes TextDelayShow {
@@ -112,9 +131,8 @@
   height: 450px;
   width: 450px;
   bottom: 0;
-  left: -250px;
-  border-radius: 100% 0 0 100%;
-  overflow: hidden;
+  left: 0;
+  overflow: visible;
 }
 
 .miniAvatarImg {
@@ -135,18 +153,18 @@
   position: absolute;
   left: 0;
   top: 0;
-  background: linear-gradient(150deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgb(165, 212, 228) 100%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
+  color: #0b346e;
   z-index: 2;
+  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18);
 }
 
 .innerName {
   position: absolute;
   left: 0;
   top: 0;
+  -webkit-text-stroke: 0.08em rgba(255, 255, 255, 0.98);
   z-index: 1;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
 }
 
 .text {

packages/webgal/src/Stage/TextBox/textbox.module.scss

@@ -10,7 +10,9 @@
   //text-shadow: 0 0 3px rgba(81,168,221,1);
 }
 
-$height: 330px;
+$baseHeight: 330px;
+$topReserve: 100px;
+$height: $baseHeight + $topReserve;
 
 .TextBox_Container {
   position: absolute;
@@ -23,16 +25,16 @@ $height: 330px;
 .TextBox_main {
   z-index: 3;
   position: absolute;
-  right: 25px;
+  right: -2px;
   min-height: $height;
   max-height: $height;
   background-blend-mode: darken;
-  border-radius: calc($height / 2) 20px 20px calc($height / 2);
-  bottom: 20px;
-  left: 275px;
+  border-radius: 0;
+  bottom: -2px;
+  left: 0;
   font-weight: bold;
   color: white;
-  padding: 1em 50px 70px 200px;
+  padding: calc(1em + #{$topReserve}) 50px 70px 490px;
   box-sizing: border-box;
   display: flex;
   flex-flow: column;
@@ -42,12 +44,18 @@ $height: 330px;
 }
 
 .TextBox_main_miniavatarOff {
-  left: 25px;
+  left: 0;
 }
 
 .TextBox_Background {
   z-index: 2;
-  background: linear-gradient(rgba(245, 247, 250, 1) 0%, rgba(189, 198, 222, 1) 100%);
+  background-color: rgba(167, 186, 214, 0.28);
+  background-image:
+    linear-gradient(118deg, rgba(147, 165, 207, 0.9) 0%, rgba(182, 198, 222, 0.82) 48%, rgba(228, 239, 233, 0.82) 100%);
+  mask-image:
+    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.28) 10%, #000 75%),
+    linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.28) 10%, #000 42%);
+  mask-composite: intersect;
 }
 
 @keyframes showSoftly {
@@ -144,17 +152,18 @@ $height: 330px;
   font-size: 85%;
   //border-bottom: 3px solid rgb(176, 176, 176);
   //min-width: 25%;
-  padding: 0 2em 0 2em;
+  padding: 0 1em 10px 0;
+  min-width: 50%;
   //margin: 0 0 0 0;
   position: absolute;
-  left: 150px;
-  top: -68px;
-  height: 80px;
+  left: 490px;
+  top: 26px;
+  height: 90px;
   line-height: 68px;
   //display: flex;
   //align-items: center;
   // background: rgba(11, 52, 110, 0.9);
-  border-radius: 40px;
+  border-radius: 0;
   // border: 4px solid rgba(255, 255, 255, 0.75);
   // box-shadow: 3px 3px 10px rgba(100, 100, 100, 0.5);
   z-index: 3;
@@ -163,9 +172,21 @@ $height: 330px;
 
 .TextBox_ShowName_Background {
   z-index: 2;
-  background: rgba(11, 52, 110, 1);
-  border: 4px solid rgba(255, 255, 255, 0.75);
-  box-shadow: 3px 3px 10px rgba(100, 100, 100, 0.5);
+  background: transparent;
+  border: 0;
+  border-bottom: 3px solid transparent;
+  border-image: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0.5) 5%,
+      rgba(255, 255, 255, 0) 100%
+    )
+    1;
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  -webkit-mask-image: none;
+  mask-image: none;
 }
 
 @keyframes TextDelayShow {
@@ -183,9 +204,8 @@ $height: 330px;
   height: 450px;
   width: 450px;
   bottom: 0;
-  left: -250px;
-  border-radius: 100% 0 0 100%;
-  overflow: hidden;
+  left: 0;
+  overflow: visible;
 }
 
 .miniAvatarImg {
@@ -206,28 +226,18 @@ $height: 330px;
   position: absolute;
   left: 0;
   top: 0;
-  //background-image: linear-gradient(rgba(255, 255, 255, 1) 0%, rgb(225, 237, 255) 100%);
-  //background-image: linear-gradient(
-  //    #bfd8ff 0%,
-  //    //#f5f7fa 45%,
-  //    #bfbfc7 100%
-  //);
-  background: linear-gradient(150deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 35%, rgb(165, 212, 228) 100%);
-  //background: rgba(255, 255, 255, 1);
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent;
+  color: #0b346e;
   z-index: 2;
+  text-shadow: 0 2px 8px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.18);
 }
 
 .innerName {
   position: absolute;
   left: 0;
   top: 0;
-  //-webkit-text-stroke: 0.1em rgba(0, 0, 0, 0.25);
-  //-webkit-text-stroke: 0.1em rgba(255, 255, 255, 1);
+  -webkit-text-stroke: 0.08em rgba(255, 255, 255, 0.98);
   z-index: 1;
-  //text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75);
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
 }
 
 .text {

packages/webgal/src/UI/Menu/Options/TextPreview/textPreview.module.scss

@@ -1,6 +1,5 @@
 .textPreviewMain {
   z-index: 1;
-  padding: 1em;
   min-height: 480px;
   width: 100%;
 }
@@ -9,4 +8,4 @@
   width: 100%;
   height: 100%;
   position: relative;
-}
+}