diff --git a/packages/webgal/public/game/scene/demo_changeConfig.txt b/packages/webgal/public/game/scene/demo_changeConfig.txt index ddbf8a3c6..7bc6c2760 100644 --- a/packages/webgal/public/game/scene/demo_changeConfig.txt +++ b/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; diff --git a/packages/webgal/public/game/scene/demo_en.txt b/packages/webgal/public/game/scene/demo_en.txt index c886eff48..db76dca4b 100644 --- a/packages/webgal/public/game/scene/demo_en.txt +++ b/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; ;選択１ diff --git a/packages/webgal/public/game/scene/demo_escape.txt b/packages/webgal/public/game/scene/demo_escape.txt index f0f4cd023..13acdd796 100644 --- a/packages/webgal/public/game/scene/demo_escape.txt +++ b/packages/webgal/public/game/scene/demo_escape.txt @@ -1,3 +1,3 @@ intro:我会显示出来：\:\,\.\;不信你看看 -hold; -WebGal:我会显示出来：\:\,\.\;不信你看看; +WebGAL:我会显示出来：\:\,\.\;不信你看看; choose:我会显示出来：\:\,\.\;不信你看看; diff --git a/packages/webgal/public/game/scene/demo_zh_cn.txt b/packages/webgal/public/game/scene/demo_zh_cn.txt index 0265db5d5..0bd78e80a 100644 --- a/packages/webgal/public/game/scene/demo_zh_cn.txt +++ b/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; diff --git a/packages/webgal/public/game/scene/start.txt b/packages/webgal/public/game/scene/start.txt index 1e072c7c3..b5d22c676 100644 --- a/packages/webgal/public/game/scene/start.txt +++ b/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; diff --git a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss b/packages/webgal/public/game/template/Stage/TextBox/textbox.scss index 47d9b8050..1b14fd514 100644 --- a/packages/webgal/public/game/template/Stage/TextBox/textbox.scss +++ b/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 { @@ -49,7 +55,7 @@ white-space: nowrap; left: 0; top: 0; - background-image: linear-gradient(#0B346E 0%, #141423 100%); + background-image: linear-gradient(#005CAF 0%, #1D1D1F 100%); background-clip: text; -webkit-background-clip: text; color: transparent; @@ -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.85) 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 { diff --git a/packages/webgal/public/game/template/UI/Title/title.scss b/packages/webgal/public/game/template/UI/Title/title.scss index 48073c96b..ec0dbdcef 100644 --- a/packages/webgal/public/game/template/UI/Title/title.scss +++ b/packages/webgal/public/game/template/UI/Title/title.scss @@ -21,32 +21,70 @@ .Title_button { font-weight: bold; - text-align: center; + text-align: left; flex: 0 1 auto; cursor: pointer; - padding: 1em 2em 1em 2em; - margin: 20px 0; - transition: all 0.33s; - background: rgba(255, 255, 255, 0.15); - backdrop-filter: blur(5px); - border-radius: 4px; - transform: skewX(-10deg); - background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)); + padding: 0.7em 0; + margin: 18px 0; + transition: transform 0.22s ease, opacity 0.22s ease; + background: transparent; + backdrop-filter: none; + border: 0; + border-radius: 0; + transform: none; + overflow: visible; + text-shadow: none; &:hover { - text-shadow: 0 0 10px rgba(255, 255, 255, 1); - padding: 1em 6em 1em 3em; + transform: translate3d(0, -3px, 0) scale(1.02); + padding: 0.7em 0; + filter: drop-shadow(0 10px 16px rgba(6, 10, 18, 0.12)) + drop-shadow(0 5px 8px rgba(6, 10, 18, 0.07)) + drop-shadow(1px 1px 0 rgba(6, 10, 18, 0.05)); } } .Title_button_text { - color: transparent; - background: linear-gradient(135deg, #fdfbfb 0%, #dcddde 100%); - -webkit-background-clip: text; - padding: 0 0.5em 0 0.5em; + position: relative; + z-index: 1; + display: inline-block; + padding: 0.08em 0.55em 0.12em 0.35em; font-size: 200%; font-family: WebgalUI, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - letter-spacing: 0.15em; + letter-spacing: 0.16em; + line-height: 1.2; + transform-origin: left center; + transition: transform 0.22s ease; + color: transparent; + white-space: nowrap; +} + +.Title_button_text_outer { + display: block; + position: absolute; + left: 0; + top: 0; + white-space: nowrap; + background-image: none; + background-clip: border-box; + -webkit-background-clip: border-box; + color: #ffffff; + -webkit-text-fill-color: #ffffff; + z-index: 2; + text-shadow: + 0 3px 10px rgba(7, 12, 20, 0.22), + 0 1px 3px rgba(7, 12, 20, 0.16); +} + +.Title_button_text_inner { + display: block; + white-space: nowrap; + position: absolute; + left: 0; + top: 0; + color: inherit; + -webkit-text-stroke: 0.09em rgba(12, 20, 32, 0.7); + z-index: 1; } .Title_backup_background { @@ -56,3 +94,8 @@ z-index: 13; background: linear-gradient(135deg, #fdfbfb 0%, #dcddde 100%); } + +.Title_button_disabled { + cursor: not-allowed !important; + opacity: 0.45; +} diff --git a/packages/webgal/public/game/template/assets/.gitkeep b/packages/webgal/public/game/template/assets/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/packages/webgal/public/game/template/template.json b/packages/webgal/public/game/template/template.json index 55f50f7c8..f0ef8309c 100644 --- a/packages/webgal/public/game/template/template.json +++ b/packages/webgal/public/game/template/template.json @@ -1,4 +1,4 @@ { - "name":"Default Template", - "webgal-version":"4.5.18" + "name":"WebGAL Refine 2026", + "webgal-version":"4.5.19" } diff --git a/packages/webgal/src/UI/Title/Title.tsx b/packages/webgal/src/UI/Title/Title.tsx index 061df48a6..6caf8c922 100644 --- a/packages/webgal/src/UI/Title/Title.tsx +++ b/packages/webgal/src/UI/Title/Title.tsx @@ -30,6 +30,13 @@ export default function Title() { const appreciationItems = useSelector((state: RootState) => state.userData.appreciationData); const hasAppreciationItems = appreciationItems.bgm.length > 0 || appreciationItems.cg.length > 0; + const renderButtonText = (text: string) => ( +
+ {text} + {text} + {text} +
+ ); return ( <> @@ -63,7 +70,7 @@ export default function Title() { }} onMouseEnter={playSeEnter} > -
{t('start.title')}
+ {renderButtonText(t('start.title'))}
-
{t('continue.title')}
+ {renderButtonText(t('continue.title'))}
-
{t('options.title')}
+ {renderButtonText(t('options.title'))}
-
{t('load.title')}
+ {renderButtonText(t('load.title'))}
{GUIState.enableAppreciationMode && (
{ if (hasAppreciationItems) { @@ -111,7 +118,7 @@ export default function Title() { }} onMouseEnter={playSeEnter} > -
{t('extra.title')}
+ {renderButtonText(t('extra.title'))}
)}
-
{t('exit.title')}
+ {renderButtonText(t('exit.title'))}
diff --git a/packages/webgal/src/UI/Title/title.module.scss b/packages/webgal/src/UI/Title/title.module.scss index 0cb6e04ad..5cdbcaac1 100644 --- a/packages/webgal/src/UI/Title/title.module.scss +++ b/packages/webgal/src/UI/Title/title.module.scss @@ -45,6 +45,14 @@ letter-spacing: 0.2em; } +.Title_button_text_outer { + display: none; +} + +.Title_button_text_inner { + display: none; +} + .Title_backup_background { width: 100%; height: 100%;