├── CNAME ├── src ├── .vuepress │ ├── styles │ │ ├── index.scss │ │ ├── palette.scss │ │ └── config.scss │ ├── navbar │ │ ├── index.ts │ │ ├── zh.ts │ │ ├── ja.ts │ │ └── en.ts │ ├── sidebar │ │ ├── index.ts │ │ ├── ja.ts │ │ ├── en.ts │ │ └── zh.ts │ ├── public │ │ └── favicon.ico │ ├── config.ts │ └── theme.ts ├── sponsor │ ├── img.png │ └── readme.md ├── en │ ├── sponsor │ │ ├── img.png │ │ └── readme.md │ ├── publish │ │ ├── android │ │ │ ├── build.jpg │ │ │ ├── finsh.jpg │ │ │ ├── keystore.jpg │ │ │ ├── run-app.jpg │ │ │ ├── create-icons.jpg │ │ │ └── open-in-android-studio.jpg │ │ ├── readme.md │ │ ├── desktop │ │ │ └── readme.md │ │ └── web │ │ │ └── readme.md │ ├── webgal-script │ │ ├── text-enhance.png │ │ ├── video.md │ │ ├── README.md │ │ ├── base.md │ │ ├── special-effect.md │ │ ├── audio.md │ │ └── bg-and-figure.md │ ├── migration.md │ ├── faq.md │ ├── resources.md │ ├── info │ │ └── readme.md │ ├── derivative.md │ ├── config.md │ ├── showcase-your-game.md │ ├── live2D.md │ ├── README.md │ ├── getting-started.md │ ├── developers │ │ └── readme.md │ └── win7.md ├── ja │ ├── sponsor │ │ ├── img.png │ │ └── readme.md │ ├── publish │ │ ├── android │ │ │ ├── build.jpg │ │ │ ├── finsh.jpg │ │ │ ├── keystore.jpg │ │ │ ├── run-app.jpg │ │ │ ├── create-icons.jpg │ │ │ ├── open-in-android-studio.jpg │ │ │ └── readme.md │ │ ├── desktop │ │ │ └── readme.md │ │ ├── readme.md │ │ └── web │ │ │ └── readme.md │ ├── webgal-script │ │ ├── text-enhance.png │ │ ├── video.md │ │ ├── README.md │ │ ├── base.md │ │ ├── audio.md │ │ ├── special-effect.md │ │ ├── bg-and-figure.md │ │ ├── scenes.md │ │ ├── dialogue.md │ │ ├── animation.md │ │ └── variable.md │ ├── migration.md │ ├── faq.md │ ├── derivative.md │ ├── resources.md │ ├── info │ │ └── readme.md │ ├── config.md │ ├── showcase-your-game.md │ ├── live2D.md │ ├── README.md │ ├── getting-started.md │ ├── developers │ │ ├── readme.md │ │ └── joinus.md │ ├── win7.md │ └── spine.md ├── script-reference │ ├── arguments │ │ ├── enter.md │ │ ├── exit.md │ │ ├── volume.md │ │ ├── duration.md │ │ ├── name-cg.md │ │ ├── name-bgm.md │ │ ├── writeDefault.md │ │ ├── keep.md │ │ ├── target.md │ │ ├── transform.md │ │ ├── series-cg.md │ │ ├── series-bgm.md │ │ └── ease.md │ ├── commands │ │ ├── end.md │ │ ├── showVars.md │ │ ├── filmMode.md │ │ ├── label.md │ │ ├── wait.md │ │ ├── pixiInit.md │ │ ├── callScene.md │ │ ├── jumpLabel.md │ │ ├── miniAvatar.md │ │ ├── choose.md │ │ ├── playVideo.md │ │ ├── setTextbox.md │ │ ├── unlockBgm.md │ │ ├── unlockCg.md │ │ ├── comment.md │ │ ├── pixiPerform.md │ │ ├── setComplexAnimation.md │ │ ├── playEffect.md │ │ ├── applyStyle.md │ │ ├── getUserInput.md │ │ ├── changeScene.md │ │ ├── setAnimation.md │ │ ├── setTransition.md │ │ ├── bgm.md │ │ ├── setTransform.md │ │ ├── setVar.md │ │ ├── changeBg.md │ │ ├── global.md │ │ ├── setTempAnimation.md │ │ ├── intro.md │ │ └── say.md │ └── others │ │ └── animation-reference.md ├── publish │ ├── android │ │ ├── build.jpg │ │ ├── finsh.jpg │ │ ├── keystore.jpg │ │ ├── run-app.jpg │ │ ├── create-icons.jpg │ │ ├── open-in-android-studio.jpg │ │ └── readme.md │ ├── desktop │ │ └── readme.md │ ├── readme.md │ └── web │ │ └── readme.md ├── webgal-script │ ├── text-enhance.png │ ├── video.md │ ├── README.md │ ├── base.md │ ├── audio.md │ ├── special-effect.md │ ├── bg-and-figure.md │ ├── scenes.md │ ├── dialogue.md │ ├── variable.md │ └── animation.md ├── migration.md ├── faq.md ├── resources.md ├── derivative.md ├── info │ └── readme.md ├── config.md ├── showcase-your-game.md ├── live2D.md ├── README.md ├── getting-started.md ├── developers │ ├── readme.md │ └── joinus.md ├── win7.md ├── spine.md └── tech │ └── readme.md ├── README.md ├── .gitattributes ├── .gitignore ├── .github └── workflows │ ├── pr-check.yml │ └── vuepress-build.yml ├── combine.sh ├── package.json └── translate.js /CNAME: -------------------------------------------------------------------------------- 1 | docs.openwebgal.com 2 | -------------------------------------------------------------------------------- /src/.vuepress/styles/index.scss: -------------------------------------------------------------------------------- 1 | // place your custom styles here 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WebGAL_Doc 2 | The online document of WebGAL engine. 3 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /src/.vuepress/styles/palette.scss: -------------------------------------------------------------------------------- 1 | // you can change colors here 2 | $theme-color: #2893f7; -------------------------------------------------------------------------------- /src/sponsor/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/sponsor/img.png -------------------------------------------------------------------------------- /src/en/sponsor/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/en/sponsor/img.png -------------------------------------------------------------------------------- /src/ja/sponsor/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/ja/sponsor/img.png -------------------------------------------------------------------------------- /src/script-reference/arguments/enter.md: -------------------------------------------------------------------------------- 1 | ### enter 2 | - 字符串 3 | 4 | 填写动画名称，对象出场时将播放该动画，顶替默认的透明度淡入的入场动画。 5 | -------------------------------------------------------------------------------- /src/script-reference/arguments/exit.md: -------------------------------------------------------------------------------- 1 | ### exit 2 | - 字符串 3 | 4 | 填写动画名称，对象退场时将播放该动画，顶替默认的透明度淡出的退场动画。 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules/ 3 | src/.vuepress/.cache/ 4 | src/.vuepress/.temp/ 5 | src/.vuepress/dist/ 6 | -------------------------------------------------------------------------------- /src/.vuepress/navbar/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./zh.js"; 2 | export * from "./en.js"; 3 | export * from "./ja.js"; -------------------------------------------------------------------------------- /src/.vuepress/sidebar/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./en.js"; 2 | export * from "./zh.js"; 3 | export * from "./ja.js"; -------------------------------------------------------------------------------- /src/script-reference/arguments/volume.md: -------------------------------------------------------------------------------- 1 | ### volume 2 | - 数字 3 | - 范围：0 到 100 4 | - 默认值：100 5 | 6 | 音乐音量百分比。 7 | -------------------------------------------------------------------------------- /src/publish/android/build.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/publish/android/build.jpg -------------------------------------------------------------------------------- /src/publish/android/finsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/publish/android/finsh.jpg -------------------------------------------------------------------------------- /src/script-reference/arguments/duration.md: -------------------------------------------------------------------------------- 1 | ### duration 2 | - 数字 3 | - 范围：0 到正无穷 4 | - 单位：毫秒 5 | 6 | 动画的持续时间。 7 | -------------------------------------------------------------------------------- /src/.vuepress/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/.vuepress/public/favicon.ico -------------------------------------------------------------------------------- /src/en/publish/android/build.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/en/publish/android/build.jpg -------------------------------------------------------------------------------- /src/en/publish/android/finsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/en/publish/android/finsh.jpg -------------------------------------------------------------------------------- /src/ja/publish/android/build.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/ja/publish/android/build.jpg -------------------------------------------------------------------------------- /src/ja/publish/android/finsh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/ja/publish/android/finsh.jpg -------------------------------------------------------------------------------- /src/publish/android/keystore.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/publish/android/keystore.jpg -------------------------------------------------------------------------------- /src/publish/android/run-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/publish/android/run-app.jpg -------------------------------------------------------------------------------- /src/en/publish/android/keystore.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/en/publish/android/keystore.jpg -------------------------------------------------------------------------------- /src/en/publish/android/run-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/en/publish/android/run-app.jpg -------------------------------------------------------------------------------- /src/ja/publish/android/keystore.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/ja/publish/android/keystore.jpg -------------------------------------------------------------------------------- /src/ja/publish/android/run-app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/ja/publish/android/run-app.jpg -------------------------------------------------------------------------------- /src/webgal-script/text-enhance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/webgal-script/text-enhance.png -------------------------------------------------------------------------------- /src/en/webgal-script/text-enhance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/en/webgal-script/text-enhance.png -------------------------------------------------------------------------------- /src/ja/webgal-script/text-enhance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/ja/webgal-script/text-enhance.png -------------------------------------------------------------------------------- /src/publish/android/create-icons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/publish/android/create-icons.jpg -------------------------------------------------------------------------------- /src/en/publish/android/create-icons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/en/publish/android/create-icons.jpg -------------------------------------------------------------------------------- /src/ja/publish/android/create-icons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/ja/publish/android/create-icons.jpg -------------------------------------------------------------------------------- /src/script-reference/commands/end.md: -------------------------------------------------------------------------------- 1 | # end 2 | 3 | 结束当前场景并返回标题页。 4 | 5 | ## 语句内容 6 | 不需要填写任何内容。 7 | 8 | ```webgal 9 | end; 10 | ``` 11 | -------------------------------------------------------------------------------- /src/publish/android/open-in-android-studio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/publish/android/open-in-android-studio.jpg -------------------------------------------------------------------------------- /src/en/publish/android/open-in-android-studio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/en/publish/android/open-in-android-studio.jpg -------------------------------------------------------------------------------- /src/ja/publish/android/open-in-android-studio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/OpenWebGAL/WebGAL_Doc/HEAD/src/ja/publish/android/open-in-android-studio.jpg -------------------------------------------------------------------------------- /src/.vuepress/styles/config.scss: -------------------------------------------------------------------------------- 1 | // you can change config here 2 | $colors: #c0392b, #d35400, #f39c12, #27ae60, #16a085, #2980b9, #8e44ad, #2c3e50, 3 | #7f8c8d !default; 4 | -------------------------------------------------------------------------------- /src/script-reference/commands/showVars.md: -------------------------------------------------------------------------------- 1 | # showVars 2 | 3 | 在对话框中，显示所有本地变量与全局变量的值。 4 | 5 | ## 语句内容 6 | 7 | 不需要填写任何内容。 8 | 9 | ```webgal 10 | showVars; 11 | ``` 12 | -------------------------------------------------------------------------------- /src/script-reference/arguments/name-cg.md: -------------------------------------------------------------------------------- 1 | - 字符串 2 | 3 | 填写一个名称，CG 鉴赏将收录该图片，并以该名称进行展示。如果不填写该参数，或名称为空，则不会收录此图片。 4 | 5 | 同一张图片（严格来说是同路径的图片）只能拥有一个展示名称。如果同一张图片以不同的名称被收录多次，仅保留最后一次收录时填写的名称。 6 | -------------------------------------------------------------------------------- /src/script-reference/arguments/name-bgm.md: -------------------------------------------------------------------------------- 1 | - 字符串 2 | 3 | 填写一个名称，BGM 鉴赏将收录该音乐，并以该名称进行展示。如果不填写该参数，或名称为空，则不会收录此音乐。 4 | 5 | 同一首音乐（严格来说是同路径的音乐）只能拥有一个展示名称。如果同一首音乐以不同的名称被收录多次，仅保留最后一次收录时填写的名称。 6 | -------------------------------------------------------------------------------- /src/script-reference/arguments/writeDefault.md: -------------------------------------------------------------------------------- 1 | ### writeDefault 2 | - 布尔值 3 | 4 | 当值为 `true` 时，未被赋值的[变换与效果](../others/transform-reference.md)属性都会写入默认值。 5 | 当值为 `false` 时，未被赋值的属性会继承现有的值。 6 | -------------------------------------------------------------------------------- /src/publish/desktop/readme.md: -------------------------------------------------------------------------------- 1 | # Windows / macOS / Linux 2 | 3 | 在编辑器右上角选择导出为可执行文件，可执行文件可以直接在当前系统上运行。 4 | 5 | ::: tip 6 | 游戏导出完成后，文件资源管理器会自动打开。如果没有自动打开，你可以在编辑器目录下的 `Exported_Games` 找到。 7 | ::: 8 | -------------------------------------------------------------------------------- /src/script-reference/arguments/keep.md: -------------------------------------------------------------------------------- 1 | ### keep 2 | - 布尔值 3 | 4 | 将该动画转换为跨语句动画。在执行接下来的语句的同时，保持播放当前动画，直至动画结束，或被下一个同目标的 `setTransform` `setAnimation` `setTempAnimation` 打断。 5 | 通常需要配合 `next` 参数一起使用。 6 | -------------------------------------------------------------------------------- /src/webgal-script/video.md: -------------------------------------------------------------------------------- 1 | # 视频 2 | 3 | ## 播放视频 4 | 5 | 把视频放在 `video` 文件夹内，然后使用 `playVideo` 播放。 6 | 7 | ``` ws 8 | playVideo:OP.mp4; 9 | ``` 10 | 11 | 如果要阻止用户跳过视频，你可以使用 `-skipOff` 参数。 12 | -------------------------------------------------------------------------------- /src/ja/webgal-script/video.md: -------------------------------------------------------------------------------- 1 | # 動画 2 | 3 | ## 動画を再生する 4 | 5 | 動画は `video` フォルダに置き、`playVideo` を使用して再生します。 6 | 7 | ``` ws 8 | playVideo:OP.mp4; 9 | ``` 10 | 11 | ユーザーが動画をスキップできないようにするには、`-skipOff` パラメータを使用できます。 -------------------------------------------------------------------------------- /src/script-reference/arguments/target.md: -------------------------------------------------------------------------------- 1 | ### target 2 | - 字符串 3 | 4 | 动画作用目标。 5 | 6 | 可以填写的目标有: 7 | - `fig-center`：中间立绘 8 | - `fig-left`：左侧立绘 9 | - `fig-right`：右侧立绘 10 | - 自由立绘的 id 11 | - `bg-main`：背景 12 | - `stage-main`：舞台 13 | -------------------------------------------------------------------------------- /src/script-reference/commands/filmMode.md: -------------------------------------------------------------------------------- 1 | # filmMode 2 | 3 | 开启和关闭电影模式的二合一命令。 4 | 5 | ## 语句内容 6 | 7 | 当不填写或填写 `none` 时，关闭电影模式。其他任何字符串均表示开启电影模式。 8 | 9 | ```webgal 10 | filmMode:on; 11 | 角色A:真相只有一个; 12 | filmMode:none; 13 | ``` 14 | -------------------------------------------------------------------------------- /src/publish/readme.md: -------------------------------------------------------------------------------- 1 | # 部署或发布我的视觉小说？ 2 | 3 | 首先，请知悉，可以部署到互联网的引擎应该是**发行版或由 WebGAL 图形化编辑器导出的网页**，而不是源代码。 4 | 5 | - [Web 网页](web/readme.md) 6 | 7 | - [Windows / macOS / Linux](desktop/readme.md) 8 | 9 | - [Android](android/readme.md) 10 | -------------------------------------------------------------------------------- /src/ja/publish/desktop/readme.md: -------------------------------------------------------------------------------- 1 | # Windows / macOS / Linux 2 | 3 | エディタ右上のエクスポートから実行ファイルを選択すると、実行ファイルが作成され、現在のシステムで直接実行できます。 4 | 5 | ::: tip 6 | ゲームのエクスポートが完了すると、ファイルエクスプローラーが自動的に開きます。自動的に開かない場合は、エディタディレクトリにある `Exported_Games` で見つけることができます。 7 | ::: -------------------------------------------------------------------------------- /src/script-reference/commands/label.md: -------------------------------------------------------------------------------- 1 | # label 2 | 3 | 设置标签。 4 | 详情请见[标签跳转](../../webgal-script/scenes.md#标签跳转)。 5 | 6 | ## 语句内容 7 | 8 | 填写标签名称。该命令本身不执行任何操作，但可以配合 `choose` 和 `jumpLabel` 使用。 9 | 10 | ```webgal 11 | label:myLabel; 12 | ``` 13 | -------------------------------------------------------------------------------- /src/script-reference/commands/wait.md: -------------------------------------------------------------------------------- 1 | # wait 2 | 3 | 等待一段时间。 4 | 5 | ## 语句内容 6 | 7 | 填写一个数字，作为等待时间，单位为毫秒。 8 | 有时出于演出效果的需要，可能需要等待一段时间，再执行下一句。 9 | 10 | ```webgal 11 | 角色A:让我想想; 12 | 角色A:......; 13 | wait:5000; 等待 5 秒 14 | 角色A:想不出来，算了。; 15 | ``` 16 | -------------------------------------------------------------------------------- /src/script-reference/arguments/transform.md: -------------------------------------------------------------------------------- 1 | ### transform 2 | - 字符串 3 | 4 | 填写 json 字符串，控制舞台对象的变换与效果。详情请见 [变换效果参考](../others/transform-reference.md) 。 5 | 6 | ::: warning 7 | 此参数仅在对象入场，或替换对象时生效。如果需要修改在场对象的变换效果，请使用 `setTransform`、`setAnimation`、`setTempAnimation` 等命令。 8 | ::: 9 | -------------------------------------------------------------------------------- /src/ja/publish/readme.md: -------------------------------------------------------------------------------- 1 | # ビジュアルノベルをデプロイまたは公開するには？ 2 | 3 | まず、インターネットにデプロイできるエンジンは、**WebGAL グラフィカルエディタからエクスポートされた配布版または Web ページ**であり、ソースコードではないことに注意してください。 4 | 5 | - [Web ページ](web/readme.md) 6 | 7 | - [Windows / macOS / Linux](desktop/readme.md) 8 | 9 | - [Android](android/readme.md) -------------------------------------------------------------------------------- /src/en/webgal-script/video.md: -------------------------------------------------------------------------------- 1 | # Video 2 | 3 | ## Play Video 4 | 5 | Put the video inside `video` folder, then use `playVideo` to play it. 6 | 7 | ``` ws 8 | playVideo:OP.mp4; 9 | ``` 10 | 11 | If you want to prevent user from skipping the video, you can use `-skipOff` parameter. -------------------------------------------------------------------------------- /src/script-reference/commands/pixiInit.md: -------------------------------------------------------------------------------- 1 | # pixiInit 2 | 3 | 清除舞台特效，与初始化舞台特效的二合一命令。 4 | 5 | ## 语句内容 6 | 7 | 不需要填写任何内容。 8 | 详情请见[特效](../../webgal-script/special-effect.md)。 9 | 10 | ```webgal 11 | pixiInit; 初始化舞台特效 12 | pixi:rain; 13 | 说话者:下雨了。; 14 | pixiInit; 清除所有舞台特效 15 | 说话者:雨停了。; 16 | ``` 17 | -------------------------------------------------------------------------------- /src/script-reference/commands/callScene.md: -------------------------------------------------------------------------------- 1 | # callScene 2 | 3 | 调用场景。 4 | 5 | ## 语句内容 6 | 7 | 临时加载新场景的内容，新场景结束后，继续执行原场景。 8 | 9 | ::: warning 10 | 调用场景不会清空当前场景（如立绘、背景），若没有主动关闭，它们将被带到新场景中。 11 | ::: 12 | 13 | ```webgal 14 | 角色A:我记得在商店的时候......; 15 | callScene:chapter_01/shop.txt; 16 | 角色A:原来是这样，我知道是怎么回事了; 17 | ``` 18 | -------------------------------------------------------------------------------- /src/webgal-script/README.md: -------------------------------------------------------------------------------- 1 | # WebGAL 脚本教程 2 | 3 | ## 目录 4 | 5 | - [基础](base.md) 6 | 7 | - [对话](dialogue.md) 8 | 9 | - [背景与立绘](bg-and-figure.md) 10 | 11 | - [音频](audio.md) 12 | 13 | - [视频](video.md) 14 | 15 | - [场景与分支](scenes.md) 16 | 17 | - [变量](variable.md) 18 | 19 | - [动画效果](animation.md) 20 | 21 | - [特效](special-effect.md) 22 | -------------------------------------------------------------------------------- /src/ja/webgal-script/README.md: -------------------------------------------------------------------------------- 1 | # WebGAL スクリプトチュートリアル 2 | 3 | ## 目次 4 | 5 | - [基礎](base.md) 6 | 7 | - [会話](dialogue.md) 8 | 9 | - [背景と立ち絵](bg-and-figure.md) 10 | 11 | - [オーディオ](audio.md) 12 | 13 | - [ビデオ](video.md) 14 | 15 | - [シーンと分岐](scenes.md) 16 | 17 | - [変数](variable.md) 18 | 19 | - [アニメーション効果](animation.md) 20 | 21 | - [特殊効果](special-effect.md) -------------------------------------------------------------------------------- /src/en/publish/readme.md: -------------------------------------------------------------------------------- 1 | # Deploy or publish my visual novel? 2 | 3 | First of all, please be aware that what can be deployed to the internet should be **the release version or the webpage exported by WebGAL GUI editor**, not the source code. 4 | 5 | - [Webpage](web/readme.md) 6 | 7 | - [Windows / macOS / Linux](desktop/readme.md) 8 | 9 | - [Android](android/readme.md) -------------------------------------------------------------------------------- /src/script-reference/arguments/series-cg.md: -------------------------------------------------------------------------------- 1 | - 字符串 2 | 3 | 填写一个名称，CG 鉴赏将收录该图片到指定名称的系列中，如果不填写该参数，或系列名称为空，则会将该图片收录到默认系列中。 4 | 5 | ``` 6 | 默认系列 7 | | - CG 名称 1 8 | | - CG 名称 2 9 | 系列名称 1 10 | | - CG 名称 3 11 | | - CG 名称 4 12 | | - CG 名称 5 13 | 系列名称 2 14 | | - CG 名称 6 15 | ``` 16 | 17 | 同一张图片（严格来说是同路径的图片）只能拥有存在于一个系列。如果同一张图片被收录在多个系列中，该图片只会存在于最后一次收录时填写的系列中。 18 | -------------------------------------------------------------------------------- /src/script-reference/arguments/series-bgm.md: -------------------------------------------------------------------------------- 1 | - 字符串 2 | 3 | 填写一个名称，BGM 鉴赏将收录该音乐到指定名称的系列中，如果不填写该参数，或系列名称为空，则会将该音乐收录到默认系列中。 4 | 5 | ``` 6 | 默认系列 7 | | - BGM 名称 1 8 | | - BGM 名称 2 9 | 系列名称 1 10 | | - BGM 名称 3 11 | | - BGM 名称 4 12 | | - BGM 名称 5 13 | 系列名称 2 14 | | - BGM 名称 6 15 | ``` 16 | 17 | 同一首音乐（严格来说是同路径的音乐）只能拥有存在于一个系列。如果同一首音乐被收录在多个系列中，该音乐只会存在于最后一次收录时填写的系列中。 18 | -------------------------------------------------------------------------------- /src/en/publish/desktop/readme.md: -------------------------------------------------------------------------------- 1 | # Windows / macOS / Linux 2 | 3 | You can select Export Executable in the top right corner of the editor, the executable can be run on the current system directly. 4 | 5 | ::: tip 6 | After the game is exported, the file manager will open automatically. If it doesn't open automatically, you can find it in `Exported_Games` under the editor directory. 7 | ::: -------------------------------------------------------------------------------- /src/script-reference/commands/jumpLabel.md: -------------------------------------------------------------------------------- 1 | # jumpLabel 2 | 3 | 跳转到指定标签。 4 | 详情请见[标签跳转](../../webgal-script/scenes.md#标签跳转)。 5 | 6 | ## 语句内容 7 | 8 | 填写要跳转的目标标签名称。 9 | 10 | ```webgal 11 | label:think; 12 | ; 13 | 角色A:我记得她好像喜欢......; 14 | choose:小熊玩偶:wrong|兔子玩偶:correct; 15 | ; 16 | label:wrong; 17 | 角色A:好像不太对，再想想。; 18 | jumpLabel:think; 19 | ; 20 | label:correct; 21 | 角色A:对，是兔子玩偶。; 22 | ``` 23 | -------------------------------------------------------------------------------- /src/script-reference/commands/miniAvatar.md: -------------------------------------------------------------------------------- 1 | # miniAvatar 2 | 3 | 显示、改变、隐藏对话框旁边的小头像的三合一命令。 4 | 5 | ## 语句内容 6 | 7 | 填写小头像图片的路径。当文件路径为空或为 `none` 时，表示隐藏小头像。 8 | 详情请见[放置小头像](../../webgal-script/bg-and-figure.md#放置小头像)。 9 | 10 | ```webgal 11 | miniAvatar:character_a/avatar.png; 12 | 角色A:这是角色 A 在说话; 13 | miniAvatar:character_b/avatar.png; 14 | 角色B:这是角色 B 在说话; 15 | miniAvatar:none; 16 | :这是一段旁白; 17 | ``` 18 | -------------------------------------------------------------------------------- /src/publish/web/readme.md: -------------------------------------------------------------------------------- 1 | # Web 网页 2 | 3 | ## 如果你使用**编辑器** 4 | 5 | 在编辑器右上角选择导出为网页。网页的部署方式，与部署一个正常网站的方式无异。你可以购买云服务器（腾讯云、阿里云）等部署或使用 GitHub Pages。 6 | 7 | ## 如果你使用**发行版** 8 | 9 | 复制/WebGAL 下的文件(不是文件夹，是/WebGAL 文件夹下的文件)到你想要部署的云服务器的指定目录下，或是部署到 GitHub Pages。 10 | 11 | ## 使用**源代码开发**的开发者 12 | 13 | 如果你使用源代码进行调试，你可以通过 `yarn build` 来创建一个静态网页（在 packages/webgal/dist 文件夹），然后将这个文件夹内的内容部署到 GitHub Pages 或你的云服务器上。 14 | -------------------------------------------------------------------------------- /src/script-reference/commands/choose.md: -------------------------------------------------------------------------------- 1 | # choose 2 | 3 | 显示选项。 4 | 5 | ## 语句内容 6 | 7 | 填写多个选项。每个选项包括 __选项文本__ 和 __跳转目标__ 两个部分，用英文冒号 `:` 分割；每个选项之间用 `|` 分隔。 8 | 详情请见[分支选择](../../webgal-script/scenes.md#分支选择)。 9 | 10 | 目前可以跳转至 11 | - 场景文件 12 | - 本场景的某个标签 13 | 14 | ```webgal 15 | 角色A:今天去哪儿呢？; 16 | choose:去商店:chapter_01/shop.txt|某人家里:chapter_01/house_b.txt|待在家里:home; 17 | ; 18 | label:home; 19 | 角色A:还是待在家里吧。; 20 | ``` 21 | -------------------------------------------------------------------------------- /src/script-reference/commands/playVideo.md: -------------------------------------------------------------------------------- 1 | # playVideo 2 | 3 | 播放视频。 4 | 5 | ## 语句内容 6 | 7 | 填写视频文件的路径，全屏播放该视频，图层高于立绘和背景，并临时静音对话语音和背景音乐。 8 | 详情请见[视频](../../webgal-script/video.md)。 9 | 10 | ```webgal 11 | playVideo:video.mp4; 12 | ``` 13 | 14 | ## 参数 15 | 16 | ### skipOff 17 | - 布尔值 18 | 19 | 当值为 `true` 时，不允许跳过视频。 20 | 当值为 `false` 或不填写该参数时，双击可跳过视频。 21 | 22 | ```webgal 23 | playVideo:video.mp4 -skipOff; 24 | ``` 25 | -------------------------------------------------------------------------------- /src/migration.md: -------------------------------------------------------------------------------- 1 | # 在编辑器更新后迁移游戏文件 2 | 3 | ## 迁移游戏 4 | 5 | WebGAL Terre 编辑器的游戏工程文件目录在 `public/games` 目录下。在这个目录下，你可以看到你所创建的游戏名称。 6 | 7 | 当你下载或安装了新的编辑器后，你可以将旧版本编辑器下的游戏直接迁移到新版本编辑器的相同目录下，然后打开新版本编辑器，即可使用。 8 | 9 | 除大版本（版本号的第一位数字）升级的兼容性不保证之外，一般来说游戏都可以向下兼容。 10 | 11 | ## 迁移模板和定制引擎 12 | 13 | 如果你创建了模板，或导入了定制引擎，你也需要迁移这些文件到新版本的编辑器。模板文件在 `public/templates` 目录下。 14 | 定制引擎在 `assets/templates/Derivative_Engine`目录下。你需要将这些文件迁移到新版本的相同目录下。 15 | -------------------------------------------------------------------------------- /src/en/webgal-script/README.md: -------------------------------------------------------------------------------- 1 | # WebGAL Script Tutorial 2 | 3 | ## Table of Contents 4 | 5 | - [Base](base.md) 6 | 7 | - [Dialogue](dialogue.md) 8 | 9 | - [Background and Figure](bg-and-figure.md) 10 | 11 | - [Audio](audio.md) 12 | 13 | - [Video](video.md) 14 | 15 | - [Scenes and Branches](scenes.md) 16 | 17 | - [Variables](variable.md) 18 | 19 | - [Animation Effects](animation.md) 20 | 21 | - [Special Effects](special-effect.md) -------------------------------------------------------------------------------- /src/script-reference/arguments/ease.md: -------------------------------------------------------------------------------- 1 | ### ease 2 | - 字符串 3 | 4 | 填写缓动类型，控制动画的缓动效果，默认值为 `easeInOut`，可选值包括 5 | - `linear`：线性 6 | - `easeIn`：缓入 7 | - `easeOut`：缓出 8 | - `easeInOut`：缓入缓出 9 | - `circIn`：圆形缓入 10 | - `circOut`：圆形缓出 11 | - `circInOut`：圆形缓入缓出 12 | - `backIn`：起点回弹 13 | - `backOut`：终点回弹 14 | - `backInOut`：起止回弹 15 | - `bounceIn`：起点弹跳 16 | - `bounceOut`：终点弹跳 17 | - `bounceInOut`：起止弹跳 18 | - `anticipate`：预先反向 19 | 20 | 任何其他字符串都会回退到默认值。 21 | -------------------------------------------------------------------------------- /src/sponsor/readme.md: -------------------------------------------------------------------------------- 1 | # 赞助 2 | 3 | WebGAL 是一款开源软件，因此你可以免费在 MPL-2.0 开源协议的范畴下使用本软件，并可用于商业使用。 4 | 5 | 但即便如此，你的赞助也可以给予开发者前进的动力，让这个项目变得更好。 6 | 7 | ## 展示赞助信息 8 | 9 | 无论你使用何种形式赞助，你都可以在 WebGAL 的 GitHub 项目主页和网站展示您的信息（个人主页、公司主页、GitHub 资料页等）。如需展示，请在留言中留下需要展示的内容或将内容连同赞助收据发送至 [contact@openwebgal.com](mailto:contact@openwebgal.com) 10 | 11 | ## Patreon 12 | 13 | [Use Patreon](https://www.patreon.com/WebGAL) 14 | 15 | ## 使用支付宝赞助 16 | 17 | ![img.png](./img.png) 18 | -------------------------------------------------------------------------------- /src/script-reference/commands/setTextbox.md: -------------------------------------------------------------------------------- 1 | # setTextbox 2 | 3 | 显示和隐藏文本框的二合一命令。 4 | 5 | ## 语句内容 6 | 7 | 填写 `hide` 时，隐藏对话框，其他任何字符串均表示显示对话框。 8 | 9 | ::: info 10 | 用 `setTextbox` 隐藏对话框后，若后续没有其他 `setTextbox` 命令显示对话框，则对话框将一直保持隐藏状态。 11 | ::: 12 | 13 | 如果用 `setTextbox` 显示对话框，但是对话框仍然没有出现，可能是因为以下情况： 14 | - 说话内容与角色名均为空 15 | - 开启了 __隐藏所有 UI__ 16 | 17 | ```webgal 18 | 角色A:带你去一个地方。; 19 | setTextbox:hide; 20 | changeBg:shop.png; 21 | setTextbox:show; 22 | 角色A:我们到了。; 23 | ``` 24 | -------------------------------------------------------------------------------- /src/faq.md: -------------------------------------------------------------------------------- 1 | # 可能遇到的问题与解决方案 2 | 3 | ## 为什么我的文件没有正常被识别 4 | 5 | 文件的命名应当避免使用特殊符号、空格等难以被识别的文件名。尽可能使用纯英文命名。文件的后缀名应当为完全小写字符。 6 | 7 | ## 为什么我的音频文件没有被正常播放 8 | 9 | 在苹果浏览器上，不支持播放 ogg 文件，需要转换文件格式，比如转换到 mp3. 10 | 11 | ## 导出的网页为什么无法打开 12 | 13 | 由于浏览器安全策略，你无法从文件打开一个本地网页。你需要使用一个http 服务器，按部署网站的方法部署 WebGAL。常见的有: Nginx, Apache http server, VS Code Live Server 插件, Python http server. 14 | 15 | ## Windows 7 上为什么可视化编辑器闪一下就没了 16 | 17 | 由于 node.js 的版本高于 Windows 7 所支持的最高版本导致的。请参考 [Windows 7 使用可视化编辑器开始制作的方法](./win7) 解决。 18 | -------------------------------------------------------------------------------- /src/script-reference/commands/unlockBgm.md: -------------------------------------------------------------------------------- 1 | # unlockBgm 2 | 3 | 将音乐收录进 BGM 鉴赏。 4 | 5 | ## 语句内容 6 | 7 | 填写音乐的路径。 8 | 9 | ```webgal 10 | unlockBgm:school/morning.mp3 -name=学校的早晨; 11 | ``` 12 | 13 | ## 参数 14 | 15 | ### name 16 | 17 | 若不填写 `name`，则以音乐的路径作为名称。 18 | 19 | ```webgal 20 | unlockBgm:school/morning.mp3 -name=学校的早晨; 21 | ``` 22 | 23 | ### series 24 | 25 | ```webgal 26 | unlockBgm:school/morning.mp3 -name=早晨 -series=学校; 27 | ``` 28 | -------------------------------------------------------------------------------- /src/script-reference/commands/unlockCg.md: -------------------------------------------------------------------------------- 1 | # unlockCg 2 | 3 | 将图片收录进 CG 鉴赏。 4 | 5 | ## 语句内容 6 | 7 | 填写图片的路径。 8 | 9 | ```webgal 10 | unlockCg:chapter_03/date.png -name=第一次约会; 11 | ``` 12 | 13 | ## 参数 14 | 15 | ### name 16 | 17 | 若不填写 `name`，则以图片的路径作为名称。 18 | 19 | ```webgal 20 | unlockCg:chapter_03/date.png -name=第一次约会; 21 | ``` 22 | 23 | ### series 24 | 25 | ```webgal 26 | unlockCg:chapter_03/date.png -name=第一次约会 -series=角色B; 27 | ``` 28 | -------------------------------------------------------------------------------- /.github/workflows/pr-check.yml: -------------------------------------------------------------------------------- 1 | on: 2 | pull_request: 3 | types: 4 | - opened 5 | - reopened 6 | - synchronize 7 | 8 | # 任务 9 | jobs: 10 | build-and-deploy: 11 | # 服务器环境：最新版 Ubuntu 12 | runs-on: ubuntu-latest 13 | steps: 14 | # 拉取代码 15 | - name: Checkout 16 | uses: actions/checkout@v2 17 | with: 18 | persist-credentials: false 19 | 20 | # 生成静态文件 21 | - name: Build 22 | run: | 23 | npm install yarn -g && yarn install && yarn build 24 | -------------------------------------------------------------------------------- /src/ja/publish/web/readme.md: -------------------------------------------------------------------------------- 1 | # Web ウェブ 2 | 3 | ## **エディタ** を使用している場合 4 | 5 | エディタの右上にある「Web にエクスポート」を選択します。Web のデプロイ方法は、通常の Web サイトをデプロイする方法と変わりません。クラウドサーバー（Tencent Cloud、Alibaba Cloud など）を購入してデプロイするか、GitHub Pages を使用することができます。 6 | 7 | ## **リリース版** を使用している場合 8 | 9 | /WebGAL の下にあるファイル（フォルダではなく、/WebGAL フォルダの下にあるファイル）を、デプロイしたいクラウドサーバーの指定されたディレクトリにコピーするか、GitHub Pages にデプロイします。 10 | 11 | ## **ソースコード開発** を使用している開発者 12 | 13 | ソースコードを使用してデバッグを行う場合、`yarn build` を使用して静的 Web ページ（packages/webgal/dist フォルダ内）を作成し、このフォルダ内のコンテンツを GitHub Pages またはクラウドサーバーにデプロイすることができます。 -------------------------------------------------------------------------------- /src/script-reference/commands/comment.md: -------------------------------------------------------------------------------- 1 | # comment 2 | 3 | 单行注释。`comment` 并非注释命令保留字，以英文分号 `;` 开头的行被视为单行注释。 4 | 5 | ## 语句内容 6 | 7 | `;` 后面可以跟随注释内容，该命令本身不执行任何操作。 8 | 详情请见[注释](../../webgal-script/base.md#注释)。 9 | 10 | ```webgal 11 | ; 这是一个注释 12 | ``` 13 | 14 | 任何命令语句的第一个 `;` (`\;` 除外) 后的内容被视为行内注释。行内注释不会改变该行的命令类型。 15 | 16 | ```webgal 17 | changeFigure:character_a/normal.png -id=aaa; 18 | setTransform:{"position":{"x":-500}} -target=aaa -duration=500; 给立绘 B 让位置 19 | changeFigure:character_b/normal.png -id=bbb -transform={"position":{"x":500}}; 20 | ``` 21 | -------------------------------------------------------------------------------- /src/ja/sponsor/readme.md: -------------------------------------------------------------------------------- 1 | # スポンサーシップ 2 | 3 | WebGALはオープンソースソフトウェアであり、MPL-2.0オープンソースライセンスの範囲内で無料で使用でき、商用利用も可能です。 4 | 5 | しかし、あなたのスポンサーシップは開発者に前進する原動力となり、このプロジェクトをより良いものにすることができます。 6 | 7 | ## スポンサー情報の表示 8 | 9 | どのような方法でスポンサーになっても、WebGALのGitHubプロジェクトホームページとウェブサイトにあなたの情報（個人ホームページ、会社ホームページ、GitHubプロフィールページなど）を表示することができます。表示するには、メッセージに表示する内容を残すか、内容をスポンサー領収書と一緒に[contact@openwebgal.com](mailto:contact@openwebgal.com)までお送りください。 10 | 11 | ## Patreon 12 | 13 | [Patreonを使用する](https://www.patreon.com/WebGAL) 14 | 15 | ## アリペイを使ってスポンサーする 16 | 17 | ![img.png](./img.png) -------------------------------------------------------------------------------- /src/script-reference/commands/pixiPerform.md: -------------------------------------------------------------------------------- 1 | # pixiPerform 2 | 3 | 添加舞台特效。使用舞台特效前，需要先使用 `pixiInit` 命令进行初始化。 4 | 5 | ## 语句内容 6 | 7 | 填写舞台特效名称，将播放对应名称的舞台特效。 8 | 详情请见[特效](../../webgal-script/special-effect.md)。 9 | 10 | 目前可用的舞台特效有： 11 | - `cherryBlossoms`：樱花飘落 12 | - `rain`：下雨 13 | - `snow`：下雪 14 | - `heavySnow`：下大雪 15 | 16 | ```webgal 17 | pixiInit; 初始化舞台特效 18 | pixiPerform:rain; 19 | 说话者:下雨了。; 20 | pixiInit; 清除所有舞台特效 21 | 说话者:雨停了。; 22 | ``` 23 | 24 | 您可以叠加使用两种不同的舞台特效。 25 | 26 | ```webgal 27 | pixiInit; 28 | pixiPerform:rain; 29 | pixiPerform:snow; 30 | 说话者:雨雪纷飞。; 31 | ``` 32 | -------------------------------------------------------------------------------- /src/ja/migration.md: -------------------------------------------------------------------------------- 1 | # 編輯器ヲ更新シタル後ニ、ゲームファイルヲ移行スル 2 | 3 | ## ゲームノ移行 4 | 5 | WebGAL Terre 編輯器ノゲームプロジェクトファイルディレクトリハ `public/games` ディレクトリ下ニアリマス。此ノディレクトリ下ニハ、作成シタゲームノ名前ガ表示サレマス。 6 | 7 | 新シイ編輯器ヲダウンロード又ハインストールシタ後、旧バージョンノ編輯器下ノゲームヲ新バージョンノ編輯器ノ同ジディレクトリニ直接移行シ、新バージョンノ編輯器ヲ開クコトデ使用デキルヨウニナリマス。 8 | 9 | メジャーバージョン（バージョン番号ノ最初ノ数字）ノアップグレードノ互換性ハ保証サレマセンガ、一般的ニハゲームハ下位互換性ガアリマス。 10 | 11 | ## テンプレートトカスタムエンジンノ移行 12 | 13 | テンプレートヲ作成シタ場合、又ハカスタムエンジンヲインポートシタ場合、これらのファイルヲ新バージョンノ編輯器ニ移行スル必要モアリマス。テンプレートファイルハ `public/templates` ディレクトリ下ニアリマス。 14 | カスタムエンジンハ `assets/templates/Derivative_Engine` ディレクトリ下ニアリマス。これらのファイルヲ新バージョンノ同ジディレクトリニ移行スル必要ガアリマス。 15 | 16 | -------------------------------------------------------------------------------- /src/resources.md: -------------------------------------------------------------------------------- 1 | # 管理游戏资源 2 | 3 | ::: tip 4 | 如果你使用图形化编辑器，你可以在左侧的工具栏中直接打开对应的资源文件夹。如果你基于源代码开发，该文件夹在 `public` 下。 5 | ::: 6 | 7 | 你的所有游戏剧本、图片、立绘都应该放在游戏工程对应的 `game` 文件夹下，目录对应的资源说明如下： 8 | 9 | | 文件夹 | 存放的资源 | 10 | | :--------- | :-------------------------- | 11 | | animation | 动画描述文件 | 12 | | background | 用于存放背景图片、标题页背景 | 13 | | figure | 用于存放人物立绘 | 14 | | scene | 用于存放用户剧本 | 15 | | bgm | 用于存放背景音乐 | 16 | | vocal | 用于存放配音文件 | 17 | | video | 用于存放视频 | 18 | | tex | 用于存放特效纹理文件 | 19 | -------------------------------------------------------------------------------- /src/script-reference/commands/setComplexAnimation.md: -------------------------------------------------------------------------------- 1 | # setComplexAnimation 2 | 3 | 设置复杂动画。 4 | 5 | ## 语句内容 6 | 7 | 填写复杂动画的名称。 8 | 9 | 目前 WebGAL 提供的复杂动画有： 10 | - `universalSoftIn`：通用透明度淡入 11 | - `universalSoftOff`：通用透明度淡出 12 | 13 | ```webgal 14 | setComplexAnimation:universalSoftIn -target=aaa -duration=1000; 15 | ``` 16 | 17 | ## 参数 18 | 19 | 20 | ```webgal 21 | setComplexAnimation:universalSoftIn -target=fig-center -duration=1000; 22 | ``` 23 | 24 | 25 | 作用于复杂动画的持续时间。 26 | ```webgal 27 | setComplexAnimation:universalSoftIn -target=fig-center -duration=1000; 28 | ``` 29 | -------------------------------------------------------------------------------- /src/ja/faq.md: -------------------------------------------------------------------------------- 1 | # 考えられる問題と解決策 2 | 3 | ## なぜ私のファイルは正常に認識されなかったのか 4 | 5 | ファイルの命名は、特殊記号、スペースなど、認識されにくいファイル名は避けるべきです。できるだけ純粋な英語で命名してください。ファイルの拡張子はすべて小文字でなければなりません。 6 | 7 | ## なぜ私のオーディオファイルは正常に再生されなかったのか 8 | 9 | アップルブラウザでは、ogg ファイルの再生はサポートされていません。ファイル形式を変換する必要があります。例えば、mp3 に変換します。 10 | 11 | ## エクスポートされたウェブページがなぜ開けないのか 12 | 13 | ブラウザのセキュリティポリシーにより、ファイルからローカルウェブページを開くことはできません。http サーバーを使用し、WebGAL をウェブサイトをデプロイする方法に従ってデプロイする必要があります。一般的なものには、Nginx、Apache http サーバー、VS Code Live Server プラグイン、Python http サーバーがあります。 14 | 15 | ## Windows 7 でなぜビジュアルエディタが一瞬で消えてしまうのか 16 | 17 | node.js のバージョンが Windows 7 でサポートされている最高バージョンよりも高いためです。[Windows 7 でビジュアルエディタを使用して制作を開始する方法](./win7) を参照して解決してください。 -------------------------------------------------------------------------------- /src/script-reference/commands/playEffect.md: -------------------------------------------------------------------------------- 1 | # playEffect 2 | 3 | 播放音效、替换音效、停止音效的三合一命令。 4 | 5 | ## 语句内容 6 | 7 | 填写音效文件的路径。当文件路径为空或为 `none` 时，表示停止播放音效。 8 | 详情请见[播放效果音](../../webgal-script/audio.md#播放效果音)。 9 | 10 | ```webgal 11 | ; 如果没有音效存在，则此句表示播放音效。 12 | playEffect:rain.wav; 13 | ; 如果已有音效存在，则此句表示替换音效。 14 | playEffect:heavy_rain.wav; 15 | ; 如果填写 none 或者不填，则此句表示停止播放音效。 16 | playEffect:none; 17 | ``` 18 | 19 | ## 参数 20 | 21 | ### id 22 | - 字符串 23 | 24 | 为音效设置 id 后，音效可以循环播放。 25 | 不同 id 的音效与无 id 的音效可以叠加播放。 26 | 27 | ```webgal 28 | ; 循环播放脚步声 29 | playEffect:footsteps.wav -id=footsteps; 30 | ; 循环播放雨声 31 | playEffect:rain.wav -id=rain; 32 | ; 播放一次雷声 33 | playEffect:thunder.wav; 34 | ``` 35 | -------------------------------------------------------------------------------- /src/script-reference/commands/applyStyle.md: -------------------------------------------------------------------------------- 1 | # applyStyle 2 | 3 | 更换 UI 样式。 4 | 5 | ## 语句内容 6 | 7 | 首先需要在 UI 模板中新写一个样式，然后可以用 `applyStyle` 命令，将新样式替换原样式。 8 | 原样式名与新样式名之间用 `->` 连接，您可以同时替换多个样式，每个替换之间用英文逗号 `,` 分隔。 9 | 格式如:原样式名->新样式名,原样式名2->新样式名2,... 10 | 11 | ```webgal 12 | ; 将角色名背景替换为红色，前提是在 UI 模板里写了新样式 13 | applyStyle:TextBox_ShowName_Background->TextBox_ShowName_Background_Red; 14 | 角色名:这是一句话; 15 | ; 同时替换多个样式 16 | applyStyle:TextBox_ShowName_Background->TextBox_ShowName_Background_Green,TextBox_main->TextBox_main_Black; 17 | ``` 18 | 19 | 无论原样式被替换为什么新样式，替换样式依旧是原样式名在前; 20 | 21 | ```webgal 22 | applyStyle:原样式名->新样式名1; 23 | applyStyle:新样式名1->新样式名2; 错误 24 | applyStyle:原样式名->新样式名2; 25 | ``` 26 | -------------------------------------------------------------------------------- /src/script-reference/commands/getUserInput.md: -------------------------------------------------------------------------------- 1 | # getUserInput 2 | 3 | 获取用户输入。 4 | 5 | ## 语句内容 6 | 7 | 填写变量名称，用户输入的值将保存在该变量中。 8 | 9 | ```webgal 10 | 角色B:真的是太感谢您了，能告诉我您的名字吗？; 11 | getUserInput:player_name -title=您的名字 -buttonText=确认 -defaultValue=Bob; 12 | 角色B:{player_name}，我记住了。; 13 | ``` 14 | 15 | ## 参数 16 | 17 | ### title 18 | - 字符串 19 | 20 | 设置输入框的标题。 21 | 22 | ```webgal 23 | getUserInput:player_name -title=您的名字; 24 | ``` 25 | 26 | ### buttonText 27 | - 字符串 28 | 29 | 设置确认按钮文本。 30 | 31 | ```webgal 32 | getUserInput:player_name -buttonText=确认; 33 | ``` 34 | 35 | ### defaultValue 36 | - 字符串 37 | 38 | 设置输入框的默认值。 39 | 40 | ```webgal 41 | getUserInput:player_name -defaultValue=Bob; 42 | ``` 43 | -------------------------------------------------------------------------------- /src/script-reference/commands/changeScene.md: -------------------------------------------------------------------------------- 1 | # changeScene 2 | 3 | 切换场景。 4 | 5 | ## 语句内容 6 | 7 | 填写场景文件的路径，将切换到对应场景。 8 | 详情请见[场景与分支](../../webgal-script/scenes.md)。 9 | 10 | ::: warning 11 | 切换场景不会清空当前场景（如立绘、背景），若没有主动关闭，它们将被带到新场景中。 12 | ::: 13 | 14 | - chapter_01/part_01.txt 15 | ```webgal 16 | changeBg:home/character_a/bedroom.png; 17 | changeFigure:main_character/character_a/thinking.png -next; 18 | 角色A:今天去她家里吧！; 19 | changeBg:none -next; 手动关闭背景 20 | changeFigure:none -next; 手动关闭立绘 21 | :; 手动关闭对话框 22 | changeScene:chapter_01/part_02.txt; 23 | ``` 24 | - chapter_01/part_02.txt 25 | ```webgal 26 | changeBg:home/character_b/living_room.png; 27 | changeFigure:main_character/character_b/smile.png -next; 28 | 角色B:是你啊，有什么事吗？; 29 | ``` 30 | -------------------------------------------------------------------------------- /src/ja/derivative.md: -------------------------------------------------------------------------------- 1 | # カスタムエンジンを使用する方法 2 | 3 | ## カスタムエンジンのファイル構造 4 | 5 | カスタムエンジンは通常、圧縮ファイル形式で配布されます。解凍すると、カスタムエンジンを名前とするディレクトリが得られ、ディレクトリ構造はおおよそ次のようになります（name は WebGAL Terre で表示されるカスタムエンジンの名前です）。 6 | 7 | ``` 8 | name 9 | ├── assets 10 | ├── game 11 | ├── icons 12 | ├── index.html 13 | ├── manifest.json 14 | └── webgal-serviceworker.js 15 | ``` 16 | 17 | 次に、このようなディレクトリを WebGAL Terre の assets/templates/Derivative_Engine に配置し、次のようなファイル構造にします（そうしないと、正常にゲームを作成できません）。 18 | 19 | ``` 20 | Derivative_Engine 21 | └── name 22 | ├── assets 23 | ├── game 24 | ├── icons 25 | ├── index.html 26 | ├── manifest.json 27 | └── webgal-serviceworker.js 28 | 29 | ``` 30 | 31 | WebGAL Terre を起動すると、ゲームを作成するときにカスタムエンジンを使用してゲームを作成できるようになります。 -------------------------------------------------------------------------------- /src/derivative.md: -------------------------------------------------------------------------------- 1 | # 如何使用定制引擎 2 | 3 | 定制引擎功能是 WebGAL Terre 4.5.0 版本加入的功能。相比于只能使用 WebGAL 官方模板创建一个新的游戏项目，定制引擎允许你在创建游戏项目时使用你自己开发或他人开发的，针对某种类型游戏的定制版本。 4 | 5 | ## 定制引擎的文件结构 6 | 7 | 定制引擎一般以压缩包的形式分发。解压后，得到以定制引擎为名称的一个目录，目录结构大致是这样的（name 是定制引擎在 WebGAL Terre 中显示的名称）： 8 | 9 | ``` 10 | name 11 | ├── assets 12 | ├── game 13 | ├── icons 14 | ├── index.html 15 | ├── manifest.json 16 | └── webgal-serviceworker.js 17 | ``` 18 | 19 | 然后，将这样的目录放入 WebGAL Terre 的 assets/templates/Derivative_Engine 下，形成形如如下文件结构（否则不能正常创建游戏）： 20 | 21 | ``` 22 | Derivative_Engine 23 | └── name 24 | ├── assets 25 | ├── game 26 | ├── icons 27 | ├── index.html 28 | ├── manifest.json 29 | └── webgal-serviceworker.js 30 | 31 | ``` 32 | 33 | 启动 WebGAL Terre，你应该可以在创建游戏时选择使用定制引擎创建游戏。 -------------------------------------------------------------------------------- /src/ja/resources.md: -------------------------------------------------------------------------------- 1 | # ゲームリソースの管理 2 | 3 | ::: tip 4 | グラフィックエディタを使用している場合は、左側のツールバーから対応するリソースフォルダを直接開くことができます。ソースコードをベースに開発している場合は、そのフォルダは `public` にあります。 5 | ::: 6 | 7 | ゲームのすべてのスクリプト、画像、立ち絵は、ゲームエンジンの対応する `game` フォルダの下に配置する必要があります。ディレクトリに対応するリソースの説明を以下に示します。 8 | 9 | | フォルダ | 格納されているリソース | 10 | | :--------- | :-------------------------- | 11 | | animation | アニメーション記述ファイル | 12 | | background | 背景画像、タイトルページの背景に使用 | 13 | | figure | キャラクターの立ち絵を格納するために使用 | 14 | | scene | ユーザーのスクリプトを格納するために使用 | 15 | | bgm | BGM を格納するために使用 | 16 | | vocal | ボイスファイルを格納するために使用 | 17 | | video | ビデオを格納するために使用 | 18 | | tex | エフェクトテクスチャファイルを格納するために使用 | -------------------------------------------------------------------------------- /combine.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # 遍历所有子目录（包括当前目录） 4 | find . -type d | while read -r dir; do 5 | # 从目录路径中提取目录名，替换 '/' 为 '_' 6 | dir_name=$(basename "$dir") 7 | output_file="$dir/${dir_name}_combined.md" 8 | 9 | # 检查并删除已存在的输出文件 10 | if [ -f "$output_file" ]; then 11 | rm "$output_file" 12 | fi 13 | 14 | # 在每个目录中遍历 .md 文件 15 | find "$dir" -maxdepth 1 -name '*.md' | while read -r file; do 16 | # 确保文件存在且不是目录 17 | if [ -f "$file" ]; then 18 | echo "Merging $file into $output_file" 19 | cat "$file" >> "$output_file" 20 | # 在每个文件之间加入换行以分隔内容 21 | echo -e "\n" >> "$output_file" 22 | fi 23 | done 24 | done 25 | 26 | echo "All .md files in each directory have been combined." 27 | 28 | -------------------------------------------------------------------------------- /src/info/readme.md: -------------------------------------------------------------------------------- 1 | # WebGAL 情报 2 | 3 | ## 新特性预告 4 | 5 | WebGAL 的开发计划基本上是用 issues 跟踪的，请访问 [WebGAL issues](https://github.com/OpenWebGAL/WebGAL/issues) 或 [WebGAL Terre issues](https://github.com/OpenWebGAL/WebGAL_Terre/issues) 来查看。 6 | 7 | ## 特性请求与缺陷报告 8 | 9 | 如果你想要请求任何 WebGAL 引擎以及编辑器的新特性，或报告任何缺陷，请使用下文所述的 Issues 页面或发送邮件来向开发者报告。Issues 和邮件更加正式并且会被长期保存，因此需要通过这种方式来记录。 10 | 11 | ### 说明模板 12 | 13 | 你好，我是[名称或昵称]，在使用 WebGAL [引擎/编辑器] 时，出现了以下问题： 14 | 15 | [在此处简单描述问题表现] 16 | 17 | [如果有相关截图，附上相关截图] 18 | 19 | 出现问题的具体代码是这样的： 20 | 21 | ``` 22 | 在这里展示具体出现故障的代码或编辑器编辑页面的截图 23 | ``` 24 | 25 | 如果你发现 BUG 需要报告，请在 [WebGAL issues](https://github.com/OpenWebGAL/WebGAL/issues) 或 [WebGAL Terre issues](https://github.com/OpenWebGAL/WebGAL_Terre/issues) 提出 issue 或者发送电子邮件联系 contact@openwebgal.com 。 26 | 27 | 28 | -------------------------------------------------------------------------------- /src/en/publish/web/readme.md: -------------------------------------------------------------------------------- 1 | # Web 2 | 3 | ## If you use **Editor** 4 | 5 | Select Export to Web in the upper right corner of the editor. The deployment method of the web page is the same as that of deploying a normal website. You can purchase cloud servers (Tencent Cloud, Alibaba Cloud) for deployment or use GitHub Pages. 6 | 7 | ## If you use **Release Version** 8 | 9 | Copy the files under /WebGAL (not the folder, the files under the /WebGAL folder) to the specified directory of the cloud server you want to deploy, or deploy to GitHub Pages. 10 | 11 | ## Developers who use **Source Code Development** 12 | 13 | If you use the source code for debugging, you can create a static web page by `yarn build` (in the packages/webgal/dist folder), and then deploy the contents of this folder to GitHub Pages or your cloud server. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webgal-doc", 3 | "version": "1.0.0", 4 | "description": "The document of WebGAL engine.", 5 | "license": "MPL 2.0", 6 | "type": "module", 7 | "scripts": { 8 | "build": "vuepress build src", 9 | "clean-dev": "vuepress dev src --clean-cache", 10 | "dev": "vuepress dev src", 11 | "update-package": "yarn dlx vp-update" 12 | }, 13 | "devDependencies": { 14 | "@vuepress/client": "2.0.0-beta.66", 15 | "@vuepress/plugin-search": "2.0.0-beta.66", 16 | "vue": "^3.3.4", 17 | "vuepress": "2.0.0-beta.66", 18 | "vuepress-theme-hope": "2.0.0-beta.235" 19 | }, 20 | "dependencies": { 21 | "@vuepress/plugin-shiki": "2.0.0-beta.66", 22 | "axios": "^1.6.5", 23 | "fs-extra": "^11.2.0", 24 | "vuepress-plugin-md-enhance": "2.0.0-beta.66" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/ja/info/readme.md: -------------------------------------------------------------------------------- 1 | # WebGAL 情報 2 | 3 | ## 新機能予告 4 | 5 | WebGAL の開発予定は基本的に issues で管理していますので、[WebGAL issues](https://github.com/OpenWebGAL/WebGAL/issues) または [WebGAL Terre issues](https://github.com/OpenWebGAL/WebGAL_Terre/issues) をご覧下さい。 6 | 7 | ## 機能リクエストと不具合報告 8 | 9 | WebGAL エンジン本体およびエディタの新機能リクエストや不具合報告は、下記の Issues ページかメールにて開発者までご連絡ください。Issues およびメールはより正式な記録として長期的に保存されますので、これらでの報告をお願いします。 10 | 11 | ### 説明テンプレート 12 | 13 | 初めまして、[名前またはハンドルネーム]と申します。WebGAL の [エンジン/エディタ] を使用していて、以下の問題が発生しました。 14 | 15 | [問題の現象を簡潔に説明] 16 | 17 | [関連するスクリーンショットがあれば添付] 18 | 19 | 問題が発生した具体的なコードは以下の通りです。 20 | 21 | ``` 22 | 不具合が発生した具体的なコードまたはエディタの編集画面のスクリーンショットを掲載 23 | ``` 24 | 25 | 不具合の報告は [WebGAL issues](https://github.com/OpenWebGAL/WebGAL/issues) または [WebGAL Terre issues](https://github.com/OpenWebGAL/WebGAL_Terre/issues) にて Issue を立てていただくか、contact@openwebgal.com までメールにてご連絡ください。 -------------------------------------------------------------------------------- /src/en/sponsor/readme.md: -------------------------------------------------------------------------------- 1 | # Sponsorship 2 | 3 | WebGAL is an open source software, you can use it for free under MPL-2.0 open source agreement, and it can be used for commercial use. 4 | 5 | But even so, your sponsorship can encourage the developer to move forward and make this project better. 6 | 7 | ## Show Sponsorship Information 8 | 9 | No matter what kind of sponsorship you use, you can show your information (personal homepage, company homepage, GitHub profile page, etc.) on the GitHub project homepage and website of WebGAL. If you need to show it, please leave the content that needs to be displayed in the message or send the content together with the sponsorship receipt to [contact@openwebgal.com](mailto:contact@openwebgal.com). 10 | 11 | ## Patreon 12 | 13 | [Use Patreon](https://www.patreon.com/WebGAL) 14 | 15 | ## Use Alipay to Sponsor 16 | 17 | ![img.png](./img.png) -------------------------------------------------------------------------------- /src/config.md: -------------------------------------------------------------------------------- 1 | # 编辑游戏配置 2 | 3 | 在 `game` 文件夹下，有一个名为 `config.txt` 的文件，你可以在这个文件中填写你游戏的相关信息（使用图形化编辑器可以直接编辑）。 4 | 5 | | 参数 | 描述 | 6 | | :------------ |:---------------------------| 7 | | Game_name | 游戏名称 | 8 | | Game_key | 游戏识别码，长度 6-10 字符，不要与别的游戏重复 | 9 | | Title_img | 标题图片，放在 `background` 文件夹 | 10 | | Title_bgm | 标题背景音乐，放在 `bgm` 文件夹 | 11 | | Game_Logo | 游戏 Logo，可以显示多个，用 \| 分割 | 12 | | Enable_Appreciation | 是否启用鉴赏功能，包括 CG 和背景音乐鉴赏。 | 13 | | Default_Language | 默认语言，可设置为 'zh_CN', 'zh_TW', 'en', 'ja', 'fr', 'de' | 14 | | Show_panic | 是否启用紧急回避功能，设置为 true 或 false | 15 | | Legacy_Expression_Blend_Mode | 是否启用 Live2D 的旧表情混合模式，设置为 true 或 false | 16 | 17 | 以下是配置文件示例： 18 | 19 | ``` text 20 | Game_name:WebGAL; 21 | Game_key:0f33fdGr; 22 | Title_img:Title.png; 23 | Title_bgm:夏影.mp3; 24 | Game_Logo:WebGalEnter.png|bg.png; 25 | Enable_Appreciation:true; 26 | ``` 27 | -------------------------------------------------------------------------------- /src/showcase-your-game.md: -------------------------------------------------------------------------------- 1 | # 展示您的游戏 2 | 3 | 首先需要准备好以下信息： 4 | 5 | * 游戏 ID：游戏唯一 ID，使用英文，不能与其他游戏重复 6 | * 游戏标题 7 | * 开发者名称 8 | * 发布日期 9 | * 发布地址：可公开访问的页面链接，比如项目主页、商店、博客、视频等 10 | * 游戏封面：宽度 616 像素，高度 353 像素 11 | 12 | ## 通过 Pull Requests 提交您的游戏 13 | 14 | Fork [WebGAL_HomePage](https://github.com/OpenWebGAL/WebGAL_HomePage) 这个仓库。 15 | 16 | 将准备好的封面添加到 `/public/images/games`。 17 | 18 | 打开文件 `/data/games.ts` ，找到 `games` ，在结尾根据以下模板添加： 19 | 20 | ``` typescript 21 | { 22 | id: '游戏 ID', 23 | title: '游戏标题', 24 | developer: '开发者名称', 25 | releaseDate: 'xxxx-xx-xx', 26 | url: 'https://example.com/', 27 | cover: '游戏封面文件名.webp', 28 | }, 29 | ``` 30 | 31 | 确认无误后发起 pull requests 请求。 32 | 33 | ## 通过 Issues 提交您的游戏 34 | 35 | 打开 WebGAL_HomePage 仓库的 [Issues 页面](https://github.com/OpenWebGAL/WebGAL_HomePage/issues) 。 36 | 37 | 点击 `New issue` ，填入准备好的信息，确认无误后点击 `Submit new issue` 。 38 | 39 | ## 通过其他渠道提交您的游戏 40 | 41 | 准备好需要的信息后，可以通过讨论社区或者邮箱联系我们，来提交您的游戏。 42 | -------------------------------------------------------------------------------- /src/ja/config.md: -------------------------------------------------------------------------------- 1 | # ゲーム設定を編集する 2 | 3 | `game` フォルダの下に `config.txt` というファイルがあり、このファイルにゲームの関連情報を記入することができます（グラフィカルなエディタを使って直接編集することもできます）。 4 | 5 | | パラメータ | 説明 | 6 | | :------------ | :----------------------------------------------- | 7 | | Game_name | ゲーム名 | 8 | | Game_key | ゲーム識別コード、長さ 6-10 文字、他のゲームと重複しないようにしてください | 9 | | Title_img | タイトル画像、`background` フォルダに入れてください | 10 | | Title_bgm | タイトルの BGM、`bgm` フォルダに入れてください | 11 | | Game_Logo | ゲームのロゴ、複数表示することができ、\| で区切ります | 12 | | Enable_Appreciation | 鑑賞機能（CGおよび背景音楽の鑑賞を含む）を有効にするかどうか。 | 13 | | Default_Language | デフォルト言語、「zh_CN」、「zh_TW」、「en」、「ja」、「fr」、「de」に設定可能。 | 14 | | Show_panic | パニックボタン機能を有効にするかどうか、true または false に設定 | 15 | | Legacy_Expression_Blend_Mode | Live2D の旧表情ブレンドモードを有効にするかどうか、true または false に設定 | 16 | 17 | 以下は設定ファイルの例です。 18 | 19 | ``` text 20 | Game_name:WebGAL; 21 | Game_key:0f33fdGr; 22 | Title_img:Title.png; 23 | Title_bgm:夏影.mp3; 24 | Game_Logo:WebGalEnter.png|bg.png; 25 | Enable_Appreciation:true; 26 | ``` 27 | -------------------------------------------------------------------------------- /.github/workflows/vuepress-build.yml: -------------------------------------------------------------------------------- 1 | # name 可以自定义 2 | name: Deploy WebGAL Document 3 | 4 | # 触发条件：在 push 到 main/master 分支后，新的 Github 项目 应该都是 main，而之前的项目一般都是 master 5 | on: 6 | push: 7 | branches: 8 | - main 9 | 10 | # 任务 11 | jobs: 12 | build-and-deploy: 13 | # 服务器环境：最新版 Ubuntu 14 | runs-on: ubuntu-latest 15 | steps: 16 | # 拉取代码 17 | - name: Checkout 18 | uses: actions/checkout@v2 19 | with: 20 | persist-credentials: false 21 | 22 | # 生成静态文件 23 | - name: Build 24 | run: | 25 | npm install yarn -g && yarn install && yarn build 26 | 27 | # 部署到 GitHub Pages 28 | - name: Deploy 29 | uses: JamesIves/github-pages-deploy-action@releases/v4 30 | with: 31 | ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # 也就是我们刚才生成的 secret 32 | BRANCH: gh-pages # 部署到 gh-pages 分支，因为 main 分支存放的一般是源码，而 gh-pages 分支则用来存放生成的静态文件 33 | FOLDER: src/.vuepress/dist # vuepress 生成的静态文件存放的地方 34 | -------------------------------------------------------------------------------- /src/en/migration.md: -------------------------------------------------------------------------------- 1 | # Migrate Game Files After Editor Update 2 | 3 | ## Migrating Games 4 | 5 | WebGAL Terre editor's game project files are located in the `public/games` directory. In this directory, you can see the names of the games you have created. 6 | 7 | After you download or install the new editor, you can directly migrate the games from the old editor to the same directory of the new editor, and then open the new editor to use them. 8 | 9 | Except for major version (the first digit of the version number) upgrades, the compatibility is not guaranteed, but in general, games are backward compatible. 10 | 11 | ## Migrating Templates and Custom Engines 12 | 13 | If you have created templates or imported custom engines, you will also need to migrate these files to the new version of the editor. Template files are located in the `public/templates` directory. 14 | Custom engines are located in the `assets/templates/Derivative_Engine` directory. You will need to migrate these files to the same directory in the new version. 15 | -------------------------------------------------------------------------------- /src/script-reference/commands/setAnimation.md: -------------------------------------------------------------------------------- 1 | # setAnimation 2 | 3 | 设置动画。 4 | 5 | ## 语句内容 6 | 7 | 填写自定义动画名称，驱动指定目标的舞台对象执行多段动画。 8 | 详情请见[自定义动画](../../webgal-script/animation.md#自定义动画)和[动画参考](../others/animation-reference.md)。 9 | 10 | :::info 11 | 如果您想直接在脚本里设置多段动画，请使用 [setTempAnimation](setTempAnimation.md) 命令。 12 | 如果您只想设置单段动画，请使用 [setTransform](setTransform.md) 命令。 13 | ::: 14 | 15 | ```webgal 16 | setAnimation:shake -target=aaa; 17 | ``` 18 | 19 | ## 参数 20 | 21 | 22 | ```webgal 23 | changeFigure:1/open_eyes.png -id=aaa; 24 | setAnimation:shake -target=aaa; 25 | ``` 26 | 27 | 28 | ```webgal 29 | changeFigure:1/open_eyes.png -id=aaa; 30 | setAnimation:shake -target=aaa -writeDefault; 31 | ``` 32 | 33 | 34 | ```webgal 35 | ; 假设这是一个特别长的动画 36 | setAnimation:shake -target=aaa -keep; 37 | 角色A: 第一句话; 38 | 角色A: 第二句话; 39 | 角色A: 第三句话; 40 | ; 这会打断 aaa 的跨语句动画，并播放新动画 41 | setAnimation:rotate -target=aaa -keep; 42 | ``` 43 | -------------------------------------------------------------------------------- /src/en/faq.md: -------------------------------------------------------------------------------- 1 | # Possible Problems and Solutions 2 | 3 | ## Why my files are not recognized properly 4 | 5 | The file names should avoid using special symbols, spaces and other hard-to-recognize characters. Use pure English names as much as possible. The file extensions should be all lowercase. 6 | 7 | ## Why my audio files are not played properly 8 | 9 | On Apple's Safari browser, ogg files are not supported. You need to convert the file format, for example, to mp3. 10 | 11 | ## Why the exported web page cannot be opened 12 | 13 | Due to browser security policy, you cannot open a local web page from a file. You need to use a http server, deploy WebGAL by the same way as deploying a website. Common choices are: Nginx, Apache http server, VS Code Live Server extension, Python http server. 14 | 15 | ## Why the visual editor flashes and disappears on Windows 7 16 | 17 | This is because the version of node.js is higher than the highest version supported by Windows 7. Please refer to [How to use the visual editor on Windows 7](./win7) to solve the problem. -------------------------------------------------------------------------------- /src/.vuepress/sidebar/ja.ts: -------------------------------------------------------------------------------- 1 | import { sidebar } from "vuepress-theme-hope"; 2 | 3 | export const jaSidebar = sidebar({ 4 | "/ja/": [ 5 | { 6 | text: "ゲーム開発ガイド", 7 | // prefix: "/", 8 | children: [ 9 | "getting-started", 10 | "resources", 11 | "config", 12 | "publish", 13 | "faq", 14 | "live2D", 15 | "migration", 16 | "derivative", 17 | ], 18 | }, 19 | { 20 | text: "WebGAL Script チュートリアル", 21 | prefix: "webgal-script/", 22 | children: [ 23 | "base", 24 | "dialogue", 25 | "bg-and-figure", 26 | "audio", 27 | "video", 28 | "scenes", 29 | "variable", 30 | "animation", 31 | "special-effect", 32 | ] 33 | }, 34 | { 35 | text: "開発情報", 36 | children: [ 37 | "developers", 38 | "tech", 39 | "info", 40 | "sponsor", 41 | "developers/joinus", 42 | "developers/terre", 43 | ] 44 | }, 45 | ], 46 | }); 47 | -------------------------------------------------------------------------------- /src/script-reference/commands/setTransition.md: -------------------------------------------------------------------------------- 1 | # setTransition 2 | 3 | 设置舞台对象的入场或出场动画。 4 | 5 | ## 语句内容 6 | 7 | 不需要填写任何语句内容。 8 | 详情请见[设置进出场效果](../../webgal-script/animation.md#设置进出场效果)。 9 | 10 | ```webgal 11 | changeFigure:1/open_eyes.png -id=aaa -next; 12 | setTransition: -target=aaa -enter=enter-from-left; 13 | 角色A: 你好！ 14 | setTransition: -target=aaa -exit=exit-to-right; 15 | changeFigure:none -id=aaa -next; 16 | 角色A: 再见！ 17 | ``` 18 | 19 | ## 参数 20 | 21 | 22 | ```webgal 23 | changeFigure:1/open_eyes.png -id=aaa -next; 24 | setTransition: -target=aaa -enter=enter-from-left; 25 | 角色A: 你好！ 26 | ``` 27 | 28 | 29 | ```webgal 30 | changeFigure:1/open_eyes.png -id=aaa -next; 31 | setTransition: -target=aaa -enter=enter-from-left; 32 | 角色A: 你好！ 33 | ``` 34 | 35 | 36 | ```webgal 37 | changeFigure:1/open_eyes.png -id=aaa -next; 38 | 角色A: 你好！ 39 | setTransition: -target=aaa -exit=exit-to-right; 40 | changeFigure:none -id=aaa -next; 41 | 角色A: 再见！ 42 | ``` 43 | -------------------------------------------------------------------------------- /src/.vuepress/sidebar/en.ts: -------------------------------------------------------------------------------- 1 | import { sidebar } from "vuepress-theme-hope"; 2 | 3 | export const enSidebar = sidebar({ 4 | "/en/": [ 5 | { 6 | text: "Game Development Guide", 7 | // prefix: "/en/", 8 | children: [ 9 | "getting-started", 10 | "resources", 11 | "config", 12 | "publish", 13 | "faq", 14 | "live2D", 15 | "migration", 16 | "derivative", 17 | ], 18 | }, 19 | { 20 | text: "WebGAL Script Tutorial", 21 | prefix: "webgal-script/", 22 | children: [ 23 | "base", 24 | "dialogue", 25 | "bg-and-figure", 26 | "audio", 27 | "video", 28 | "scenes", 29 | "variable", 30 | "animation", 31 | "special-effect", 32 | ] 33 | }, 34 | { 35 | text: "Development Information", 36 | children: [ 37 | "developers", 38 | "tech", 39 | "info", 40 | "sponsor", 41 | "developers/joinus", 42 | "developers/terre", 43 | ] 44 | }, 45 | ], 46 | }); 47 | -------------------------------------------------------------------------------- /src/en/resources.md: -------------------------------------------------------------------------------- 1 | # Manage game resources 2 | 3 | ::: tip 4 | If you are using the graphical editor, you can directly open the corresponding resource folder in the toolbar on the left. If you are developing based on the source code, the folder is under `public`. 5 | ::: 6 | 7 | All your game scripts, pictures, and portraits should be placed under the `game` folder corresponding to the game project. The following is a description of the resources corresponding to the directory: 8 | 9 | | Folder | Resources stored | 10 | | :--------- | :-------------------------- | 11 | | animation | Animation description file | 12 | | background | Used to store background pictures, title page background | 13 | | figure | Used to store character portraits | 14 | | scene | Used to store user scripts | 15 | | bgm | Used to store background music | 16 | | vocal | Used to store dubbing files | 17 | | video | Used to store videos | 18 | | tex | Used to store special effects texture files | -------------------------------------------------------------------------------- /src/live2D.md: -------------------------------------------------------------------------------- 1 | # 关于Live2D 2 | 本引擎现已支持使用 live2D 立绘。如果你要使用 live2D 立绘，请遵循以下步骤： 3 | 4 | :::info 5 | 注意：以下某些步骤基于 WebGAL 源代码操作，你可以在 GitHub 找到 WebGAL 的源代码。 6 | 7 | [WebGAL 源代码](https://github.com/OpenWebGAL/WebGAL) 8 | 9 | 关于如何从源代码构建 WebGAL，请参考 [WebGAL 构建](developers) 10 | ::: 11 | 12 | 1、自行取得 live2D 的授权 13 | 14 | 2、到 https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js 和 https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js 分别下载 live2D 和 cubismcore 15 | 16 | 3、分别重命名为 `live2d.min.js` 和 `live2dcubismcore.min.js` ，然后将文件放到**其中一个指定目录** 17 | 18 | - 定制引擎目录：`[WebGal]/assets/templates/Derivative_Engine/[你的定制引擎]/lib` 19 | - 游戏目录（作用于单个项目）：`[WebGal]/public/games/[你的游戏]/lib` 20 | - WebGal源码目录：`[WebGal源码]/packages/webgal/public/lib` 21 | 22 | 4、现在开始你可以使用 live2D 作为立绘了。你需要将整个模型的目录放入 `game/figure` 目录中，调用立绘的方法是调用立绘的 json 文件。 23 | 24 | **注意：本项目的作者没有使用任何 live2D SDK 的源码和模型，由于使用 live2D 造成的任何版权纠纷，皆由二次开发者或制作者自行承担！** 25 | 26 | ## 切换动作和表情 27 | 28 | 你可以使用 `-motion=motionName` 或 `-expression=expressionName` 参数来切换表情，如： 29 | 30 | ``` 31 | changeFigure:xxx.json -motion=angry -expression=angry01; 32 | ``` 33 | -------------------------------------------------------------------------------- /src/ja/showcase-your-game.md: -------------------------------------------------------------------------------- 1 | # あなたのゲームを展示する 2 | 3 | まず、以下の情報を準備する必要があります： 4 | 5 | * ゲーム ID：ゲームの一意の ID で、英語を使用し、他のゲームと重複しないものにします。 6 | * ゲームのタイトル 7 | * 開発者の名前 8 | * リリース日 9 | * リリース先の URL：プロジェクトのホームページ、ストア、ブログ、動画など、一般にアクセス可能なページへのリンクです。 10 | * ゲームのカバー画像：幅 616 ピクセル、高さ 353 ピクセル 11 | 12 | ## プルリクエストであなたのゲームを提出する 13 | 14 | [WebGAL_HomePage](https://github.com/OpenWebGAL/WebGAL_HomePage) リポジトリをフォークします。 15 | 16 | 準備したカバー画像を `/public/images/games` に追加します。 17 | 18 | `/data/games.ts` ファイルを開き、 `games` を見つけて、以下のテンプレートに従って末尾に追加します。 19 | 20 | ``` typescript 21 | { 22 | id: 'ゲーム ID', 23 | title: 'ゲームのタイトル', 24 | developer: '開発者の名前', 25 | releaseDate: 'xxxx-xx-xx', 26 | url: 'https://example.com/', 27 | cover: 'ゲームのカバー画像のファイル名.webp', 28 | }, 29 | ``` 30 | 31 | 間違いがないことを確認したら、プルリクエストを送信します。 32 | 33 | ## イシューであなたのゲームを提出する 34 | 35 | WebGAL_HomePage リポジトリの [イシューページ](https://github.com/OpenWebGAL/WebGAL_HomePage/issues) を開きます。 36 | 37 | `New issue` をクリックし、準備した情報を入力します。間違いがないことを確認したら、`Submit new issue` をクリックします。 38 | 39 | ## 他のチャネルであなたのゲームを提出する 40 | 41 | 必要な情報を準備したら、ディスカッションコミュニティまたはメールで連絡して、あなたのゲームを提出することができます。 -------------------------------------------------------------------------------- /src/webgal-script/base.md: -------------------------------------------------------------------------------- 1 | # 基础 2 | 3 | 首先，程序启动时会从 **初始脚本** `start.txt` 开始运行，请不要重命名或者删除。 4 | 5 | 后面的教程中将会教你如何使用 WebGAL 脚本。 6 | 7 | ## 注释 8 | 9 | WebGAL 脚本只会解析每一行的分号前的内容，因此分号后的内容会被视作注释。 10 | 11 | ``` ws 12 | WebGAL:你好！; 分号后的内容会被视作注释 13 | ; 可以直接输入一个分号，然后写一条单行注释 14 | ``` 15 | 16 | ## `none` 关键词 17 | 18 | 在设置立绘、BGM、背景等 **资源** 时，通过设置为 `none`，可以关闭这个对象。 19 | 20 | ## `-next` 参数 21 | 22 | 你可以在任意语句后加上参数 `-next`，这样做可以在执行完本条语句后立刻跳转到下一条语句。这对需要在同一时间内执行多步操作非常有用。 23 | 24 | 示例： 25 | 26 | ``` ws 27 | changeBg:testBG03.jpg -next; // 会立刻执行下一条语句 28 | ``` 29 | 30 | ## `-notend` 和 `-concat` 参数 31 | 32 | 有时候，可能你希望在某一句对话执行到某个阶段时加入演出效果，比如切换表情等。 33 | 这时候，你可以使用 `-notend` `-concat` 参数来实现在对话中插入任意语句。 34 | 35 | `-concat` 代表本句对话连接在上一句对话之后 36 | 37 | `-notend` 代表本句对话没有结束，在后面可能连接演出或对话。 38 | 39 | 示例如下：这是一个在对话进行中切换立绘的演示。 40 | 41 | ``` ws 42 | WebGAL:测试语句插演出！马上切换立绘...... -notend; 43 | changeFigure:k1.png -next; 44 | 切换立绘！马上切换表情...... -notend -concat; 45 | changeFigure:k2.png -next; 46 | 切换表情！ -concat; 47 | ``` 48 | 49 | 你也可以只使用 `-concat` 参数，将下一句连接在上一句对话之后，因为 `-notend` 参数会在对话渐显完成后转到下一句。 50 | 51 | ``` ws 52 | 这是第一句......; 53 | 用户点击鼠标后才会转到第二句 -concat; 54 | ``` 55 | -------------------------------------------------------------------------------- /src/script-reference/commands/bgm.md: -------------------------------------------------------------------------------- 1 | # bgm 2 | 3 | 播放背景音乐、切换背景音乐、停止背景音乐、设置背景音乐参数的四合一命令。 4 | 5 | ## 语句内容 6 | 7 | 填写背景音乐的路径。当文件路径为空或为 none 时，表示停止播放。 8 | 详情请见[音频](../../webgal-script/audio.md)。 9 | 10 | ```webgal 11 | ; 如果没有背景音乐，则此句表示播放背景音乐。 12 | bgm:01.wav; 13 | ; 如果已有背景音乐存在，则此句表示切换背景音乐。 14 | bgm:02.wav; 15 | ; 如果填写 none 或不填时，则此句表示停止播放背景音乐。 16 | bgm:; 17 | ``` 18 | 19 | 若背景音乐的路径不变，则不会打断背景音乐, 而是将新参数应用到背景音乐上。 20 | 21 | ```webgal 22 | bgm:morning.wav; 23 | ; 调整音量，但不会打断背景音乐 24 | bgm:morning.wav -volume=50; 25 | ``` 26 | 27 | ## 参数 28 | 29 | 30 | ```webgal 31 | bgm:01.wav -volume=100; 32 | bgm:01.wav -volume=50; 调整音量 33 | ``` 34 | 35 | ### enter 36 | - 数字 37 | - 单位：毫秒 38 | - 范围：0 到正无穷 39 | - 默认值：0 40 | 41 | 背景音乐的淡入时间。 42 | 43 | ```webgal 44 | bgm:01.wav -enter=1500; 45 | bgm:02.wav -enter=1500; 46 | ``` 47 | 48 | ### unlockname 49 | 50 | ```webgal 51 | bgm:01.wav -unlockname=MyBgm01; 52 | ``` 53 | 54 | ### series 55 | 56 | 单独填写 `series` 不会进行收录，请确保同时填写了 `unlockname`。 57 | 58 | ```webgal 59 | bgm:01.wav -unlockname=MyBgm01 -series=MySeries01; 60 | ``` 61 | -------------------------------------------------------------------------------- /translate.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import fs from "fs-extra"; 3 | import * as path from "path"; 4 | 5 | // 获取命令行参数 6 | const args = process.argv.slice(2); 7 | const targetLang = args[0] || 'ja'; // 默认目标语言为英语 8 | // 假设你希望通过命令行参数指定目录 9 | const specifiedDirectory = args[1] || 'src/ja/webgal-script'; // 默认为当前目录 10 | 11 | const translateMarkdown = async (filePath) => { 12 | try { 13 | const content = await fs.readFile(filePath, 'utf-8'); 14 | const response = await axios.post('https://translate-md.icedn.com', `[${targetLang}]\n${content}`); 15 | await fs.writeFile(filePath, response.data); 16 | } catch (error) { 17 | console.error(`Error processing file ${filePath}:`, error); 18 | } 19 | }; 20 | 21 | const traverseDirectory = async (dir) => { 22 | const files = await fs.readdir(dir); 23 | for (let file of files) { 24 | const fullPath = path.join(dir, file); 25 | const stat = await fs.stat(fullPath); 26 | if (stat.isDirectory()) { 27 | await traverseDirectory(fullPath); 28 | } else if (path.extname(file) === '.md') { 29 | await translateMarkdown(fullPath); 30 | } 31 | } 32 | }; 33 | 34 | traverseDirectory(specifiedDirectory); -------------------------------------------------------------------------------- /src/.vuepress/navbar/zh.ts: -------------------------------------------------------------------------------- 1 | import { navbar } from "vuepress-theme-hope"; 2 | 3 | export const zhNavbar = navbar([ 4 | { text: '主页', link: 'https://openwebgal.com/zh-cn/' }, 5 | // { text: '文档', link: '/' }, 6 | { 7 | text: '更多', 8 | children: [ 9 | { 10 | text: 'WebGAL 情报', 11 | children: [ 12 | { text: '更新情报', link: '/info/' }, 13 | ], 14 | }, 15 | { 16 | text: '参与开发', 17 | children: [ 18 | '/developers/', 19 | '/tech/', 20 | ], 21 | }, 22 | { 23 | text: '加入讨论社区', 24 | children: [ 25 | { 26 | text: 'QQ群：709293432', 27 | link: 'https://jq.qq.com/?_wv=1027&k=gYVremLy', 28 | }, 29 | { text: 'Discord', link: 'https://discord.gg/kPrQkJttJy' }, 30 | ], 31 | }, 32 | { 33 | text: '关注开发者', 34 | children: [ 35 | { text: 'Bilibili', link: 'https://space.bilibili.com/7321105' }, 36 | { text: 'Github', link: 'https://github.com/MakinoharaShoko' }, 37 | ], 38 | }, 39 | { 40 | text: '赞助本项目', 41 | children: [ 42 | { text: '赞助', link: '/sponsor/' }, 43 | ], 44 | }, 45 | ], 46 | }, 47 | ]); 48 | -------------------------------------------------------------------------------- /src/en/info/readme.md: -------------------------------------------------------------------------------- 1 | # WebGAL News 2 | 3 | ## New Features Preview 4 | 5 | WebGAL's development plan is basically tracked by issues, please visit [WebGAL issues](https://github.com/OpenWebGAL/WebGAL/issues) or [WebGAL Terre issues](https://github.com/OpenWebGAL/WebGAL_Terre/issues) to check. 6 | 7 | ## Feature Requests & Bug Reports 8 | 9 | If you want to request any new features for WebGAL engine and editor, or report any bugs, please use the Issues page or send email to the developer as described below to report it. Issues and emails are more formal and will be kept in the long term, so we need to record them in this way. 10 | 11 | ### Template of Description 12 | 13 | Hello, I am [Your name or nickname], I met a problem when using WebGAL [engine/editor]: 14 | 15 | [Simply describe the problem phenomenon here] 16 | 17 | [Attach related screenshots if any] 18 | 19 | The specific code with the problem is like this: 20 | 21 | ``` 22 | Show the specific code or screenshot of editor edit page where the fault occurs here 23 | ``` 24 | 25 | If you find a BUG that needs to be reported, please create an issue at [WebGAL issues](https://github.com/OpenWebGAL/WebGAL/issues) or [WebGAL Terre issues](https://github.com/OpenWebGAL/WebGAL_Terre/issues) or send an email to contact@openwebgal.com. -------------------------------------------------------------------------------- /src/README.md: -------------------------------------------------------------------------------- 1 | # WebGAL 文档 2 | 3 | ## WebGAL 的一些信息 4 | 5 | - [我想要知道更新情报或反馈建议](info) 6 | 7 | - [我想要参与引擎开发或了解如何从源代码开发 WebGAL](developers) 8 | 9 | - [我想要了解如何定制开发或贡献 WebGAL Terre 编辑器](developers/terre) 10 | 11 | - [如何在编辑器中使用自己或他人开发的定制引擎](derivative) 12 | 13 | - [我想要了解 WebGAL 引擎的技术实现](tech) 14 | 15 | - [我想要赞助 WebGAL](sponsor) 16 | 17 | - [我想要加入 WebGAL 制作组！](developers/joinus) 18 | 19 | ## 游戏开发指引 20 | 21 | - [如何开始制作 WebGAL？](getting-started.md) 22 | 23 | - [管理游戏资源](resources.md) 24 | 25 | - [编辑游戏配置](config.md) 26 | 27 | - [如何部署或发布我的视觉小说？](publish) 28 | 29 | - [可能遇到的问题与解决方案](faq.md) 30 | 31 | - [在编辑器更新后迁移游戏文件](migration.md) 32 | 33 | - [如何添加 Live2D 支持](live2D.md) 34 | 35 | - [如何添加 Spine 支持](spine.md) 36 | 37 | ## WebGAL 脚本教程 38 | 39 | - [基础](webgal-script/base.md) 40 | 41 | - [对话](webgal-script/dialogue.md) 42 | 43 | - [背景与立绘](webgal-script/bg-and-figure.md) 44 | 45 | - [音频](webgal-script/audio.md) 46 | 47 | - [视频](webgal-script/video.md) 48 | 49 | - [场景与分支](webgal-script/scenes.md) 50 | 51 | - [变量](webgal-script/variable.md) 52 | 53 | - [动画效果](webgal-script/animation.md) 54 | 55 | - [特效](webgal-script/special-effect.md) 56 | 57 | ## Stargazers over time 58 | 59 | [![Stargazers over time](https://starchart.cc/OpenWebGAL/WebGAL.svg)](https://starchart.cc/OpenWebGAL/WebGAL) 60 | -------------------------------------------------------------------------------- /src/en/derivative.md: -------------------------------------------------------------------------------- 1 | # How to use custom engine 2 | 3 | Custom engine feature is added in WebGAL Terre 4.5.0. Compared with creating a new game project using only official WebGAL templates, custom engine allows you to use your own developed or other people's developed customized versions for certain types of games when creating game projects. 4 | 5 | ## File structure of custom engine 6 | 7 | Custom engines are usually distributed in the form of compressed packages. After decompression, you will get a directory named after the custom engine. The directory structure is roughly as follows (name is the name of the custom engine displayed in WebGAL Terre): 8 | 9 | ``` 10 | name 11 | ├── assets 12 | ├── game 13 | ├── icons 14 | ├── index.html 15 | ├── manifest.json 16 | └── webgal-serviceworker.js 17 | ``` 18 | 19 | Then, put such a directory under WebGAL Terre's assets/templates/Derivative_Engine, forming a file structure like the following (otherwise, the game cannot be created normally): 20 | 21 | ``` 22 | Derivative_Engine 23 | └── name 24 | ├── assets 25 | ├── game 26 | ├── icons 27 | ├── index.html 28 | ├── manifest.json 29 | └── webgal-serviceworker.js 30 | 31 | ``` 32 | 33 | Start WebGAL Terre, you should be able to choose to create a game using a custom engine when creating a game. -------------------------------------------------------------------------------- /src/.vuepress/navbar/ja.ts: -------------------------------------------------------------------------------- 1 | import { navbar } from "vuepress-theme-hope"; 2 | 3 | export const jaNavbar = navbar([ 4 | { text: 'ホームページ', link: 'https://openwebgal.com/ja/' }, 5 | // { text: 'ドキュメント', link: '/ja/' }, 6 | { 7 | text: 'その他', 8 | children: [ 9 | { 10 | text: 'WebGAL 情報', 11 | children: [ 12 | { text: '最新情報', link: '/ja/info/' }, 13 | ], 14 | }, 15 | { 16 | text: 'コントリビューション', 17 | children: [ 18 | '/ja/developers/', 19 | '/ja/tech/', 20 | ], 21 | }, 22 | { 23 | text: 'コンミュニティ', 24 | children: [ 25 | { 26 | text: 'QQ グループ: 709293432', 27 | link: 'https://jq.qq.com/?_wv=1027&k=gYVremLy', 28 | }, 29 | { text: 'Discord', link: 'https://discord.gg/kPrQkJttJy' }, 30 | ], 31 | }, 32 | { 33 | text: '開発者', 34 | children: [ 35 | { text: 'Bilibili', link: 'https://space.bilibili.com/7321105' }, 36 | { text: 'Github', link: 'https://github.com/MakinoharaShoko' }, 37 | ], 38 | }, 39 | { 40 | text: 'スポンサー', 41 | children: [ 42 | { text: 'スポンサーとなる', link: '/ja/sponsor/' }, 43 | ], 44 | }, 45 | ], 46 | }, 47 | ]); 48 | -------------------------------------------------------------------------------- /src/ja/live2D.md: -------------------------------------------------------------------------------- 1 | # Live2Dについて 2 | このエンジンは現在、Live2D立ち絵の使用をサポートしています。Live2D立ち絵を使用する場合は、次の手順に従ってください。 3 | 4 | :::info 5 | 注意：以下の手順の一部はWebGALソースコードの操作に基づいています。WebGALのソースコードはGitHubで見つけることができます。 6 | 7 | [WebGALソースコード](https://github.com/OpenWebGAL/WebGAL) 8 | 9 | ソースコードからWebGALをビルドする方法については、[WebGALビルド](developers)を参照してください。 10 | ::: 11 | 12 | 1. 自身でLive2Dのライセンスを取得してください。 13 | 14 | 2. https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js と https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js からそれぞれLive2Dとcubismcoreをダウンロードしてください。 15 | 16 | 3. それぞれ`live2d.min.js`と`live2dcubismcore.min.js`にリネームし、ファイルを**指定されたディレクトリのいずれか**に配置してください。 17 | 18 | - カスタムエンジンディレクトリ：`[WebGal]/assets/templates/Derivative_Engine/[あなたのカスタムエンジン]/lib` 19 | - ゲームディレクトリ（単一のプロジェクトに適用）：`[WebGal]/public/games/[あなたのゲーム]/lib` 20 | - WebGalソースコードディレクトリ：`[WebGalソースコード]/packages/webgal/public/lib` 21 | 22 | 4. これで、Live2Dを立ち絵として使用できるようになりました。モデル全体のディレクトリを`game/figure`ディレクトリに配置する必要があります。立ち絵を呼び出す方法は、立ち絵のjsonファイルを呼び出すことです。 23 | 24 | **注意：このプロジェクトの作者は、Live2D SDKのソースコードやモデルを一切使用していません。Live2Dの使用に起因する著作権紛争は、すべて二次開発者または制作者が責任を負うものとします。** 25 | 26 | ## モーションと表情の切り替え 27 | 28 | `-motion=motionName`または`-expression=expressionName`パラメータを使用して表情を切り替えることができます。例： 29 | 30 | ``` 31 | changeFigure:xxx.json -motion=angry -expression=angry01; 32 | ``` 33 | -------------------------------------------------------------------------------- /src/en/config.md: -------------------------------------------------------------------------------- 1 | # Edit Game Configuration 2 | 3 | Under the `game` folder, there is a file named `config.txt`, you can fill in the relevant information of your game in this file (you can edit it directly using a graphical editor). 4 | 5 | | Parameter | Description | 6 | | :------------ | :----------------------------------------------- | 7 | | Game_name | Game name | 8 | | Game_key | Game identification code, 6-10 characters in length, do not repeat with other games | 9 | | Title_img | Title picture, put it in the `background` folder | 10 | | Title_bgm | Title background music, put it in the `bgm` folder | 11 | | Game_Logo | Game Logo, multiple can be displayed, separated by \| | 12 | | Enable_Appreciation | Whether to enable the Appreciation feature, including CG and background music appreciation. | 13 | | Default_Language | Default language, can be set to 'zh_CN', 'zh_TW', 'en', 'ja', 'fr', 'de' | 14 | | Show_panic | Whether to enable the panic button feature, set to true or false | 15 | | Legacy_Expression_Blend_Mode | Whether to enable legacy expression blend mode for Live2D, set to true or false | 16 | 17 | The following is a sample configuration file: 18 | 19 | ``` text 20 | Game_name:WebGAL; 21 | Game_key:0f33fdGr; 22 | Title_img:Title.png; 23 | Title_bgm:夏影.mp3; 24 | Game_Logo:WebGalEnter.png|bg.png; 25 | Enable_Appreciation:true; 26 | ``` 27 | -------------------------------------------------------------------------------- /src/.vuepress/navbar/en.ts: -------------------------------------------------------------------------------- 1 | import { navbar } from "vuepress-theme-hope"; 2 | 3 | export const enNavbar = navbar([ 4 | { text: 'HOME', link: 'https://openwebgal.com/en/' }, 5 | // { text: 'DOCUMENT', link: '/en/' }, 6 | { 7 | text: 'MORE', 8 | children: [ 9 | { 10 | text: 'WebGAL Infomations', 11 | children: [ 12 | { text: 'Version Updates', link: '/en/info/' }, 13 | ], 14 | }, 15 | { 16 | text: 'Contributing', 17 | children: [ 18 | '/en/developers/', 19 | '/en/tech/', 20 | ], 21 | }, 22 | { 23 | text: 'Join Discuss Community', 24 | children: [ 25 | { 26 | text: 'QQ Group: 709293432', 27 | link: 'https://jq.qq.com/?_wv=1027&k=gYVremLy', 28 | }, 29 | { text: 'Discord', link: 'https://discord.gg/kPrQkJttJy' }, 30 | ], 31 | }, 32 | { 33 | text: 'Follow Developer', 34 | children: [ 35 | { text: 'Bilibili', link: 'https://space.bilibili.com/7321105' }, 36 | { text: 'Github', link: 'https://github.com/MakinoharaShoko' }, 37 | ], 38 | }, 39 | { 40 | text: 'Sponsor the project', 41 | children: [ 42 | { text: 'Sponsor', link: '/en/sponsor/' }, 43 | ], 44 | }, 45 | ], 46 | }, 47 | ]); 48 | -------------------------------------------------------------------------------- /src/ja/README.md: -------------------------------------------------------------------------------- 1 | # WebGAL ドキュメント 2 | 3 | ## WebGAL についての情報 4 | 5 | - [更新情報を知りたい、またはフィードバックや提案をしたい](info) 6 | 7 | - [WebGAL の開発に参加したり、ソースコードから WebGAL を開発する方法を学びたい](developers) 8 | 9 | - [WebGAL Terre エディターのカスタマイズ開発や貢献について](developers/terre) 10 | 11 | - [エディタで自分や他の人が開発したカスタムエンジンを使用する方法](derivative) 12 | 13 | - [WebGAL エンジンの技術的な実装について知りたい](tech) 14 | 15 | - [WebGAL をスポンサーしたい](sponsor) 16 | 17 | - [WebGAL 制作チームに参加したい！](developers/joinus) 18 | 19 | ## ゲーム開発ガイド 20 | 21 | - [WebGAL での制作を始めるには？](getting-started.md) 22 | 23 | - [ゲームリソースを管理する](resources.md) 24 | 25 | - [ゲーム設定を編集する](config.md) 26 | 27 | - [ビジュアルノベルをデプロイまたは公開するには？](publish) 28 | 29 | - [発生する可能性のある問題とその解決策](faq.md) 30 | 31 | - [移行ゲームファイル](migration.md) 32 | 33 | - [Live2Dサポートの追加方法](live2D.md) 34 | 35 | - [Spineサポートの追加方法](spine.md) 36 | 37 | ## WebGAL スクリプトチュートリアル 38 | 39 | - [基本](webgal-script/base.md) 40 | 41 | - [会話](webgal-script/dialogue.md) 42 | 43 | - [背景と立ち絵](webgal-script/bg-and-figure.md) 44 | 45 | - [オーディオ](webgal-script/audio.md) 46 | 47 | - [ビデオ](webgal-script/video.md) 48 | 49 | - [シーンと分岐](webgal-script/scenes.md) 50 | 51 | - [変数](webgal-script/variable.md) 52 | 53 | - [アニメーション効果](webgal-script/animation.md) 54 | 55 | - [特殊効果](webgal-script/special-effect.md) 56 | 57 | ## スターゲイザーの推移 58 | 59 | [![Stargazers over time](https://starchart.cc/OpenWebGAL/WebGAL.svg)](https://starchart.cc/OpenWebGAL/WebGAL) -------------------------------------------------------------------------------- /src/ja/webgal-script/base.md: -------------------------------------------------------------------------------- 1 | # 基本 2 | 3 | プログラムは起動時に**開始スクリプト**`start.txt`から実行を開始します。名前を変更したり削除したりしないでください。 4 | 5 | 以降のチュートリアルでは、WebGALスクリプトの使い方を説明します。 6 | 7 | ## コメント 8 | 9 | WebGALスクリプトは、各行のセミコロンより前の内容のみを解析します。したがって、セミコロンより後の内容はコメントとみなされます。 10 | 11 | ``` ws 12 | WebGAL:こんにちは！; セミコロンより後の内容はコメントとみなされます 13 | ; セミコロンを直接入力して、1行コメントを書くこともできます 14 | ``` 15 | 16 | ## `none`キーワード 17 | 18 | 立ち絵、BGM、背景などの**リソース**を設定するとき、`none`に設定することでそのオブジェクトを非表示にすることができます。 19 | 20 | ## `-next`パラメータ 21 | 22 | 任意の文の後に`-next`パラメータを追加することができます。そうすることで、その文を実行した直後に次の文にジャンプすることができます。これは、複数の操作を同時に実行する必要がある場合に非常に便利です。 23 | 24 | 例： 25 | 26 | ``` ws 27 | changeBg:testBG03.jpg -next; // 次の文をすぐに実行します 28 | ``` 29 | 30 | ## `-notend`と`-concat`パラメータ 31 | 32 | 場合によっては、会話のある段階で演出効果、例えば表情の切り替えなどを追加したいと思うかもしれません。 33 | その場合、`-notend` `-concat`パラメータを使用して、会話中に任意の文を挿入することができます。 34 | 35 | `-concat`は、この会話が前の会話の後に続くことを意味します。 36 | 37 | `-notend`は、この会話が終了していないことを意味し、その後に演出や会話が続く可能性があります。 38 | 39 | 例を以下に示します。これは、会話中に立ち絵を切り替えるデモです。 40 | 41 | ``` ws 42 | WebGAL:テスト文挿入演出！今すぐ立ち絵を切り替えます...... -notend; 43 | changeFigure:k1.png -next; 44 | 立ち絵を切り替えます！今すぐ表情を切り替えます...... -notend -concat; 45 | changeFigure:k2.png -next; 46 | 表情を切り替えます！ -concat; 47 | ``` 48 | 49 | `-concat` パラメータのみを使用して、次の文を前の文の会話に接続することもできます。`-notend` パラメータは、会話のフェードアウト後に次の文に移動するためです。 50 | 51 | ``` ws 52 | これは最初の文です......; 53 | ユーザーがマウスをクリックすると、2 番目の文に移ります -concat; 54 | ``` 55 | -------------------------------------------------------------------------------- /src/script-reference/commands/setTransform.md: -------------------------------------------------------------------------------- 1 | # setTransform 2 | 3 | 设置变换与效果。 4 | 5 | ## 语句内容 6 | 7 | 填写[变换与效果](../others/transform-reference.md)的单行 JSON 字符串。 8 | 9 | :::info 10 | 此命令只生成一段动画，如果您需要设置多段动画，请使用 [setAnimation](setAnimation.md) 或 [setTempAnimation](setTempAnimation.md) 命令。 11 | ::: 12 | 13 | ```webgal 14 | changeFigure:character_a/normal.png -id=aaa; 15 | ; 向左移动 16 | setTransform:{"position":{"x":-500},"saturation":0.8} -target=aaa -duration=500; 17 | ; 降低亮度 18 | setTransform:{"brightness":0.5,"contrast":1.2} -target=aaa -duration=500; 19 | ``` 20 | 21 | ## 参数 22 | 23 | 24 | ```webgal 25 | changeFigure:1/open_eyes.png -id=aaa; 26 | setTransform:{"brightness":0.5} -target=aaa -duration=500; 27 | ``` 28 | 29 | 30 | ```webgal 31 | changeFigure:1/open_eyes.png -id=aaa; 32 | setTransform:{"brightness":0.5} -target=aaa -duration=500; 33 | ``` 34 | 35 | 36 | ```webgal 37 | changeFigure:1/open_eyes.png -id=aaa; 38 | setTransform:{"brightness":0.5} -target=aaa -duration=500 -writeDefault; 39 | ``` 40 | 41 | 42 | ```webgal 43 | ; 假设这是一个特别长的动画 44 | setTransform:{"scale":{"x":2,"y":2}} -target=aaa -duration=10000 -keep; 45 | 角色A: 第一句话; 46 | 角色A: 第二句话; 47 | 角色A: 第三句话; 48 | ; 这会打断 aaa 的跨语句动画，并播放新动画 49 | setTransform:{"scale":{"x":1,"y":1}} -target=aaa -duration=10000 -keep; 50 | ``` 51 | -------------------------------------------------------------------------------- /src/script-reference/commands/setVar.md: -------------------------------------------------------------------------------- 1 | # setVar 2 | 3 | 新增变量、修改变量的二合一命令。 4 | 5 | ## 语句内容 6 | 7 | 格式如 `setVar:变量名=值;` 或 `setVar:变量名=表达式;`。 8 | 详情请见[变量](../../webgal-script/variable)。 9 | 10 | 支持的值类型包括: 11 | - 数字（如 15，5e3，-5.5） 12 | - 布尔值（`true` 或 `false`） 13 | - 字符串 14 | 15 | WebGAL 会尝试将无法识别的值类型，转换为字符串。 16 | 17 | ```webgal 18 | setVar:char_b_fav=15; 角色 B 初始好感度 19 | 角色B:呐呐，看不看得出来我今天哪里不一样？; 20 | choose:缎带:add|你变胖了:minus; 21 | ; 22 | label:add; 23 | 角色A:是换了缎带吧。; 24 | setVar:char_b_fav=char_b_fav+10; 角色 B 好感度 +10; 25 | 角色B:答对了，怎么样，你觉得好看吗？; 26 | 角色A:嗯，很适合你。; 27 | jumpLabel:go_out; 28 | ; 29 | label:minus; 30 | 角色A:你变胖了。; 31 | setVar:char_b_fav=char_b_fav-10; 角色 B 好感度 -10; 32 | 角色B:你这人好无趣唉......; 33 | ; 34 | label:go_out; 35 | 角色A:对了，今天晚上你有空吗？; 36 | ; 37 | 角色B:今晚没有安排，怎么了？ -when=char_b_fav>10; 38 | changeScene:chapter_01/part_02.txt -when=char_b_fav>10; 39 | ; 40 | 角色B:没有。不好意思我先走了。; 41 | :角色 B 离开了。; 42 | ; 43 | ``` 44 | 45 | ## 参数 46 | 47 | ### global 48 | - 布尔值 49 | 50 | 当值为 `true` 时，表示设置一个长效（全局）变量。长效变量在整个游戏中生效，除非用户清除全部数据。 51 | 当值为 `false` 时，表示设置一个普通变量。普通变量只在当前场景中生效，存档后会被保存，读档后恢复。 52 | 53 | ```webgal 54 | ; 假设这是新游戏的开头 55 | jumpLabel:another_life -when=multiple_playthroughs; 56 | ; 57 | setVar:multiple_playthroughs=false -global; 是否为多周目游戏 58 | changeScene:chapter_01/part_01.txt; 59 | ; 60 | label:another_life; 61 | 神秘的声音:如果有机会，你会选择过另一种人生吗？; 62 | changeScene:chapter_01/part_01_extra.txt; 63 | ; 64 | ; 假设这是最后一章的结束部分 65 | setVar:multiple_playthroughs=true -global; 设置为多周目游戏 66 | ``` 67 | -------------------------------------------------------------------------------- /src/script-reference/commands/changeBg.md: -------------------------------------------------------------------------------- 1 | # changeBg 2 | 3 | 背景入场, 替换背景, 背景退场的三合一命令。 4 | 5 | ## 语句内容 6 | 7 | 填写背景图片的路径。当文件路径为空或为 `none` 时，表示背景退场。 8 | 详情请见[背景与立绘](../../webgal-script/bg-and-figure.md)。 9 | 10 | ```webgal 11 | ; 如果没有背景存在，则此句表示背景入场。 12 | changeBg:bg.png; 13 | ; 如果已有背景存在，则此句表示替换背景。 14 | changeBg:WebGAL_New_Enter_Image.png; 15 | ; 如果填写 none 或者不填，则此句表示背景退场。 16 | changeBg:none; 17 | ``` 18 | 19 | 如果背景图片的路径与 `id` 保持不变，则不会触发入场或退场动画。 20 | 21 | ## 参数 22 | 23 | 24 | ```webgal 25 | changeBg:bg.png -transform={"position":{"x":-50,"y":-20},"rotation":0.1,"scale":{"x":1.2,"y":1.2},"brightness":0.5,"blur":10}; 26 | ``` 27 | 28 | 29 | ```webgal 30 | changeBg:bg.png -enter=enter-from-left; 31 | ``` 32 | 33 | 34 | ```webgal 35 | changeBg:bg.png -exit=exit-to-right; 36 | ``` 37 | 38 | 39 | 作用于默认入场退场动画，默认值为 1000。 40 | ```webgal 41 | changeBg:bg.png -duration=200; 42 | ``` 43 | 44 | 45 | 作用于默认入场退场动画。 46 | ```webgal 47 | changeBg:bg.png -ease=easeOut; 48 | ``` 49 | 50 | ### unlockname 51 | 52 | ```webgal 53 | changeBg:bg.png -unlockname=MyCg01; 54 | ``` 55 | 56 | ### series 57 | 58 | 单独填写 `series` 不会进行收录，请确保同时填写了 `unlockname`。 59 | 60 | ```webgal 61 | changeBg:bg.png -unlockname=MyCg01 -series=MySeries01; 62 | ``` 63 | -------------------------------------------------------------------------------- /src/en/showcase-your-game.md: -------------------------------------------------------------------------------- 1 | # Showcase Your Game 2 | 3 | First, you need to prepare the following information: 4 | 5 | * Game ID: The unique ID of your game, use English, cannot be duplicated with other games 6 | * Game Title 7 | * Developer Name 8 | * Release Date 9 | * Release URL: A link to a publicly accessible page, such as project homepage, store, blog, video, etc. 10 | * Game Cover: 616 pixels in width, 353 pixels in height 11 | 12 | ## Submit Your Game via Pull Requests 13 | 14 | Fork the [WebGAL_HomePage](https://github.com/OpenWebGAL/WebGAL_HomePage) repository. 15 | 16 | Add your prepared cover to `/public/images/games`. 17 | 18 | Open the file `/data/games.ts`, find `games`, add the following template at the end: 19 | 20 | ``` typescript 21 | { 22 | id: 'Game ID', 23 | title: 'Game Title', 24 | developer: 'Developer Name', 25 | releaseDate: 'xxxx-xx-xx', 26 | url: 'https://example.com/', 27 | cover: 'Game Cover File Name.webp', 28 | }, 29 | ``` 30 | 31 | After confirming that there are no errors, initiate a pull request. 32 | 33 | ## Submit Your Game via Issues 34 | 35 | Open the [Issues page](https://github.com/OpenWebGAL/WebGAL_HomePage/issues) of the WebGAL_HomePage repository. 36 | 37 | Click `New issue`, fill in the prepared information, and click `Submit new issue` after confirming that there are no errors. 38 | 39 | ## Submit Your Game via Other Channels 40 | 41 | After preparing the required information, you can submit your game by contacting us via the discussion community or email. -------------------------------------------------------------------------------- /src/webgal-script/audio.md: -------------------------------------------------------------------------------- 1 | # 音频 2 | 3 | ## 播放背景音乐（BGM） 4 | 5 | 播放背景音乐的方法极其简单，你只需要将背景音乐放置在 `bgm` 文件夹下，然后使用 `bgm` 指令来播放背景音乐。 6 | 7 | ``` ws 8 | bgm:夏影.mp3; 9 | ``` 10 | 11 | 可以为背景音乐设置一个 `-volume` 参数，来调整它的音量。 12 | 13 | ``` ws 14 | bgm:夏影.mp3 -volume=30; 15 | ``` 16 | 17 | 此外，还可以使用 `-enter` 参数，进行淡入播放。 18 | 19 | ``` ws 20 | bgm:夏影.mp3 -enter=3000; 21 | ``` 22 | 23 | 最后，可以使用以下语句，进行背景音乐的淡出。 24 | 25 | ``` ws 26 | bgm:none -enter=3000; 27 | ``` 28 | 29 | ::: tip 30 | `-volume` 和 `-enter` 都是可选参数。 31 | `-volume` 未使用时，或使用了 0 ~ 100 以外的值时，将使用默认值 100。 32 | `-enter` 未使用时，或使用了 0 ~ 以外的值时，将使用默认值 0。 33 | ::: 34 | 35 | ## 播放语音 36 | 37 | 众所周知，视觉小说 最吸引人的地方往往在于其有优秀的配音。将配音文件放入 `vocal` 文件夹，然后在对话脚本中加入 `-语音文件名` 参数，就可以播放语音了。语法示例如下。 38 | 39 | ``` ws 40 | 比企谷八幡:刚到而已 -V3.ogg; 41 | ``` 42 | 43 | 在连续对话时，语音的引入方式也是一样的。 44 | 45 | ``` ws 46 | 雪之下雪乃:你到得真早 -V1.ogg; 47 | 对不起，等很久了吗？ -V2.ogg; 48 | ``` 49 | 50 | 同时可以设置一个 `-volume` 参数，来调整它的音量。 51 | 52 | ``` ws 53 | 比企谷八幡:刚到而已 -V3.ogg -volume=30; 54 | ``` 55 | 56 | ::: tip 57 | `-volume` 是可选参数。 58 | `-volume` 未设置时，或使用了 0 ~ 100 以外的值时，将使用默认值 100。 59 | ::: 60 | 61 | ## 播放效果音 62 | 63 | 将你的配音放入 `vocal` 文件夹之后，再使用 `playEffect` 指令就可以播放效果音了^_^ 64 | 65 | ``` ws 66 | playEffect:xxx.mp3; 67 | ``` 68 | 69 | 可以为效果音设置一个 `-volume` 参数，来调整它的音量。 70 | 71 | ``` ws 72 | playEffect:xxx.mp3 -volume=30; 73 | ``` 74 | 75 | ::: tip 76 | `-volume` 是可选参数。 77 | `-volume` 未设置时，或使用了 0 ~ 100 以外的值时，将使用默认值 100。 78 | ::: 79 | 80 | ### 效果音循环 81 | 82 | 为效果音赋予一个 `id` 将会自动启用效果音循环，后续使用相同的 `id` 来停止。 83 | 84 | ``` ws 85 | playEffect:xxx.mp3 -id=xxx; 86 | playEffect:none -id=xxx; // 停止这个循环的效果音 87 | ``` 88 | 89 | ## 解锁音频以供鉴赏 90 | 91 | 使用 `unlockBgm` 解锁音频鉴赏中的音频。 92 | 93 | ``` ws 94 | ; // 解锁bgm并赋予名称 95 | unlockBgm:s_Title.mp3 -name=Smiling-Swinging!!!; 96 | ``` 97 | -------------------------------------------------------------------------------- /src/en/live2D.md: -------------------------------------------------------------------------------- 1 | # About Live2D 2 | This engine now supports the use of Live2D models. If you want to use Live2D models, please follow these steps: 3 | 4 | :::info 5 | Note: Some of the following steps are based on the WebGAL source code, which you can find on GitHub. 6 | 7 | [WebGAL Source Code](https://github.com/OpenWebGAL/WebGAL) 8 | 9 | For information on how to build WebGAL from source, please refer to [WebGAL Build](developers) 10 | ::: 11 | 12 | 1. Obtain a Live2D license yourself. 13 | 14 | 2. Go to https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js and https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js to download Live2D and cubismcore respectively. 15 | 16 | 3. Rename them to `live2d.min.js` and `live2dcubismcore.min.js` respectively, and then put the files in **one of the specified directories**. 17 | 18 | - Custom engine directory: `[WebGal]/assets/templates/Derivative_Engine/[Your custom engine]/lib` 19 | - Game directory (applies to a single project): `[WebGal]/public/games/[Your game]/lib` 20 | - WebGal source code directory: `[WebGal source code]/packages/webgal/public/lib` 21 | 22 | 4. Now you can start using Live2D as a figure. You need to put the entire model directory into the `game/figure` directory. The way to call the figure is to call the figure's json file. 23 | 24 | **Note: The author of this project does not use any source code or models of the Live2D SDK. Any copyright disputes arising from the use of Live2D are the sole responsibility of the secondary developer or creator!** 25 | 26 | ## Switching Motions and Expressions 27 | 28 | You can use the `-motion=motionName` or `-expression=expressionName` parameters to switch expressions, such as: 29 | 30 | ``` 31 | changeFigure:xxx.json -motion=angry -expression=angry01; 32 | ``` 33 | -------------------------------------------------------------------------------- /src/en/README.md: -------------------------------------------------------------------------------- 1 | # WebGAL Documentation 2 | 3 | ## Some Information about WebGAL 4 | 5 | - [I want to know the latest news or give feedback](info) 6 | 7 | - [I want to contribute to the engine development or learn how to develop WebGAL from source](developers) 8 | 9 | - [I want to learn how to customize, develop, or contribute to the WebGAL Terre editor](developers/terre) 10 | 11 | - [How to use custom engine developed by yourself or others in the editor](derivative) 12 | 13 | - [I want to learn about the technical implementation of WebGAL engine](tech) 14 | 15 | - [I want to sponsor WebGAL](sponsor) 16 | 17 | - [I want to join the WebGAL team!](developers/joinus) 18 | 19 | ## Game Development Guide 20 | 21 | - [How to start making a WebGAL?](getting-started.md) 22 | 23 | - [Managing Game Resources](resources.md) 24 | 25 | - [Editing Game Configuration](config.md) 26 | 27 | - [How to deploy or publish my visual novel?](publish) 28 | 29 | - [Possible Problems and Solutions](faq.md) 30 | 31 | - [Migrating Game Files After Editor Update](migration.md) 32 | 33 | - [How to add Live2D support](live2d.md) 34 | 35 | - [How to add Spine support](spine.md) 36 | 37 | 38 | ## WebGAL Script Tutorial 39 | 40 | - [The Basics](webgal-script/base.md) 41 | 42 | - [Dialogues](webgal-script/dialogue.md) 43 | 44 | - [Backgrounds and Figures](webgal-script/bg-and-figure.md) 45 | 46 | - [Audio](webgal-script/audio.md) 47 | 48 | - [Video](webgal-script/video.md) 49 | 50 | - [Scenes and Branches](webgal-script/scenes.md) 51 | 52 | - [Variables](webgal-script/variable.md) 53 | 54 | - [Animation Effects](webgal-script/animation.md) 55 | 56 | - [Special Effects](webgal-script/special-effect.md) 57 | 58 | ## Stargazers over time 59 | 60 | [![Stargazers over time](https://starchart.cc/OpenWebGAL/WebGAL.svg)](https://starchart.cc/OpenWebGAL/WebGAL) -------------------------------------------------------------------------------- /src/script-reference/commands/global.md: -------------------------------------------------------------------------------- 1 | # (global) 2 | 3 | global 并非一个命令。此页面介绍的是所有命令均可使用的通用参数。 4 | 5 | ## 参数 6 | 7 | ### next 8 | - 布尔值 9 | 10 | 当值为 `true` 时，在执行当前语句的同时，同步执行接下来的语句，直至找到 `next` 为 `false` 的语句为止。 11 | 12 | ```webgal 13 | label:loop; 14 | ; 15 | changeBg:bg.png -next; 16 | changeFigure:1/open_eyes.png -next -id=aaa; 17 | 角色名:背景，角色与这段话同时出现; 18 | ; 19 | changeBg:none -next; 20 | changeFigure:none -next -id=aaa; 21 | 角色名:背景，角色同时退场; 22 | ; 23 | jumpLabel:loop; 24 | ``` 25 | 26 | 部分命令自带 `next` 参数，如 27 | - bgm 28 | - pixiPerform 29 | - pixiInit 30 | - miniAvatar 31 | - label 32 | - setVar 33 | - unlockCg 34 | - unlockBgm 35 | - filmMode 36 | - playEffect 37 | - setTransition 38 | - applyStyle 39 | 40 | 部分命令与 `next` 参数不兼容，例如在 `wait` 命令加 `next` 参数, 等待不会生效。 41 | 42 | ### when 43 | - 字符串 44 | 45 | 书写条件表达式，仅当条件为 `true` 时，执行当前语句。 46 | 47 | ```webgal 48 | label:start; 49 | ; 50 | setVar:coin=10; 51 | 角色名:我现在有 {coin} 块钱。 52 | ; 53 | label:buy; 54 | ; 55 | setVar:coin=coin-3 -when=coin>=3; 56 | 角色名:花 3 块钱买汽水，剩下 {coin} 块。 57 | ; 58 | 角色名:没钱买 3 块钱的汽水了，只剩下 {coin} 块。 -when=coin<3; 59 | jumpLabel:start -when=coin<3; 60 | ; 61 | jumpLabel:buy; 62 | ``` 63 | 64 | ### continue 65 | - 布尔值 66 | 67 | 在这一句的演出结束后，自动执行下一句，即使玩家未开启自动播放。 68 | 69 | ```webgal 70 | changeBg:bg.png -next; 71 | changeFigure:1/open_eyes.png -transform={"position":{"x":-500}} -id=aaa -next; 72 | changeFigure:2/open_eyes.png -transform={"position":{"x":500}} -id=bbb; 73 | ; 74 | label:loop; 75 | ; 76 | setTransform:{"position":{"x":500}} -target=aaa -continue; 77 | setTransform:{"position":{"x":-500}} -target=bbb -continue; 78 | setTransform:{"position":{"x":-500}} -target=aaa -continue; 79 | setTransform:{"position":{"x":500}} -target=bbb -continue; 80 | ; 81 | jumpLabel:loop; 82 | ``` 83 | 84 | 部分命令自带 `continue` 参数，如 85 | - wait 86 | - intro (`hold` 与 `userForward` 均为 `false` 时) 87 | - playVideo 88 | -------------------------------------------------------------------------------- /src/getting-started.md: -------------------------------------------------------------------------------- 1 | # 如何开始制作 WebGAL？ 2 | 3 | ::: warning 4 | 无论你使用何种方式制作 WebGAL 游戏，你都应该花一点时间将开发指引的全部内容阅读一遍。这不需要多长时间，并且将有利于你避开一些因操作不当导致的问题。 5 | 6 | 你知道吗，大多数你感到疑惑的问题都可以在文档中找到答案。如果你坚信你遇到了 Bug，请在 [issues](https://github.com/OpenWebGAL/WebGAL/issues) 提出问题或者发送电子邮件联系 ，你也可以在网站的右上角的“更多”一栏找到加入 WebGAL 讨论社区的方法。 7 | ::: 8 | 9 | ::: danger 10 | 请使用现代浏览器 (Chrome / Firefox / Edge) 打开 WebGAL 和编辑器。使用其他浏览器所可能产生的问题，将不会得到解决。 11 | ::: 12 | 13 | ## 方法1：使用 WebGAL Terre 可视化编辑器（推荐） 14 | 15 | **WebGAL Terre 可视化编辑器是创建、制作并发布一个 WebGAL 的最佳方式。** 16 | 17 | 在下载 WebGAL Terre 可视化编辑器后，请解压压缩包并启动 WebGAL_Terre 可执行文件。WebGAL Terre 将会自动打开默认浏览器，如果没有打开，请输入 [http://localhost:3001/](http://localhost:3001/) 打开编辑器。 18 | 19 | 下载 WebGAL Terre 可视化编辑器： 20 | 21 | [WebGAL 主页（推荐）](https://openwebgal.com/zh-cn/download/) 22 | 23 | [GitHub Releases](https://github.com/OpenWebGAL/WebGAL_Terre/releases) 24 | 25 | ::: tip 26 | WebGAL Terre 可视化编辑器默认 **不支持 Windows 7**。 27 | Windows 7 用户请参考 **[Windows 7 使用可视化编辑器开始制作的方法](./win7)**。 28 | ::: 29 | 30 | ## 方法2：从源代码开始调试（适用于想要更高自定义程度的制作者） 31 | 32 | ``` shell 33 | git clone https://github.com/OpenWebGAL/WebGAL.git 34 | ``` 35 | 36 | 安装并使用 yarn 安装依赖 37 | 38 | ``` shell 39 | npm install yarn -g 40 | yarn 41 | ``` 42 | 43 | WebGAL 使用 vite 作为打包与调试工具，你可以通过运行以下脚本启动开发服务器 44 | 45 | ``` shell 46 | yarn dev 47 | ``` 48 | 49 | 推荐使用 VS Code 进行开发，并使用插件来实现语法高亮： 50 | 51 | [语法高亮插件的商店地址](https://marketplace.visualstudio.com/items?itemName=c6h5-no2.webgal-script-basics) 52 | 53 | [语法高亮插件的源代码仓库](https://github.com/C6H5-NO2/webgal-script-basics) 54 | 55 | 如果你要打包，请使用 56 | 57 | ``` shell 58 | yarn build 59 | ``` 60 | 61 | 打包产物在 packages/webgal/dist 目录下 62 | 63 | ::: tip 64 | 在你完成自定义后，如果你想要使用 WebGAL 编辑器来方便地实时预览和进行资源管理，你可以将打包后的产物复制粘贴并替换掉编辑器目录下的 `packages/terre2/assets/templates/WebGAL_Template`，这样你可以将 WebGAL 编辑器内置的引擎换成自己定制过的。如果你的 WebGAL 仓库 和 WebGAL_Terre 仓库在同一目录下，你可以使用 `release-to-terre` 快捷脚本来执行 65 | ::: 66 | -------------------------------------------------------------------------------- /src/script-reference/commands/setTempAnimation.md: -------------------------------------------------------------------------------- 1 | # setTempAnimation 2 | 3 | 设置临时动画。 4 | 5 | ## 语句内容 6 | 7 | 与 `setAnimation` 读取动画文件不同，`setTempAnimation` 允许用户直接在代码里定义多段动画，详见[动画参考](../others/animation-reference.md)。 8 | 语句内容格式为动画文件的单行形式，即 `[{},{},{}]` 。 9 | 10 | :::info 11 | 如果您想复用动画，请使用 [setAnimation](setAnimation.md) 命令。 12 | 如果您只想设置单段动画，请使用 [setTransform](setTransform.md) 命令。 13 | ::: 14 | 15 | ```webgal 16 | changeFigure:1/open_eyes.png -id=aaa; 17 | ; 闪光弹动画 18 | setTempAnimation:[{"duration":0},{"brightness":2,"contrast":0,"duration":200,"ease":"circIn"},{"brightness":1,"contrast":1,"duration":200},{"brightness":2,"contrast":0,"duration":200,"ease":"circIn"},{"brightness":1,"contrast":1,"duration":2500}] -target=aaa; 19 | ``` 20 | 21 | ## 参数 22 | 23 | 24 | ```webgal 25 | changeFigure:1/open_eyes.png -id=aaa; 26 | setTempAnimation:[{"duration":0},{"brightness":2,"contrast":0,"duration":200,"ease":"circIn"},{"brightness":1,"contrast":1,"duration":200},{"brightness":2,"contrast":0,"duration":200,"ease":"circIn"},{"brightness":1,"contrast":1,"duration":2500}] -target=aaa; 27 | ``` 28 | 29 | 30 | ```webgal 31 | changeFigure:1/open_eyes.png -id=aaa; 32 | setTempAnimation:[{"duration":0},{"brightness":2,"contrast":0,"duration":200,"ease":"circIn"},{"brightness":1,"contrast":1,"duration":200},{"brightness":2,"contrast":0,"duration":200,"ease":"circIn"},{"brightness":1,"contrast":1,"duration":2500}] -target=aaa -writeDefault; 33 | ``` 34 | 35 | 36 | ```webgal 37 | changeFigure:1/open_eyes.png -id=aaa; 38 | setTempAnimation:[{"duration":0},{"scale":{"x":2,"y":2},"duration":10000}] -target=aaa -keep -next; 39 | 角色A: 第一句话; 40 | 角色A: 第二句话; 41 | 角色A: 第三句话; 42 | ; 这会打断 aaa 的跨语句动画，并播放新动画 43 | setTempAnimation:[{"duration":0},{"scale":{"x":1,"y":1},"duration":10000}] -target=aaa -keep -next; 44 | ``` 45 | -------------------------------------------------------------------------------- /src/ja/webgal-script/audio.md: -------------------------------------------------------------------------------- 1 | # 音声 2 | 3 | ## BGM（バックグラウンドミュージック）を再生する 4 | 5 | BGMを再生する方法はとても簡単で、BGMを`bgm`フォルダに配置して、`bgm`命令を使ってBGMを再生するだけです。 6 | 7 | ``` ws 8 | bgm:夏影.mp3; 9 | ``` 10 | 11 | BGMには`-volume`パラメータを設定して、音量を調整することができます。 12 | 13 | ``` ws 14 | bgm:夏影.mp3 -volume=30; 15 | ``` 16 | 17 | また、`-enter`パラメータを使って、フェードイン再生することができます。 18 | 19 | ``` ws 20 | bgm:夏影.mp3 -enter=3000; 21 | ``` 22 | 23 | 最後に、以下の文を使って、BGMをフェードアウトすることができます。 24 | 25 | ``` ws 26 | bgm:none -enter=3000; 27 | ``` 28 | 29 | ::: tip 30 | `-volume`と`-enter`はどちらもオプションのパラメータです。 31 | `-volume`を使用しない場合、または0〜100以外の値を使用した場合は、デフォルト値100が使用されます。 32 | `-enter`を使用しない場合、または0〜以外の値を使用した場合は、デフォルト値0が使用されます。 33 | ::: 34 | 35 | ## 音声を再生する 36 | 37 | ご存知の通り、ビジュアルノベルは優れた声優陣が演じることで、最も魅力的なものになります。音声ファイルを`vocal`フォルダに入れて、会話スクリプトに`-音声ファイル名`パラメータを追加すると、音声を再生することができます。構文の例を以下に示します。 38 | 39 | ``` ws 40 | 比企谷八幡:今来たばかりだ -V3.ogg; 41 | ``` 42 | 43 | 連続会話の場合も、音声の導入方法は同じです。 44 | 45 | ``` ws 46 | 雪ノ下雪乃:随分早いですね -V1.ogg; 47 | 待たせちゃった？ -V2.ogg; 48 | ``` 49 | 50 | 同時に`-volume`パラメータを設定して、音量を調整することができます。 51 | 52 | ``` ws 53 | 比企谷八幡:今来たばかりだ -V3.ogg -volume=30; 54 | ``` 55 | 56 | ::: tip 57 | `-volume`はオプションのパラメータです。 58 | `-volume`を設定しない場合、または0〜100以外の値を使用した場合は、デフォルト値100が使用されます。 59 | ::: 60 | 61 | ## 効果音を再生する 62 | 63 | 音声ファイルを`vocal`フォルダに入れた後、`playEffect`命令を使って効果音を再生することができます^_^ 64 | 65 | ``` ws 66 | playEffect:xxx.mp3; 67 | ``` 68 | 69 | 効果音には`-volume`パラメータを設定して、音量を調整することができます。 70 | 71 | ``` ws 72 | playEffect:xxx.mp3 -volume=30; 73 | ``` 74 | 75 | ::: tip 76 | `-volume`はオプションのパラメータです。 77 | `-volume`を設定しない場合、または0〜100以外の値を使用した場合は、デフォルト値100が使用されます。 78 | ::: 79 | 80 | ### 効果音のループ再生 81 | 82 | 効果音に`id`を付与すると、自動的に効果音のループ再生が有効になり、同じ`id`を使用して停止することができます。 83 | 84 | ``` ws 85 | playEffect:xxx.mp3 -id=xxx; 86 | playEffect:none -id=xxx; // このループ効果音を停止する 87 | ``` 88 | 89 | ## 音声をアンロックして鑑賞できるようにする 90 | 91 | `unlockBgm`を使って、鑑賞できる音声のロックを解除します。 92 | 93 | ``` ws 94 | ; // bgmのロックを解除して名前を付ける 95 | unlockBgm:s_Title.mp3 -name=Smiling-Swinging!!!; 96 | ``` -------------------------------------------------------------------------------- /src/webgal-script/special-effect.md: -------------------------------------------------------------------------------- 1 | # 特效 2 | 3 | 目前，WebGAL 的特效系统由 PixiJS 实现。 4 | 5 | ## 使用特效 6 | 7 | ### 初始化 Pixi 8 | 9 | 使用 `pixiInit` 初始化 Pixi。 10 | 11 | ``` ws 12 | pixiInit; 13 | ``` 14 | 15 | ::: warning 16 | 如果你要使用特效，那么你必须先运行这个命令来初始化 Pixi。 17 | 18 | 如果你想要消除已经作用的效果，你可以使用这个语法来清空效果。 19 | ::: 20 | 21 | ### 添加特效 22 | 23 | 使用 `pixiPerform` 添加特效。 24 | 25 | ``` ws 26 | pixiPerform:rain; // 添加一个下雨的特效 27 | ``` 28 | 29 | 注意：特效作用后，如果没有重新初始化，特效会一直运行。 30 | 31 | ### 预制特效列表 32 | 33 | | 效果 | 指令 | 34 | | :--- | :-------------------------- | 35 | | 雨 | pixiPerform:rain; | 36 | | 雪 | pixiPerform:snow; | 37 | | 大雪 | pixiPerform:heavySnow; | 38 | | 樱花 | pixiPerform:cherryBlossoms; | 39 | 40 | ### 叠加特效 41 | 42 | 如果你想要叠加两种及以上效果，你可以在不使用 `pixiInit` 指令的情况下叠加不同的效果。 43 | 44 | ``` ws 45 | pixiPerform:rain; 46 | pixiPerform:snow; 47 | ``` 48 | 49 | ### 清除已叠加的特效 50 | 51 | 使用 `pixiInit` 来初始化，这样可以消除所有已经应用的效果。 52 | 53 | ## 添加自定义特效 54 | 55 | 你可以下载源代码，然后找到 `/Core/gameScripts/pixiPerformScripts/` 然后新建一个 `PIXI.Container` 用于制作你所需要的特效。 56 | 57 | 特效层分为前景层和背景层，这里以前景层为例。 58 | 59 | ``` ts 60 | // 获取当前的 Pixi 效果 Container 61 | const effectsContainer = WebGAL.gameplay.pixiStage!.foregroundEffectsContainer!; 62 | // 调用 Pixi App 的方式，对确定屏幕尺寸等可能有用 63 | const app = WebGAL.gameplay.pixiStage!.currentApp!; 64 | // 创建自定义特效的container 65 | const container = new PIXI.Container(); 66 | // 添加特效 67 | effectsContainer.addChild(container); 68 | ``` 69 | 70 | 纹理文件可以放在 `game/tex` 目录下。 71 | 72 | 然后，在 文件开头导入 `特效注册方法` 注册你写的新特效。 73 | 74 | 在文件末尾使用其注册你的特效, 第一个参数是特效名, 第二个是调用特效的方法. 75 | 76 | ``` ts 77 | import {registerPerform} from '../pixiPerformManager'; 78 | 79 | // 假设这是你的特效 80 | function myPerform() { 81 | // ... 82 | } 83 | 84 | // 注册 85 | registerPerform('myPerform', { fg: () => myPerform(参数) }); 86 | ``` 87 | 88 | 最后，编译出支持你自定义特效的 WebGAL 89 | 90 | ``` shell 91 | yarn run build; 92 | ``` 93 | 94 | 这样，你就可以在脚本中调用你的特效了 95 | 96 | ``` ws 97 | pixiPerform:myPerform; 98 | ``` 99 | -------------------------------------------------------------------------------- /src/script-reference/commands/intro.md: -------------------------------------------------------------------------------- 1 | # intro 2 | 3 | 全屏文字命令。 4 | 5 | ## 语句内容 6 | 7 | 输入一段文字，这段文字会以全屏文字的形式显示在屏幕上。可以使用 `|` 来分割多行文字。 8 | 详情请见[黑屏文字](../../webgal-script/dialogue.md#黑屏文字)。 9 | 10 | ```webgal 11 | intro:这是第一行文字|这是第二行文字|这是第三行文字; 12 | ``` 13 | 14 | ## 参数 15 | 16 | ### fontSize 17 | - 字符串 18 | 19 | 设置字体大小，可用值有: 20 | - `small` - 小号字体 21 | - `medium` - 中号字体 22 | - `large` - 大号字体 23 | 24 | ```webgal 25 | intro:这是一段话 -fontSize=large; 26 | ``` 27 | 28 | ### fontColor 29 | - 字符串 30 | - 默认值: `rgba(0, 0, 0, 1)` 31 | 32 | 设置字体颜色，格式如 `rgba(0,0,0,1)`，表示黑色，`rgba(255,255,255,1)` 表示白色。透明度范围为 0 到 1。 33 | 34 | ```webgal 35 | intro:这是一段话 -fontColor=rgba(48, 135, 206, 1); 36 | ``` 37 | 38 | ### backgroundColor 39 | - 字符串 40 | - 默认值: `rgba(0, 0, 0, 1)` 41 | 42 | 设置背景颜色，格式如 `rgba(0,0,0,1)`，表示黑色，`rgba(255,255,255,1)` 表示白色。透明度范围为 0 到 1。 43 | 44 | ```webgal 45 | intro:这是一段话 -backgroundColor=rgba(22,22,22,0.8); 46 | ``` 47 | 48 | ### backgroundImage 49 | - 字符串 50 | 51 | 填写背景图像的路径，将其作为全屏文字的背景图像。若未设置此参数，则使用 `backgroundColor`。 52 | 53 | ```webgal 54 | intro:这是一段话 -backgroundImage=bg.png; 55 | ``` 56 | 57 | ### animation 58 | - 字符串 59 | 60 | 设置全屏文字的显示方式，支持以下几种动画效果： 61 | - `fadeIn`：透明度淡入，默认值 62 | - `slideIn`：滑入 63 | - `typingEffect`：打字机效果 64 | - `pixelateEffect`：模糊 65 | - `revealAnimation`：卷轴展开 66 | 67 | ```webgal 68 | intro:这是第一行文字|这是第二行文字|这是第三行文字 -animation=slideIn; 69 | ``` 70 | 71 | ### delay 72 | - 数字 73 | - 单位：毫秒 74 | 75 | 设置每行文字的显示延迟时间。 76 | 77 | ```webgal 78 | intro:这是第一行文字|这是第二行文字|这是第三行文字 -delay=1000; 79 | ``` 80 | 81 | ### hold 82 | - 布尔值 83 | 84 | 当值为 `true` 时，所有文字显示完毕后，不会自动执行下一句，直到玩家点击屏幕。 85 | 当值为 `false` 时，所有文字显示完毕后，自动执行下一句，即使玩家未开启自动播放。 86 | 87 | ```webgal 88 | intro:这是一段话 -hold; 89 | ``` 90 | 91 | ### useForward 92 | - 布尔值 93 | 94 | 当值为 `true` 时，需要用户手动点击屏幕，才会显示下一行文字，并设置 `hold` 为 `true`。 95 | 当值为 `false` 时，自动显示下一行文字。 96 | 97 | ```webgal 98 | intro:这是一段话 -useForward; 99 | ``` 100 | -------------------------------------------------------------------------------- /src/ja/getting-started.md: -------------------------------------------------------------------------------- 1 | # WebGAL を始めるには？ 2 | 3 | ::: warning 4 | WebGALゲームを作る方法に関係なく、開発ガイドのすべてを一度読んでおくべきです。そう長くはかかりませんし、操作ミスによる問題を避けるのに役立ちます。 5 | 6 | ご存知ですか？疑問に思うことのほとんどはドキュメントで答えが見つかります。バグに遭遇したと確信する場合は、[issues](https://github.com/OpenWebGAL/WebGAL/issues)で問題を報告するか、にメールを送信してください。また、WebGALディスカッションコミュニティに参加する方法については、Webサイトの右上にある「その他」セクションを参照してください。 7 | ::: 8 | 9 | ::: danger 10 | WebGALとエディターを開くには、最新のブラウザ（Chrome / Firefox / Edge）を使用してください。他のブラウザで発生する可能性のある問題は解決されません。 11 | ::: 12 | 13 | ## 方法1：WebGAL Terreビジュアルエディターを使用する（推奨） 14 | 15 | **WebGAL Terreビジュアルエディターは、WebGALを作成、制作、公開するための最良の方法です。** 16 | 17 | WebGAL Terreビジュアルエディターをダウンロードしたら、圧縮ファイルを解凍してWebGAL_Terre実行ファイルを開始してください。WebGAL Terreはデフォルトのブラウザを自動的に開きます。開かない場合は、[http://localhost:3001/](http://localhost:3001/)を入力してエディターを開きます。 18 | 19 | WebGAL Terreビジュアルエディターをダウンロードする： 20 | 21 | [WebGALホームページ（推奨）](https://openwebgal.com/zh-cn/download/) 22 | 23 | [GitHubリリース](https://github.com/OpenWebGAL/WebGAL_Terre/releases) 24 | 25 | ::: tip 26 | WebGAL Terreビジュアルエディターはデフォルトで**Windows 7をサポートしません**。 27 | Windows 7ユーザーは**[Windows 7でビジュアルエディターを使用して制作を開始する方法](./win7)**を参照してください。 28 | ::: 29 | 30 | ## 方法2：ソースコードからデバッグを開始する（より高いカスタマイズの程度を望む制作者向け） 31 | 32 | ``` shell 33 | git clone https://github.com/OpenWebGAL/WebGAL.git 34 | ``` 35 | 36 | yarnをインストールして依存関係をインストールします 37 | 38 | ``` shell 39 | npm install yarn -g 40 | yarn 41 | ``` 42 | 43 | WebGALはviteをバンドルとデバッグのツールとして使用しています。以下のスクリプトを実行して開発サーバーを起動することができます。 44 | 45 | ``` shell 46 | yarn dev 47 | ``` 48 | 49 | 開発にはVS Codeの使用と、構文のハイライトを実現するためのプラグインの使用をお勧めします： 50 | 51 | [構文ハイライトプラグインのストアアドレス](https://marketplace.visualstudio.com/items?itemName=c6h5-no2.webgal-script-basics) 52 | 53 | [構文ハイライトプラグインのソースコードリポジトリ](https://github.com/C6H5-NO2/webgal-script-basics) 54 | 55 | バンドルする場合は、以下を使用してください。 56 | 57 | ``` shell 58 | yarn build 59 | ``` 60 | 61 | バンドルされた製品はpackages/webgal/distディレクトリにあります。 62 | 63 | ::: tip 64 | カスタマイズが完了したら、WebGALエディターを使用してリアルタイムでプレビューしたりリソースを管理したりできるように、バンドルされた製品をコピーして貼り付け、エディターディレクトリ内の`packages/terre2/assets/templates/WebGAL_Template`を置き換えることができます。これにより、WebGALエディターに組み込まれているエンジンを独自のカスタマイズしたものに変更することができます。WebGALリポジトリとWebGAL_Terreリポジトリが同じディレクトリにある場合、`release-to-terre`ショートカットスクリプトを使用して実行することができます。 65 | ::: -------------------------------------------------------------------------------- /src/developers/readme.md: -------------------------------------------------------------------------------- 1 | # 定制开发与参与贡献 2 | 3 | ## WebGAL 源代码仓库的地址 4 | 5 | [https://github.com/OpenWebGAL/WebGAL](https://github.com/OpenWebGAL/WebGAL) 6 | 7 | ## 分支说明 8 | 9 | ``` 10 | main: 稳定版 11 | dev: WebGAL 开发版 12 | 其他分支: 旧版本的留档 13 | ``` 14 | 15 | ## 更新计划 16 | 17 | 参见 [WebGAL 情报](/info) 18 | 19 | ## 贡献者指引 20 | 21 | 如果你想要参与的是 WebGAL Terre 可视化编辑器的贡献，请参考 [WebGAL Terre 贡献者指南](terre) 22 | 23 | ### 参与贡献的要求 24 | 25 | 为了帮助我们更好地理解和审核您的贡献，请您注意以下几点： 26 | 27 | **提交 Pull Request 前的准备工作**： 28 | 29 | *先提交 Issue*： **在开始任何开发工作前，请先提交一个 Issue 来讨论您的想法和设计方案**。这有助于避免重复工作，确保您的贡献符合项目的方向，并避免 PR 因设计问题无法合并的情况。 30 | 31 | *RFC（Request for Comments）*： 对于大型改动或新功能，建议先提交 RFC 或详细的设计提案，与维护者和社区成员讨论技术方案的可行性。 32 | 33 | **代码质量要求**： 34 | 35 | *代码注释*： 为了方便我们理解您的代码思路，建议您在关键部分添加注释说明。 36 | 37 | *功能测试*： 如果您添加或修改了功能，请提供相应的测试方法，以确保功能正常运行。如果您进行了代码重构，也请提供测试方法来覆盖受影响的范围，确保重构没有引入新的问题。 38 | 39 | *清晰的说明*： 在提交 Pull Request 时，请简要说明您所做的改动以及背后的原因，并引用相关的 Issue，这将有助于我们更快地理解您的贡献。 40 | 41 | ### 在本地启动 WebGAL 项目 42 | 43 | WebGAL 目前使用 yarn 作为包管理器，以及 yarn workspace monorepo 管理器。 44 | 45 | 如果你没有 yarn ，请输入以下指令安装 46 | 47 | ```shell 48 | npm install yarn -g 49 | ``` 50 | 51 | 然后在项目根目录执行 52 | 53 | ```shell 54 | yarn 55 | ``` 56 | 以安装依赖。 57 | 58 | 本项目有3个 package，分别对应不同的功能： 59 | 60 | | 包名 | 内容 | 61 | | ------ | -------------------------- | 62 | | parser | WebGAL 解析器 | 63 | | server | WebGAL 本地调试服务器 | 64 | | webgal | 引擎本体 | 65 | | yukimi | 正在计划中的 yukimi 支持库 | 66 | 67 | ## 在本地启动 WebGAL 引擎项目 68 | 69 | 你可以通过运行以下脚本启动开发服务器 70 | 71 | ```shell 72 | yarn dev 73 | ``` 74 | 75 | 如果你想要构建 WebGAL，请使用 76 | 77 | ```shell 78 | yarn build 79 | ``` 80 | 81 | 打包产物在 `packages/webgal/dist` 目录下。 82 | 83 | ## 关于 WebGAL 的技术 84 | 85 | WebGAL 是一个已经有一定规模的项目，直接钻进代码中可能会令人感到一时间难以适应。因此，在这里有一份关于 WebGAL 技术的参考文档，帮助你理解 WebGAL 。 86 | 87 | [WebGAL 技术介绍](/tech) 88 | 89 | 除此以外，在源代码的一些关键目录，我们也会提供一些说明文档来解释这个模块的原理。这些信息将以中文提供。如今，大语言模型在翻译上的表现已经足够好，所以如果你无法阅读中文，也不必担心。你可以尝试使用大语言模型将其翻译为你的语言。 90 | 91 | ## 将构建后的 WebGAL 导入 WebGAL Terre 编辑器 92 | 93 | ::: tip 94 | 在你完成自定义后，如果你想要使用 WebGAL 编辑器来方便地实时预览和进行资源管理，你可以将打包后的产物复制粘贴并替换掉编辑器目录下的 `packages/terre2/assets/templates/WebGAL_Template`，这样你可以将 WebGAL 编辑器内置的引擎换成自己定制过的。如果你的 WebGAL 仓库 和 WebGAL_Terre 仓库在同一目录下，你可以使用 `release-to-terre` 快捷脚本来执行 95 | ::: 96 | -------------------------------------------------------------------------------- /src/ja/webgal-script/special-effect.md: -------------------------------------------------------------------------------- 1 | # エフェクト 2 | 3 | 現在、WebGAL のエフェクトシステムは PixiJS で実装されています。 4 | 5 | ## エフェクトを使用する 6 | 7 | ### Pixi を初期化する 8 | 9 | `pixiInit` を使用して Pixi を初期化します。 10 | 11 | ``` ws 12 | pixiInit; 13 | ``` 14 | 15 | ::: warning 16 | エフェクトを使用する場合は、このコマンドを最初に実行して Pixi を初期化する必要があります。 17 | 18 | すでに適用されているエフェクトを消去したい場合は、この構文を使用してエフェクトをクリアできます。 19 | ::: 20 | 21 | ### エフェクトを追加する 22 | 23 | `pixiPerform` を使用してエフェクトを追加します。 24 | 25 | ``` ws 26 | pixiPerform:rain; // 雨のエフェクトを追加する 27 | ``` 28 | 29 | 注意：エフェクトを適用した後、再度初期化しないと、エフェクトは常に実行されます。 30 | 31 | ### プリセットエフェクト一覧 32 | 33 | | エフェクト | コマンド | 34 | | :--- | :-------------------------- | 35 | | 雨 | pixiPerform:rain; | 36 | | 雪 | pixiPerform:snow; | 37 | | 大雪 | pixiPerform:heavySnow; | 38 | | 桜 | pixiPerform:cherryBlossoms; | 39 | 40 | ### エフェクトを重ねる 41 | 42 | 2 つ以上エフェクトを重ねたい場合は、`pixiInit` コマンドを使用せずに異なるエフェクトを重ねることができます。 43 | 44 | ``` ws 45 | pixiPerform:rain; 46 | pixiPerform:snow; 47 | ``` 48 | 49 | ### 重ねたエフェクトをクリアする 50 | 51 | `pixiInit` を使用して初期化します。これにより、適用されているすべてエフェクトを消去できます。 52 | 53 | ## カスタムエフェクトを追加する 54 | 55 | ソースコードをダウンロードして `/Core/gameScripts/pixiPerformScripts/` に移動し、必要なエフェクトを作成するために `PIXI.Container` を新規作成します。 56 | 57 | エフェクトコンテナは前景コンテナと背景コンテナに分割され、ここでは前景コンテナを例としています。 58 | 59 | ``` ts 60 | // 現在の Pixi エフェクト Container を取得する 61 | const effectsContainer = WebGAL.gameplay.pixiStage!.foregroundEffectsContainer!; 62 | // Pixi App の呼び出し方法で、画面のサイズなどを決定するのに役立ちます 63 | const app = RUNTIME_GAMEPLAY.pixiStage!.currentApp!; 64 | // カスタムエフェクトのコンテナを作成する 65 | const container = new PIXI.Container(); 66 | // エフェクトを追加する 67 | effectsContainer.addChild(container); 68 | ``` 69 | 70 | テクスチャ ファイルは `game/tex` ディレクトリに配置できます。 71 | 72 | 次に、ファイルの先頭で `エフェクト登録メソッド` をインポートして、新しく記述したエフェクトを登録します。 73 | 74 | ファイルの末尾で登録したエフェクトを使用します。最初のパラメータはエフェクト名、2 番目のパラメータはエフェクトを呼び出すメソッドです。 75 | 76 | ``` ts 77 | import {registerPerform} from '../pixiPerformManager'; 78 | 79 | // これがエフェクトだと仮定します 80 | function myPerform() { 81 | // ... 82 | } 83 | 84 | // 登録する 85 | registerPerform('myPerform', { fg: () => myPerform(パラメータ) }); 86 | ``` 87 | 88 | 最後に、カスタムエフェクトをサポートする WebGAL をコンパイルします。 89 | 90 | ``` shell 91 | yarn run build; 92 | ``` 93 | 94 | これで、スクリプトでエフェクトを呼び出すことができます。 95 | 96 | ``` ws 97 | pixiPerform:myPerform; 98 | ``` -------------------------------------------------------------------------------- /src/en/webgal-script/base.md: -------------------------------------------------------------------------------- 1 | # Basic 2 | 3 | First of all, when the program starts, it will run from the **startup script** `start.txt`. Please do not rename or delete it. 4 | 5 | The following tutorials will teach you how to use WebGAL script. 6 | 7 | ## Comments 8 | 9 | WebGAL script will only parse the content before the semicolon in each line, so the content after the semicolon will be regarded as a comment. 10 | 11 | ``` ws 12 | WebGAL:Hello!; The content after semicolon will be regarded as a comment 13 | ; You can directly input a semicolon, then write a single-line comment 14 | ``` 15 | 16 | ## `none` Keyword 17 | 18 | When setting **resources** such as立ち絵, BGM, backgrounds, you can turn off this object by setting it to `none`. 19 | 20 | ## `-next` Parameter 21 | 22 | You can add the parameter `-next` after any statement. This will cause the next statement to be executed immediately after this statement is executed. This is very useful when you need to perform multiple operations at the same time. 23 | 24 | Example: 25 | 26 | ``` ws 27 | changeBg:testBG03.jpg -next; // Will execute the next statement immediately 28 | ``` 29 | 30 | ## `-notend` and `-concat` Parameters 31 | 32 | Sometimes, you may want to add 演出効果, such as switching expressions, when a certain stage of a dialogue is executed. 33 | At this time, you can use the `-notend` `-concat` parameters to insert any statement in the dialogue. 34 | 35 | `-concat` means that this dialogue is connected after the previous dialogue 36 | 37 | `-notend` means that this dialogue is not over, and there may be 演出 or dialogue connected later. 38 | 39 | An example is given below: This is a demonstration of switching 立ち絵 in the middle of a dialogue. 40 | 41 | ``` ws 42 | WebGAL:Test statement insert 演出！Switch 立ち絵 immediately...... -notend; 43 | changeFigure:k1.png -next; 44 | Switch 立ち絵！Switch expression immediately...... -notend -concat; 45 | changeFigure:k2.png -next; 46 | Switch expression！ -concat; 47 | ``` 48 | 49 | You can also use only the `-concat` parameter to connect the next sentence after the previous dialogue, because the `-notend` parameter will move to the next sentence after the dialogue fades in. 50 | 51 | ```ws 52 | This is the first sentence...; 53 | This sentence will only appear after the user clicks the mouse -concat; 54 | ``` 55 | -------------------------------------------------------------------------------- /src/developers/joinus.md: -------------------------------------------------------------------------------- 1 | # 与我们一起共建 WebGAL 的明天 2 | 3 | WebGAL 是一款运行于网页上的视觉小说/ Galgame 引擎。借助 Web 平台强大的跨平台优势，WebGAL 可以在几乎任何可以运行浏览器的设备上运行。在历经两年多的迭代后，如今的 WebGAL 功能日益丰富，其稳定性亦步步提升。WebGAL 如今已被广泛用于视觉小说类游戏的制作，其易于上手且高效的编辑器，也使得即便是缺乏编程经验的游戏制作者，也能轻松开发出具有个人特色的游戏作品。 4 | 5 | 如今，随着用户群体的不断扩大，我们在不断地接收到新功能的请求和故障报告。现有的人力已经无法支撑起这样的用户量的需求。因此，我们希望有一批有志向于通过打造简单、易用、强大的引擎和制作工具，从而普及这一游戏类型的制作，振兴视觉小说/Galgame 的有能力、有抱负的同好加入我们，与我们一起共建 WebGAL 的明天。 6 | 7 | ## WebGAL 理念 8 | 9 | 给天才好用的工具，他们就能创造出杰作。对于从事剧本写作、绘画或其他艺术专业领域的从业者，软件开发往往并不是他们的强项。但是他们有创造力，有热情创作理想的作品。WebGAL 的理念就是尽可能降低开发门槛，让所有人，无论有没有编程基础，都可以创作出属于自己的游戏。 10 | 11 | ## 特别说明 12 | 13 | WebGAL 是一个开源项目，因此我们招募的实际上是“贡献者”，我们不提供实际的工作岗位。 14 | 15 | ## 联系方式 16 | 17 | 将你想要加入的目标角色和基本个人介绍（请**不要**包含现实生活中的姓名或工作单位等可能定位到您本人的信息）发送邮件到： 18 | 19 | contact@openwebgal.com （WebGAL 公共邮箱，可能回复稍慢）或 20 | 21 | Mahiru_@outlook.com （项目负责人的个人邮箱，回复较快） 或 22 | 23 | 先加入 WebGAL 交流群（QQ群：709293432），和我们的用户互动，你可以在这里了解 WebGAL 当前的活跃情况和用户需求。 24 | 25 | ## 招募需求 26 | 27 | ### Web 前端开发工程师 28 | 29 | #### 目标 30 | 31 | 我们的目标是为 WebGAL 开发更加强大的功能，为 WebGAL 编辑器提供更多的易用性改进，从而促进 WebGAL 生态的繁荣。 32 | 33 | #### 基本要求 34 | 35 | 熟悉 Web 前端开发的工具和流程，并熟悉 React 框架的使用。 36 | 37 | #### 附加要求 38 | 39 | WebGAL 使用 React 构建用户界面，使用 Pixi 构建游戏舞台。所以如果有使用 Pixi 开发 2D 游戏的经验，对我们会是一个很大的帮助。除此以外，创新力和软件工程能力也是对我们来说非常有帮助的能力。我们需要有创新力的人才帮助我们解决前所未有的特殊需求和打造高效且稳定的软件架构。 40 | 41 | WebGAL 引擎内核是一个由状态机驱动的舞台状态模型，我们正在筹备下一代内核。该内核使用状态演算技术，将可以改善实时预览的效率，并可能实现向前跳转的高级功能——这一功能是其他引擎所难以做到的。你可以看我们的 RFC 来了解我们对新内核的构想。[RFC1：WebGAL 5 流程控制和演出调用草案](https://openwebgal.com/zh-cn/blog/rfc1/) 42 | 43 | ### Node 后端开发工程师 44 | 45 | #### 目标 46 | 47 | WebGAL 编辑器的后端是由 Node 驱动的，并使用 NestJS 构建。我们的目标是打造稳定、高性能的跨平台编辑器后端，提供文件系统访问、静态资源部署、代码提示等功能，为编辑器前端提供高质量的服务。 48 | 49 | #### 基本要求 50 | 51 | 熟悉 TypeScript 开发和 Nest 框架，并对使用 Node 开发跨平台后端服务有相关经验。 52 | 53 | #### 附加要求 54 | 55 | 我们使用 Vscode-LanguageServer 提供代码提示。如果你有从事构建 Language Server 的经验，对我们会是一个很大的帮助。 56 | 57 | ### 翻译 58 | 59 | #### 目标 60 | 61 | WebGAL 引擎、编辑器、官方网站现在皆已提供中英日三种语言。但是随着功能的不断快读迭代，英语和日语的翻译已经有些滞后。我们的目标是让这些语言的文档和图形用户界面也可以和中文主版本保持同步。 62 | 63 | #### 基本要求 64 | 具备良好的英语/日语书面表达水平，能提供高质量的翻译文本，为其他语言的用户提供良好的体验。 65 | 66 | 英语基本要求：CET 6 / 雅思 6+ / 托福 80+ 67 | 日语基本要求： N2 68 | 69 | ### 图形用户界面（GUI）设计师 70 | 71 | #### 目标 72 | 73 | WebGAL 致力于打造令人赏心悦目的图形用户界面，以给用户良好的使用体验。由于大部分用户并不会编程，因此引擎的默认 UI 必须足够美观，才能吸引更多的用户。我们的目标是打造美观优雅的引擎和编辑器界面，提高 WebGAL 的产品力。 74 | 75 | #### 基本要求 76 | 77 | 熟练使用 Figma 设计图形用户界面，具备良好的审美水平和一定的 UX（用户体验）设计水平。在和我们联系前，请准备好能体现您专业水平的作品集。 78 | 79 | ### 美术 80 | 81 | #### 目标 82 | 83 | 为在线展示 WebGAL 的功能，以及在 WebGAL 编辑器中提供一些示例的素材，我们需要一些高质量的美术素材，吸引用户使用我们的产品。 84 | 85 | #### 基本要求 86 | 87 | 熟悉二次元绘画，能够创作出符合 WebGAL 要求的二次元人物（看板娘）或二次元风格的背景图片。 88 | 89 | #### 特别说明 90 | 91 | 这些素材会成为 WebGAL 公共素材库的素材，并交付给 WebGAL 的用户免费使用。WebGAL 是一个开源软件，所以这些素材也将一并开源。开源意味着可供我们的用户免费商用和再发布，请您知悉。 -------------------------------------------------------------------------------- /src/script-reference/others/animation-reference.md: -------------------------------------------------------------------------------- 1 | # 动画参考 2 | 3 | WebGAL 支持设置连续的 [变换效果](../others/transform-reference.md) ，从而实现多段动画。 4 | 5 | 一个变换效果对象如 6 | ``` json 7 | { 8 | "position": { 9 | "x":-500, 10 | "y":20 11 | }, 12 | "rotation":0.3, 13 | "blur":10 14 | } 15 | ``` 16 | 17 | 一个动画片段对象则是在变换效果对象的基础上，添加了一些其他属性，如持续时间等 18 | ``` json 19 | { 20 | "position": { 21 | "x":-500, 22 | "y":20 23 | }, 24 | "rotation":0.3, 25 | "blur":10, 26 | "duration":500, 27 | "ease":"easeInOut" 28 | } 29 | ``` 30 | 31 | 多个动画片段对象可以组成一个动画 32 | ``` json 33 | [ 34 | { 35 | "duration":0 36 | }, 37 | { 38 | "position": { 39 | "x":-500, 40 | "y":20 41 | }, 42 | "duration":500 43 | }, 44 | { 45 | "rotation":0.3, 46 | "duration":300 47 | }, 48 | { 49 | "blur":10, 50 | "duration":200 51 | } 52 | ] 53 | ``` 54 | 55 | 除了一些必要的属性外（如 duration），动画片段对象的很多属性都可以省略，WebGAL 会根据情况使用默认值或者继承现有值来补全。 56 | 57 | :::info 58 | 继承现有值的「现有值」是指，在执行动画前，目标对象的变换效果快照，而不是上一个动画片段的结束状态。 59 | ::: 60 | 61 | ```webgal 62 | ; 立绘对象初始坐标为 (-500,0) 63 | changeFigure:character_a/normal.png -id=aaa -transform={"position":{"x":-500,"y":0}}; 64 | ; 多段动画的坐标依次为 65 | ; (-500,0) -> (500,0) -> (-500,20) 66 | setTempAnimation:[{"duration":0},{"position":{"x":500},"duration":500},{"position":{"y":20},"duration":500}] -target=aaa; 67 | ``` 68 | 69 | 动画里的第一个片段为起始状态，通常 duration 设为 0 即可，即使设置了大于 0 的数，也不会有动画效果。 70 | 您仍然可以为第一个片段设置变换效果属性，这样可以在动画开始时直接跳转到指定状态。 71 | 72 | ```webgal 73 | ; 立绘对象初始坐标为 (-500,0) 74 | changeFigure:character_a/normal.png -id=aaa; 75 | ; 从左走到右，动画开始时直接跳转到左边 76 | setTempAnimation:[{"position":{"x":-500},"duration":0},{"position":{"x":500},"duration":1000}] -target=aaa; 77 | ``` 78 | 79 | ## 参数 80 | 81 | ### duration 82 | - 数字 83 | - 单位：毫秒 84 | - 必填 85 | 86 | 每个动画片段的持续时间。 87 | 88 | ```webgal 89 | changeFigure:1/open_eyes.png -id=aaa; 90 | setTempAnimation:[{"position":{"x":-500},"duration":0},{"position":{"x":500},"duration":1000}] -target=aaa; 91 | ``` 92 | 93 | ### ease 94 | - 字符串 95 | 96 | 填写缓动类型，控制动画的缓动效果，默认值为 `easeInOut`，可选值包括 97 | - `linear`：线性 98 | - `easeIn`：缓入 99 | - `easeOut`：缓出 100 | - `easeInOut`：缓入缓出 101 | - `circIn`：圆形缓入 102 | - `circOut`：圆形缓出 103 | - `circInOut`：圆形缓入缓出 104 | - `backIn`：起点回弹 105 | - `backOut`：终点回弹 106 | - `backInOut`：起止回弹 107 | - `bounceIn`：起点弹跳 108 | - `bounceOut`：终点弹跳 109 | - `bounceInOut`：起止弹跳 110 | - `anticipate`：预先反向 111 | 112 | 任何其他字符串都会回退到默认值。 113 | 114 | ```webgal 115 | changeFigure:1/open_eyes.png -id=aaa; 116 | setTempAnimation:[{"position":{"x":-500},"duration":0},{"position":{"x":500},"duration":1000,"ease":"bounceOut"}] -target=aaa; 117 | ``` 118 | -------------------------------------------------------------------------------- /src/webgal-script/bg-and-figure.md: -------------------------------------------------------------------------------- 1 | # 背景与立绘 2 | 3 | ## 改变背景/人物立绘 4 | 5 | 要让 WebGAL 能够读取背景和人物立绘，你的背景图片应该被放在 `background` 文件夹内，而立绘图片则应该放在 `figure` 文件夹中。 6 | 7 | 接下来，你可以通过以下简单的语句来改变当前显示的背景图片和人物立绘： 8 | 9 | ``` ws 10 | changeBg:testBG03.jpg; // 改变背景 11 | changeFigure:testFigure02.png; // 改变人物立绘 12 | changeBg:none; // 关闭背景 13 | changeFigure:none; // 关闭人物立绘 14 | ``` 15 | 16 | 你有可能会发现，在你改变背景图片或人物立绘后，你需要再点击一下鼠标才能显示下一条对话，如果你希望在改变背景/立绘后立即执行下一条语句的内容，请使用 `-next` 参数。 17 | 18 | ``` ws 19 | changeBg:testBG03.jpg -next; 20 | changeFigure:testFigure02.png -next; // 改变人物立绘 21 | 一色:谢谢学姐！; 22 | ``` 23 | 24 | 如果你这样做，那么在背景/立绘替换后，程序会立刻执行下一条语句。 25 | 26 | ## 将立绘放在不同的位置 27 | 28 | 现在，你可以在页面的三个不同位置放置不同的立绘，只需要在放置立绘的语句处加上你要放置的位置就可以了，示例如下： 29 | 30 | ``` ws 31 | changeFigure:testFigure03.png -left; 32 | changeFigure:testFigure04.png; 33 | changeFigure:testFigure03.png -right; 34 | ``` 35 | 36 | 以上三行分别对应着左、中、右三个不同的位置。三个不同位置的立绘是相互独立的，所以如果你需要清除立绘，必须分别独立清除： 37 | 38 | ``` ws 39 | changeFigure:none -left; 40 | changeFigure:none; 41 | changeFigure:none -right; 42 | ``` 43 | 44 | 如果你想要在立绘改变后立刻执行下一条语句，操作方法与之前一样，即加上参数 `-next` : 45 | 46 | ``` ws 47 | changeFigure:testFigure03.png -left -next; 48 | changeFigure:testFigure04.png -next; 49 | changeFigure:testFigure03.png -right -next; 50 | ``` 51 | 52 | ## 带ID的自由立绘 53 | 54 | 如果你想要更精确地控制立绘，或使用超过 3 个立绘，可以为立绘指定 `id` 和初始位置： 55 | 56 | ``` ws 57 | ; // 一个初始位置在右侧的自由立绘 58 | changeFigure:testFigure03.png -left -id=test1; 59 | ; // 通过 id 关闭立绘 60 | changeFigure:none -id=test1; 61 | ``` 62 | 63 | ::: tip 64 | 如果你要重设某个带ID立绘的位置，请先关闭再重新打开。 65 | ::: 66 | 67 | ## 放置小头像 68 | 69 | 很多游戏可以在文本框的左下角放置小头像，以下是在本引擎中使用的语法： 70 | 71 | ``` ws 72 | ; // 在左下角显示minipic_test.png 73 | miniAvatar:minipic_test.png; 74 | ; // 关闭这个小头像 75 | miniAvatar:none; 76 | ``` 77 | 78 | ## 解锁 CG 以供鉴赏 79 | 80 | 使用 `unlockCg` 来解锁 CG 鉴赏中的 CG。 81 | 82 | ``` ws 83 | ; // 解锁CG并赋予名称 84 | unlockCg:xgmain.jpeg -name=星光咖啡馆与死神之蝶 -series=1; 85 | ``` 86 | 87 | 其中，`-series` 参数可选，代表当前立绘属于哪个系列。同系列的立绘以后会合并展示（即展示成可以切换的同系列CG）。 88 | 89 | ## 设置立绘时设置效果 90 | 91 | 有关效果的字段说明，请参考 [动画](animation.md) 92 | 93 | 你可以在设置立绘的时候就为立绘设置一些变换和滤镜效果，以下是一个示例： 94 | 95 | ``` 96 | changeFigure:stand.png -transform={"alpha":1,"position":{"x":0,"y":500},"scale":{"x":1,"y":1},"rotation":0,"blur":0,"brightness":1,"contrast":1,"saturation":1,"gamma":1,"colorRed":255,"colorGreen":255,"colorBlue":255,"oldFilm":0,"dotFilm":0,"reflectionFilm":0,"glitchFilm":0,"rgbFilm":0,"godrayFilm":0} -next; 97 | ``` 98 | 99 | ## 为已有的立绘设置变换效果 100 | 101 | 有关效果的字段说明，请参考 [动画](animation.md) 102 | 103 | 你也可以直接用 `setTransform` 为已有的立绘设置效果，例如： 104 | 105 | ``` 106 | setTransform:{"position":{"x":100,"y":0}} -target=fig-center -duration=0; 107 | ``` 108 | 109 | 这里为已经存在的立绘设置了一个变换。 110 | -------------------------------------------------------------------------------- /src/.vuepress/sidebar/zh.ts: -------------------------------------------------------------------------------- 1 | import { sidebar } from "vuepress-theme-hope"; 2 | 3 | export const zhSidebar = sidebar({ 4 | "/": [ 5 | { 6 | text: "游戏开发指引", 7 | // prefix: "/", 8 | children: [ 9 | "getting-started", 10 | "resources", 11 | "config", 12 | { 13 | text: "部署或发布我的视觉小说？", 14 | link: "publish/", 15 | collapsible: true, // 是否可折叠 16 | prefix: "publish/", 17 | children: [ 18 | "web", 19 | "desktop", 20 | "android", 21 | ] 22 | }, 23 | "faq", 24 | "live2D", 25 | "migration", 26 | "derivative", 27 | ], 28 | }, 29 | { 30 | text: "WebGAL 脚本教程", 31 | prefix: "webgal-script/", 32 | children: [ 33 | "base", 34 | "dialogue", 35 | "bg-and-figure", 36 | "audio", 37 | "video", 38 | "scenes", 39 | "variable", 40 | "animation", 41 | "special-effect", 42 | ] 43 | }, 44 | { 45 | text: "开发信息", 46 | children: [ 47 | "developers", 48 | "tech", 49 | "info", 50 | "sponsor", 51 | "developers/joinus", 52 | "developers/terre", 53 | ] 54 | }, 55 | { 56 | text: "脚本参考", 57 | prefix: "script-reference/", 58 | children: [ 59 | { 60 | text: "命令", 61 | prefix: "commands/", 62 | children:[ 63 | "global", 64 | "say", 65 | "changeBg", 66 | "changeFigure", 67 | "bgm", 68 | "playVideo", 69 | "pixiPerform", 70 | "pixiInit", 71 | "intro", 72 | "miniAvatar", 73 | "changeScene", 74 | "choose", 75 | "end", 76 | "setComplexAnimation", 77 | "label", 78 | "jumpLabel", 79 | "setVar", 80 | "callScene", 81 | "showVars", 82 | "unlockCg", 83 | "unlockBgm", 84 | "filmMode", 85 | "setTextbox", 86 | "setAnimation", 87 | "playEffect", 88 | "setTempAnimation", 89 | "comment", 90 | "setTransform", 91 | "setTransition", 92 | "getUserInput", 93 | "applyStyle", 94 | "wait", 95 | ] 96 | }, 97 | { 98 | text: "其他", 99 | prefix: "others/", 100 | children:[ 101 | "transform-reference", 102 | "animation-reference", 103 | ] 104 | }, 105 | ], 106 | }, 107 | ], 108 | }); 109 | -------------------------------------------------------------------------------- /src/ja/developers/readme.md: -------------------------------------------------------------------------------- 1 | # カスタマイズと貢献 2 | 3 | ## WebGAL ソースコードリポジトリ 4 | 5 | [https://github.com/OpenWebGAL/WebGAL](https://github.com/OpenWebGAL/WebGAL) 6 | 7 | ## ブランチの説明 8 | 9 | ``` 10 | main: 安定版 11 | dev: WebGAL 開発版 12 | その他のブランチ: 過去のバージョンのアーカイブ 13 | ``` 14 | 15 | ## アップデート計画 16 | 17 | [WebGAL 情報](/info) を参照してください 18 | 19 | ## 貢献者ガイド 20 | 21 | WebGAL Terre ビジュアルエディターに貢献したい場合は、[WebGAL Terre 貢献者ガイド](terre) を参照してください。 22 | 23 | ### 貢献の要件 24 | 25 | 貢献内容をよりよく理解し、レビューするために、以下の点にご注意ください。 26 | 27 | **プルリクエスト前の準備作業:** 28 | 29 | * **先に Issue を提出:** **開発作業を開始する前に、アイデアと設計提案について議論するために Issue を提出してください**。これにより、重複作業を避け、貢献がプロジェクトの方向性と一致していることを確認し、設計上の問題で PR がマージできない状況を防ぐことができます。 30 | 31 | * **RFC（Request for Comments）:** 大規模な変更や新機能については、技術的アプローチの実現可能性について維持者やコミュニティメンバーと議論するために、まず RFC または詳細な設計提案を提出することをお勧めします。 32 | 33 | **コード品質の要件:** 34 | 35 | * **コードコメント:** コードロジックを理解しやすくするために、主要なセクションにコメントを追加することをお勧めします。 36 | 37 | * **機能テスト:** 機能を追加または変更した場合は、機能が期待どおりに動作することを確認するための対応するテスト方法を提供してください。コードをリファクタリングした場合は、影響を受ける範囲をカバーし、リファクタリングによって新しい問題が発生しないことを確認するためのテスト方法も提供してください。 38 | 39 | * **明確な説明:** プルリクエストを送信する際には、行った変更とその理由を簡単に説明し、関連する Issue を参照してください。これにより、貢献内容をより迅速に理解することができます。 40 | 41 | ### ローカルで WebGAL プロジェクトを起動する 42 | 43 | WebGAL は現在、パッケージマネージャーとして yarn を、モノレポマネージャーとして yarn workspace を使用しています。 44 | 45 | yarn がない場合は、次のコマンドを使用してインストールしてください。 46 | 47 | ```shell 48 | npm install yarn -g 49 | ``` 50 | 51 | 次に、プロジェクトのルートディレクトリで次のコマンドを実行します。 52 | 53 | ```shell 54 | yarn 55 | ``` 56 | 57 | 依存関係をインストールします。 58 | 59 | このプロジェクトには、それぞれ異なる機能に対応する3つのパッケージがあります。 60 | 61 | | パッケージ名 | 内容 | 62 | | ------------ | -------------------------- | 63 | | parser | WebGAL パーサー | 64 | | server | WebGAL ローカルデバッグサーバー | 65 | | webgal | エンジンコア | 66 | | yukimi | 計画中の yukimi サポートライブラリ | 67 | 68 | ## ローカルで WebGAL エンジンプロジェクトを起動する 69 | 70 | 次のスクリプトを実行して開発サーバーを起動できます。 71 | 72 | ```shell 73 | yarn dev 74 | ``` 75 | 76 | WebGAL をビルドする場合は、次のコマンドを使用します。 77 | 78 | ```shell 79 | yarn build 80 | ``` 81 | 82 | パッケージ化された出力は `packages/webgal/dist` ディレクトリにあります。 83 | 84 | ## WebGAL テクノロジーについて 85 | 86 | WebGAL はすでにかなりの規模のプロジェクトであり、直接コードに飛び込むと、最初は圧倒されるかもしれません。そのため、WebGAL テクノロジーを理解するための参考資料を用意しました。 87 | 88 | [WebGAL 技術紹介](/ja/tech) 89 | 90 | さらに、ソースコードの主要なディレクトリには、そのモジュールの原理を説明するドキュメントも用意しています。これらの情報は中国語で提供されます。今日では、大規模言語モデルの翻訳能力は十分に高いため、中国語が読めなくても心配する必要はありません。大規模言語モデルを使用して、自分の言語に翻訳してみてください。 91 | 92 | ## ビルドされた WebGAL を WebGAL Terre エディターにインポートする 93 | 94 | ::: tip 95 | カスタマイズが完了したら、WebGAL エディターを使用してリアルタイムで簡単にプレビューとリソース管理を行いたい場合は、パッケージ化された成果物をコピーして貼り付け、エディターディレクトリの下にある `packages/terre2/assets/templates/WebGAL_Template` ディレクトリを置き換えることができます。これにより、WebGAL エディターに組み込まれているエンジンをカスタマイズしたものに置き換えることができます。WebGAL リポジトリと WebGAL_Terre リポジトリが同じディレクトリにある場合は、`release-to-terre` ショートカットスクリプトを使用して実行できます。 96 | ::: 97 | -------------------------------------------------------------------------------- /src/script-reference/commands/say.md: -------------------------------------------------------------------------------- 1 | # say 2 | 3 | 对话命令。任何识别不了的命令，都将尝试作为对话命令执行。 4 | 5 | ## 语句内容 6 | 7 | 填写一句话，这句话将出现在对话框中。可以使用 `|` 来分割多行文字。 8 | 详情请见[基础](../../webgal-script/base.md)与[对话](../../webgal-script/dialogue)。 9 | 10 | ```webgal 11 | 说话人:你好，世界！; 12 | ``` 13 | 14 | 以下情况对话框不会出现: 15 | - 语句内容与角色名均为空 16 | - 用 `setTextbox` 命令隐藏了对话框 17 | - 开启了 __隐藏所有 UI__ 18 | 19 | ## 参数 20 | 21 | ### notend 22 | - 布尔值 23 | 24 | 当值为 `true` 时，显示完所有文字后，立刻执行下一条命令，即使玩家未开启自动播放。 25 | 26 | ```webgal 27 | changeFigure:1/open_eyes.png -next; 28 | 角色A:这到底是在干什么啊...... -notend; 29 | changeFigure:1/closed_eyes.png -next; 30 | 没眼看了！ -concat; 31 | ``` 32 | 33 | ### concat 34 | - 布尔值 35 | 36 | 当值为 `true` 时，不会清空对话框内已有的文字，而是在此基础上，让新文字接续在后面。 37 | 38 | ```webgal 39 | changeFigure:1/open_eyes.png -next; 40 | 角色A:这到底是在干什么啊...... -notend; 41 | changeFigure:1/closed_eyes.png -next; 42 | 没眼看了！ -concat; 43 | ``` 44 | 45 | ### speaker 46 | - 字符串 47 | 48 | 填写说话者的名称，该名称将出现在对话框的说话者栏中。 49 | 若未填写此参数，则对话框将继续使用上一次的说话者名称。 50 | 51 | ```webgal 52 | say:你好，世界！ -speaker=角色A; 53 | ; 若没有 speaker 参数，角色名继续使用上一次的值 54 | say:世界，你好！; 55 | ``` 56 | 57 | WebGAL 支持说话者的简化写法。 58 | 若句首到第一个英文冒号之间的字符不是命令，那么将其作为说话者名称。 59 | 若整句没有英文冒号，即找不到说话者名称，则继续使用上一次的说话者名称。 60 | 61 | ```webgal 62 | 角色A:你好，世界！; 63 | ; 说话者仍然为角色A 64 | 世界，你好！; 65 | ``` 66 | 67 | ### clear 68 | - 布尔值 69 | 70 | 当值为 `true` 时，将清除说话者，此时对话框的说话者栏不会显示，通常可用于旁白。 71 | 72 | ```webgal 73 | say:这是一句话。 -speaker=角色A; 74 | say:这是一个旁白。 -clear; 75 | say:这是一句话。 -speaker=角色B; 76 | ``` 77 | 78 | WebGAL 支持旁白的简化写法。当句首到第一个英文冒号之间没有一个字符，那么将这句话作为旁白。 79 | 80 | ```webgal 81 | 角色A:这是一句话。; 82 | :这是一句旁白。; 83 | 角色B:这是一句话。; 84 | ``` 85 | 86 | ### vocal 87 | - 字符串 88 | 89 | 填写声音文件的路径，说话时将播放该声音文件。 90 | 91 | ```webgal 92 | 角色A:你好，世界！ -vocal=hello_world.wav; 93 | ``` 94 | 95 | WebGAL 支持声音文件的简化写法。 96 | 97 | ```webgal 98 | 角色A:你好，世界！ -hello_world.wav; 99 | ``` 100 | 101 | ### fontSize 102 | - 字符串 103 | 104 | 设置字体大小，可用值有: 105 | - `small` - 小号字体 106 | - `medium` - 中号字体 107 | - `large` - 大号字体 108 | - `default` - 默认字体大小，即设置里指定的字体大小 109 | 110 | 当此值被设置后，会传递到之后的对话，直至被再次设置。 111 | 112 | ```webgal 113 | 角色A:你好，世界！ -fontSize=small; 114 | 角色A:你好，世界！; 依然是小字体 115 | 角色A:你好，世界！ -fontSize=large; 116 | 角色A:你好，世界！ -fontSize=default; 117 | ``` 118 | 119 | ### left 120 | - 布尔值 121 | 122 | 当值为 `true` 时，WebGAL 将尝试驱动左侧立绘张嘴说话。 123 | 124 | ```webgal 125 | 角色A:你好，世界！ -left; 126 | ``` 127 | 128 | ### right 129 | - 布尔值 130 | 131 | 当值为 `true` 时，WebGAL 将尝试驱动右侧立绘张嘴说话。 132 | 133 | ```webgal 134 | 角色A:你好，世界！ -right; 135 | ``` 136 | 137 | ### center 138 | - 布尔值 139 | 140 | 当值为 `true` 时，WebGAL 将尝试驱动中间立绘张嘴说话。 141 | 142 | ```webgal 143 | 角色A:你好，世界！ -center; 144 | ``` 145 | 146 | ### figureId 147 | - 字符串 148 | 149 | 填写立绘的 id，WebGAL 将尝试驱动对应 id 的立绘张嘴说话。 150 | 151 | ```webgal 152 | 角色A:你好，世界！ -figureId=aaa; 153 | ``` 154 | -------------------------------------------------------------------------------- /src/.vuepress/config.ts: -------------------------------------------------------------------------------- 1 | import { defineUserConfig } from "vuepress"; 2 | import theme from "./theme.js"; 3 | import { searchPlugin } from "@vuepress/plugin-search"; 4 | import { shikiPlugin } from "@vuepress/plugin-shiki"; 5 | import path from 'path' 6 | export default defineUserConfig({ 7 | base: "/", 8 | plugins: [ 9 | searchPlugin({ 10 | locales: { 11 | "/": { 12 | placeholder: "Search", 13 | }, 14 | "/zh/": { 15 | placeholder: "搜索", 16 | }, 17 | }, 18 | }), 19 | shikiPlugin({ 20 | theme: "dracula", 21 | langs: [ 22 | { 23 | id: "webgal", 24 | aliases: [ 25 | "webgal", 26 | "WebGAL", 27 | "Webgal", 28 | "ws", 29 | "webgal-script", 30 | "WebgalScript", 31 | "Webgal Script", 32 | "WebGAL Script", 33 | ], 34 | scopeName: "source.webgal", 35 | path: path.resolve(__dirname, "../grammar/webgal.tmLanguage.json"), 36 | }, 37 | "ts", "bash", "json", "xml", "kotlin", 38 | ], 39 | 40 | }), 41 | ], 42 | locales: { 43 | "/": { 44 | lang: "zh-CN", 45 | title: "WebGAL 文档", 46 | description: "全新的网页端视觉小说引擎", 47 | }, 48 | "/en/": { 49 | lang: "en-US", 50 | title: "WebGAL Doc", 51 | description: "A brand new web Visual Novel engine", 52 | }, 53 | "/ja/": { 54 | lang: "ja-JP", 55 | title: "WebGAL Doc", 56 | description: "未だかつてない Web ベースビジュアルノベルエンジン", 57 | }, 58 | }, 59 | 60 | theme, 61 | // Enable it with pwa 62 | // shouldPrefetch: false, 63 | 64 | /* plugins: [ 65 | [ 66 | '@vuepress/google-analytics', 67 | { 68 | 'ga': 'G-6XPF6Q2WY0' // UA-00000000-0 69 | } 70 | ] 71 | ],*/ 72 | head: [ 73 | [ 74 | "script", 75 | { 76 | async: true, 77 | src: "https://www.googletagmanager.com/gtag/js?id=G-6XPF6Q2WY0", 78 | }, 79 | "", 80 | ], 81 | [ 82 | "script", 83 | {}, 84 | ` 85 | window.dataLayer = window.dataLayer || []; 86 | function gtag(){dataLayer.push(arguments);} 87 | gtag('js', new Date()); 88 | gtag('config', 'G-6XPF6Q2WY0'); 89 | `, 90 | ], 91 | [ 92 | "script", 93 | {}, 94 | ` 95 | (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 96 | new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 97 | j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 98 | 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 99 | })(window,document,'script','dataLayer','GTM-NP6X74J'); 100 | `, 101 | ], 102 | ], 103 | }); 104 | -------------------------------------------------------------------------------- /src/en/webgal-script/special-effect.md: -------------------------------------------------------------------------------- 1 | # Effects 2 | 3 | Currently, WebGAL's effect system is powered by PixiJS. 4 | 5 | ## Using Effects 6 | 7 | ### Initialize Pixi 8 | 9 | Initialize Pixi using `pixiInit`. 10 | 11 | ``` ws 12 | pixiInit; 13 | ``` 14 | 15 | ::: warning 16 | If you want to use effects, you must run this command to initialize Pixi first. 17 | 18 | If you want to clear the effects that have already taken effect, you can use this syntax to clear the effects. 19 | ::: 20 | 21 | ### Add Effects 22 | 23 | Add effects using `pixiPerform`. 24 | 25 | ``` ws 26 | pixiPerform:rain; // Add a rain effect 27 | ``` 28 | 29 | Note: After the effect takes effect, if it is not re initialized, the effect will continue to run. 30 | 31 | ### List of Built-in Effects 32 | 33 | | Effect | Command | 34 | | :--- | :--- | 35 | | Rain | pixiPerform:rain; | 36 | | Snow | pixiPerform:snow; | 37 | | Heavy Snow | pixiPerform:heavySnow; | 38 | | Cherry Blossoms | pixiPerform:cherryBlossoms; | 39 | 40 | ### Superimpose Effects 41 | 42 | If you want to superimpose two or more effects, you can superimpose different effects without using the `pixiInit` command. 43 | 44 | ``` ws 45 | pixiPerform:rain; 46 | pixiPerform:snow; 47 | ``` 48 | 49 | ### Clear Superimposed Effects 50 | 51 | Initialize using `pixiInit` to clear all effects that have been applied. 52 | 53 | ## Adding Custom Effects 54 | 55 | You can download the source code, then find `/Core/gameScripts/pixiPerformScripts/` and create a new `PIXI.Container` to create the effects you need. 56 | 57 | The effects container is divided into a foreground container and a background container, and the foreground container is used here as an example. 58 | 59 | ``` ts 60 | // Get the current Pixi effect Container 61 | const effectsContainer = WebGAL.gameplay.pixiStage!.foregroundEffectsContainer!; 62 | // Call the Pixi App method, which may be useful for determining screen size, etc. 63 | const app = RUNTIME_GAMEPLAY.pixiStage!.currentApp!; 64 | // Create a container for custom effects 65 | const container = new PIXI.Container(); 66 | // Add effects 67 | effectsContainer.addChild(container); 68 | ``` 69 | 70 | Texture files can be placed in the `game/tex` directory. 71 | 72 | Then, import the `effect registration method` at the beginning of the file to register the new effect you wrote. 73 | 74 | At the end of the file, use it to register your effect, the first parameter is the effect name, and the second parameter is the method to call the effect. 75 | 76 | ``` ts 77 | import {registerPerform} from '../pixiPerformManager'; 78 | 79 | // Let's say this is your effect 80 | function myPerform() { 81 | // ... 82 | } 83 | 84 | // Register 85 | registerPerform('myPerform', { fg: () => myPerform(parameters) }); 86 | ``` 87 | 88 | Finally, compile WebGAL with support for your custom effects 89 | 90 | ``` shell 91 | yarn run build; 92 | ``` 93 | 94 | This way, you can call your effects in the script 95 | 96 | ``` ws 97 | pixiPerform:myPerform; 98 | ``` -------------------------------------------------------------------------------- /src/en/webgal-script/audio.md: -------------------------------------------------------------------------------- 1 | # Audio 2 | 3 | ## Playing Background Music (BGM) 4 | 5 | Playing background music is extremely simple, you just need to put the background music in the `bgm` folder, and then use the `bgm` instruction to play the background music. 6 | 7 | ``` ws 8 | bgm:Summer_Shadow.mp3; 9 | ``` 10 | 11 | You can set a `-volume` parameter for the background music to adjust its volume. 12 | 13 | ``` ws 14 | bgm:Summer_Shadow.mp3 -volume=30; 15 | ``` 16 | 17 | In addition, you can also use the `-enter` parameter to fade in the playback. 18 | 19 | ``` ws 20 | bgm:Summer_Shadow.mp3 -enter=3000; 21 | ``` 22 | 23 | Finally, you can use the following statement to fade out the background music. 24 | 25 | ``` ws 26 | bgm:none -enter=3000; 27 | ``` 28 | 29 | ::: tip 30 | `-volume` and `-enter` are both optional parameters. 31 | When `-volume` is not used, or a value other than 0 to 100 is used, the default value of 100 will be used. 32 | When `-enter` is not used, or a value other than 0 to is used, the default value of 0 will be used. 33 | ::: 34 | 35 | ## Playing Voice 36 | 37 | As we all know, the most attractive part of visual novels is often their excellent voice acting. Put the voice acting file in the `vocal` folder, and then add the `-Voice file name` parameter in the dialog script to play the voice. The syntax is as follows. 38 | 39 | ``` ws 40 | Hachiman Hikigaya:Just arrived -V3.ogg; 41 | ``` 42 | 43 | When talking continuously, the way the voice is introduced is the same. 44 | 45 | ``` ws 46 | Yukino Yukinoshita:You're here early -V1.ogg; 47 | Sorry, have you been waiting long? -V2.ogg; 48 | ``` 49 | 50 | At the same time, you can set a `-volume` parameter to adjust its volume. 51 | 52 | ``` ws 53 | Hachiman Hikigaya:Just arrived -V3.ogg -volume=30; 54 | ``` 55 | 56 | ::: tip 57 | `-volume` is an optional parameter. 58 | When `-volume` is not set, or a value other than 0 to 100 is used, the default value of 100 will be used. 59 | ::: 60 | 61 | ## Playing Sound Effects 62 | 63 | After putting your dubbing into the `vocal` folder, you can use the `playEffect` instruction to play the sound effects^_^ 64 | 65 | ``` ws 66 | playEffect:xxx.mp3; 67 | ``` 68 | 69 | You can set a `-volume` parameter for the sound effect to adjust its volume. 70 | 71 | ``` ws 72 | playEffect:xxx.mp3 -volume=30; 73 | ``` 74 | 75 | ::: tip 76 | `-volume` is an optional parameter. 77 | When `-volume` is not set, or a value other than 0 to 100 is used, the default value of 100 will be used. 78 | ::: 79 | 80 | ### Sound Effect Loop 81 | 82 | Giving the sound effect an `id` will automatically enable the sound effect loop, and the same `id` will be used to stop it later. 83 | 84 | ``` ws 85 | playEffect:xxx.mp3 -id=xxx; 86 | playEffect:none -id=xxx; // Stop this looping sound effect 87 | ``` 88 | 89 | ## Unlock Audio for Appreciation 90 | 91 | Use `unlockBgm` to unlock the audio in the audio appreciation. 92 | 93 | ``` ws 94 | ; // Unlock bgm and give it a name 95 | unlockBgm:s_Title.mp3 -name=Smiling-Swinging!!!; 96 | ``` -------------------------------------------------------------------------------- /src/ja/webgal-script/bg-and-figure.md: -------------------------------------------------------------------------------- 1 | # 背景と立ち絵 2 | 3 | ## 背景/立ち絵の変更 4 | 5 | WebGALで背景と立ち絵を読み込むには、背景画像は`background`フォルダに、立ち絵画像は`figure`フォルダに配置する必要があります。 6 | 7 | 次に、以下の簡単な文で現在表示されている背景画像と立ち絵を変更することができます。 8 | 9 | ``` ws 10 | changeBg:testBG03.jpg; // 背景を変更 11 | changeFigure:testFigure02.png; // 立ち絵を変更 12 | changeBg:none; // 背景を閉じる 13 | changeFigure:none; // 立ち絵を閉じる 14 | ``` 15 | 16 | 背景画像や立ち絵を変更した後、次の会話を表示するために再度マウスをクリックする必要があることに気付くかもしれません。背景/立ち絵を変更した後、すぐに次の文の内容を実行したい場合は、`-next`パラメータを使用してください。 17 | 18 | ``` ws 19 | changeBg:testBG03.jpg -next; 20 | changeFigure:testFigure02.png -next; // 立ち絵を変更 21 | 一色:先輩ありがとう！; 22 | ``` 23 | 24 | このようにすると、背景/立ち絵の置き換え後にプログラムはすぐに次の文を実行します。 25 | 26 | ## 立ち絵を異なる位置に配置する 27 | 28 | 現在、ページの3つの異なる位置に異なる立ち絵を配置できます。立ち絵を配置する文に配置する位置を追加するだけで済みます。例を以下に示します。 29 | 30 | ``` ws 31 | changeFigure:testFigure03.png -left; 32 | changeFigure:testFigure04.png; 33 | changeFigure:testFigure03.png -right; 34 | ``` 35 | 36 | 上記の3行は、それぞれ左、中央、右の3つの異なる位置に対応しています。3つの異なる位置の立ち絵は相互に独立しているため、立ち絵を消去する必要がある場合は、それぞれ独立して消去する必要があります。 37 | 38 | ``` ws 39 | changeFigure:none -left; 40 | changeFigure:none; 41 | changeFigure:none -right; 42 | ``` 43 | 44 | 立ち絵を変更した後、すぐに次の文を実行したい場合は、以前と同様に`-next`パラメータを追加します。 45 | 46 | ``` ws 47 | changeFigure:testFigure03.png -left -next; 48 | changeFigure:testFigure04.png -next; 49 | changeFigure:testFigure03.png -right -next; 50 | ``` 51 | 52 | ## ID付きの自由な立ち絵 53 | 54 | もし、より詳細に立ち絵を制御したい場合や、3つ以上の立ち絵を使用したい場合は、立ち絵に `id` と初期位置を指定することができます。 55 | 56 | ``` ws 57 | ; // 右側に初期位置がある自由な立ち絵 58 | changeFigure:testFigure03.png -left -id=test1; 59 | ; // idで立ち絵を閉じる 60 | changeFigure:none -id=test1; 61 | ``` 62 | 63 | ::: tip 64 | ID付きの立ち絵の位置をリセットする場合は、まず閉じてから再度開いてください。 65 | ::: 66 | 67 | ## ミニアバターを配置する 68 | 69 | 多くのゲームでは、テキストボックスの左下にミニアバターを配置できます。以下は、このエンジンで使用される構文です。 70 | 71 | ``` ws 72 | ; // 左下にminipic_test.pngを表示する 73 | miniAvatar:minipic_test.png; 74 | ; // このミニアバターを閉じる 75 | miniAvatar:none; 76 | ``` 77 | 78 | ## CGをアンロックして鑑賞する 79 | 80 | `unlockCg`を使用して、CG鑑賞のCGをアンロックします。 81 | 82 | ``` ws 83 | ; // CGをアンロックして名前を付ける 84 | unlockCg:xgmain.jpeg -name=星光咖啡馆与死神之蝶 -series=1; 85 | ``` 86 | 87 | ここで、`-series`パラメータはオプションであり、現在の立ち絵がどのシリーズに属するかを表します。同じシリーズの立ち絵は、後で統合して表示されます（つまり、同じシリーズのCGを切り替えて表示できます）。 88 | 89 | ## 立ち絵を設定するときにエフェクトを設定する 90 | 91 | エフェクトのフィールドの説明については、[アニメーション](animation.md)を参照してください。 92 | 93 | 立ち絵を設定するときに、立ち絵にいくつかの変換とフィルターエフェクトを設定できます。以下に例を示します。 94 | 95 | ``` 96 | changeFigure:stand.png -transform={"alpha":1,"position":{"x":0,"y":500},"scale":{"x":1,"y":1},"rotation":0,"blur":0,"brightness":1,"contrast":1,"saturation":1,"gamma":1,"colorRed":255,"colorGreen":255,"colorBlue":255,"oldFilm":0,"dotFilm":0,"reflectionFilm":0,"glitchFilm":0,"rgbFilm":0,"godrayFilm":0} -next; 97 | ``` 98 | 99 | ## 既存の立ち絵に変換エフェクトを設定する 100 | 101 | エフェクトのフィールドの説明については、[アニメーション](animation.md)を参照してください。 102 | 103 | また、`setTransform`を使用して、既存の立ち絵に直接エフェクトを設定することもできます。例えば、 104 | 105 | ``` 106 | setTransform:{"position":{"x":100,"y":0}} -target=fig-center -duration=0; 107 | ``` 108 | 109 | ここでは、既存の立ち絵に変換を設定しました。 -------------------------------------------------------------------------------- /src/en/getting-started.md: -------------------------------------------------------------------------------- 1 | # How to start making a WebGAL? 2 | 3 | ::: warning 4 | No matter which way you choose to make a WebGAL game, you should spend some time reading through the entirety of the development guide. It won't take long, and it will save you from running into problems due to improper operation. 5 | 6 | You know, most of the questions you are wondering about can be found in the documentation. If you firmly believe that you have encountered a bug, please raise an issue at [issues](https://github.com/OpenWebGAL/WebGAL/issues) or send an email to , you can also find a way to join the WebGAL discussion community in the "More" column at the top right corner of the website. 7 | ::: 8 | 9 | ::: danger 10 | Please use a modern browser (Chrome / Firefox / Edge) to open WebGAL and the editor. Problems that may be caused by using other browsers will not be solved. 11 | ::: 12 | 13 | ## Method 1: Use WebGAL Terre Visual Editor (Recommended) 14 | 15 | **WebGAL Terre Visual Editor is the best way to create, make and publish a WebGAL.** 16 | 17 | After downloading the WebGAL Terre Visual Editor, please unzip the package and launch the WebGAL_Terre executable file. WebGAL Terre will automatically open the default browser, if not, please enter [http://localhost:3001/](http://localhost:3001/) to open the editor. 18 | 19 | Download WebGAL Terre Visual Editor: 20 | 21 | [WebGAL Homepage (Recommended)](https://openwebgal.com/en/download/) 22 | 23 | [GitHub Releases](https://github.com/OpenWebGAL/WebGAL_Terre/releases) 24 | 25 | ::: tip 26 | WebGAL Terre Visual Editor does not support Windows 7 by default. 27 | Windows 7 users please refer to **[How to start making with Visual Editor on Windows 7](./win7)**. 28 | ::: 29 | 30 | ## Method 2: Start debugging from source code (For makers who want higher customization) 31 | 32 | ``` shell 33 | git clone https://github.com/OpenWebGAL/WebGAL.git 34 | ``` 35 | 36 | Install and use yarn to install dependencies 37 | 38 | ``` shell 39 | npm install yarn -g 40 | yarn 41 | ``` 42 | 43 | WebGAL uses vite as a packaging and debugging tool, you can start the development server by running the following script 44 | 45 | ``` shell 46 | yarn dev 47 | ``` 48 | 49 | It is recommended to use VS Code for development, and use plugins to achieve syntax highlighting: 50 | 51 | [Marketplace address of syntax highlighting plugin](https://marketplace.visualstudio.com/items?itemName=c6h5-no2.webgal-script-basics) 52 | 53 | [Source code repository of syntax highlighting plugin](https://github.com/C6H5-NO2/webgal-script-basics) 54 | 55 | If you want to package, please use 56 | 57 | ``` shell 58 | yarn build 59 | ``` 60 | 61 | The packaged product is in the packages/webgal/dist directory 62 | 63 | ::: tip 64 | After you have finished customizing, if you want to use the WebGAL editor to easily preview and manage resources in real time, you can copy and paste the packaged product and replace the `packages/terre2/assets/templates/WebGAL_Template` in the editor directory, so that you can replace the built-in engine of the WebGAL editor with your own customized one. If your WebGAL repository and WebGAL_Terre repository are in the same directory, you can use the `release-to-terre` quick script to execute 65 | ::: -------------------------------------------------------------------------------- /src/webgal-script/scenes.md: -------------------------------------------------------------------------------- 1 | # 场景与分支 2 | 3 | 在 视觉小说 中，跳转章节、场景与分支选择是不可或缺的，因此，WebGAL 也支持场景跳转与分支选择。 4 | 5 | 你可以将你的剧本拆分成多个 txt 文档，并使用一个简单的语句来切换当前运行的剧本。 6 | 7 | ::: warning 8 | 在跳转场景、分支选择或调用场景后，舞台并不会被清除。这也就意味着上一个场景应用的背景音乐、立绘、背景图片等效果会被继承到下一场景。 9 | 10 | 如果你使用 WebGAL Terre 可视化编辑器，你应该格外注意，因为编辑器在预览单独的一个场景的时候并不关心上一个场景会带来什么效果。因此，预览效果和实际游戏运行效果可能会有所差别，你应该考虑妥善处理场景跳转前的舞台清理工作。 11 | ::: 12 | 13 | ## 场景跳转 14 | 15 | 假如你现在写了两个章节的剧本，分别是 `Chapter-1.txt` 与 `Chapter-2.txt` 。在 `Chapter-1.txt` 运行结束后，你希望跳转到 `Chapter-2.txt` 对应的场景，请使用以下语句： 16 | 17 | ``` ws 18 | changeScene:Chapter-2.txt; 19 | ``` 20 | 21 | 示例： 22 | 23 | ``` ws 24 | (Chapter-1.txt) 25 | ...... 26 | ...... 27 | ; // 接下来执行的就是Chapter-2.txt的内容了 28 | changeScene:Chapter-2.txt; 29 | ...... 30 | ...... 31 | (Chapter-2.txt) 32 | ...... 33 | ``` 34 | 35 | 通过执行这条命令，你将切换游戏场景，并使接下来的剧情发展按照新的场景剧本运行。新的剧本会在下一次鼠标点击后运行。 36 | 37 | ## 场景调用 38 | 39 | 如果你需要在一个场景中调用另一段场景，你可以使用 `callScene`，在调用的场景运行完毕后会回到原场景。 40 | 41 | 语句： 42 | 43 | ``` ws 44 | callScene:Chapter-2.txt; 45 | ``` 46 | 47 | 示例： 48 | 49 | ``` ws 50 | (Chapter-1.txt) 51 | ...... 52 | ...... 53 | callScene:Chapter-2.txt; 54 | ; // 接下来执行的就是Chapter-2.txt的内容了 55 | ...... 56 | ...... 57 | (Chapter-2.txt) 58 | ...... 59 | ...... 60 | (Chapter-2.txt执行完毕) 61 | ; // 回父场景，继续执行父场景语句 62 | ...... 63 | ``` 64 | 65 | ## 分支选择 66 | 67 | 如果你的剧本存在分支选项，你希望通过选择不同的选项进入不同的章节，请使用 `choose`。 68 | 使用 `选择项文本:章节文件名` 定义一个选择项。使用 `|` 来分隔不同选择项。示例如下： 69 | 70 | ``` ws 71 | choose:叫住她:Chapter-2.txt|回家:Chapter-3.txt; 72 | ``` 73 | 74 | 你只需要将选项的文本与选择选项后要进入的剧本名称一一对应起来，就可以实现分支选择的功能了。 75 | 76 | ### 条件展示和选择 77 | 78 | 你也可以根据变量，有条件地展示选项或允许用户点击选项，语法如下： 79 | 80 | ```ws 81 | choose:(showConditionVar>1)[enableConditionVar>2]->叫住她:Chapter-2.txt|回家:Chapter-3.txt; 82 | ``` 83 | 84 | 这里，showConditionVar>1 时才会展示第一个选项，enableConditionVar>2 时才会允许用户点击。 85 | 86 | ## 标签跳转 87 | 88 | 如果你想要创建一个分支，但是却觉得为此新建一个 TXT 文件太麻烦，你可以尝试使用以下方式在同一文件内实现创建分支和跳转语句。 89 | 90 | ::: warning 91 | 如果你的分支很长，我不建议你使用这种方式，因为一个 TXT 的行数不适宜太长，否则可能会导致加载慢、响应迟钝等性能问题。 92 | ::: 93 | 94 | ### 创建标签（`label`） 95 | 96 | ``` ws 97 | ...... 98 | jumpLabel:label_1; // 跳转到 label_1 99 | ...... 100 | ...... 101 | label:label_1; // 创建名为 label_1 的 label 102 | ...... 103 | ``` 104 | 105 | 简而言之， `jumpLabel` 类似于 `goto` 语句，能够立刻让你的剧本跳到场景（TXT 文件）中的任意一个位置，而这个位置需要你用 `label` 创建。 106 | 107 | 如果把 `jumpLabel` 比作任意门，那么这个任意门的终点就是 `label` 所在的位置。 108 | 109 | ### 添加选择项 110 | 111 | 有了上面的基础，你就可以通过 `choose` 来实现用分支来跳转到 `label` 所在的位置了： 112 | 113 | ``` ws 114 | ...... 115 | choose:分支 1:label_1|分支 2:label_2; 116 | label:label_1; // 创建名为 label_1 的 label 117 | ...... 118 | ...... 119 | jumpLabel:end; // 跳转到 end 120 | label:label_2; // 创建名为 label_2 的 label 121 | ...... 122 | ...... 123 | jumpLabel:end; // 跳转到 end 124 | label:end; // 创建名为 end 的 label 125 | ...... 126 | ``` 127 | 128 | 注意，在每个分支的结尾，你应该用 `jumpLabel` 来跳转到你希望的位置。由于程序是线性执行的，所以如果你没有在分支的结束跳转，那么程序会继续往下运行，比如说： 129 | 130 | ``` ws 131 | ...... 132 | choose:分支 1:label_1|分支 2:label_2; 133 | label:label_1; // 创建名为 label_1 的 label 134 | ...... 135 | ...... 136 | label:label_2; // 创建名为 label_2 的 label 137 | ...... 138 | ``` 139 | 140 | 在这个剧本中，如果你选择了 `分支 2`，那么一切看起来好像没有问题。但是如果你选择了 `分支 1`，你会惊讶地发现，在 `分支 1` 执行完后，会继续执行 `分支 2`。那是因为程序按顺序继续执行下一行了，而你没有指定在分支结束后跳到哪里。 141 | -------------------------------------------------------------------------------- /src/publish/android/readme.md: -------------------------------------------------------------------------------- 1 | # Andoird 2 | 3 | 推荐使用 WebGAL Terre 可视化编辑器，提供了一键导出安卓项目文件的选项。 4 | 5 | 如果你使用源代码构建项目请切换到源代码选项卡。 6 | 7 | ## 前期准备 8 | 9 | ::: tabs#android 10 | 11 | @tab WebGAL Terre 12 | 13 | * 下载安装 [Android Studio](https://developer.android.com/studio) 14 | 15 | @tab 源代码 16 | 17 | * 下载安装 [Android Studio](https://developer.android.com/studio) 18 | * 将 [WebGAL](https://github.com/OpenWebGAL/WebGAL) 编译为 Web 网页 19 | * 下载 [WebGAL Android 项目模板](https://github.com/nini22P/WebGAL-Android) 20 | 21 | ::: 22 | 23 | ## 在 Android Studio 中打开项目 24 | 25 | ::: warning 26 | 如果想要使用 Android Studio 直接从项目导出的文件夹打开，请新建游戏时填入**英文**，如果游戏文件夹名不是英文，请在更多菜单中重命名为英文或者打开 `WebGAL_Terre\public\games` 修改你的游戏名，并保证项目的文件路径中不会出现英文以外的字符，否则会报错 27 | ::: 28 | 29 | ::: tabs#android 30 | 31 | @tab WebGAL Terre 32 | 33 | 在编辑器顶栏修改游戏配置中的 `游戏标题` 、 `游戏包名` 和 `游戏图标`。 34 | 游戏包名是你的网站域名反写，如果没有域名可以考虑使用开发者加游戏名的组合，比如 `webgaldev.mygame` 这种形式，**必须**使用**英文**。 35 | 36 | 在编辑器右上角选择导出为安卓项目文件，系统会自动打开文件夹。 37 | 38 | 打开 android studio 选择刚刚导出的 `android` 目录，等待依赖下载完毕。 39 | 40 | ![在 Android Studio 中打开项目](open-in-android-studio.jpg) 41 | 42 | @tab 源代码 43 | 44 | 下载并解压 [项目模板](https://github.com/nini22P/WebGAL-Android)，将文件夹改名（切记必须使用英文）。 45 | 打开 `项目文件夹\app\src\main\assets\webgal` 文件夹，将你要打包的游戏放到这里。 46 | 47 | 游戏默认加载 `项目文件夹\app\src\main\assets\webgal\index.html`，如果想要自定义加载链接（比如在线链接），请修改 `项目文件夹\app\src\main\res\values\values.xml` 文件里面的 `load_url` 字段。 48 | 49 | 打开 Android Studio 打开项目。 50 | 修改 `项目文件夹\settings.gradle` 文件中的 `rootProject.name` 字段。 51 | 52 | ``` 53 | ... 54 | rootProject.name = "WebGAL" //修改项目标题 55 | ... 56 | ``` 57 | 58 | 修改 `项目文件夹\app\src\main\res\values\strings.xml` 中的标题信息。 59 | 60 | ``` xml 61 | 62 | WebGAL //修改游戏标题 63 | 64 | ``` 65 | 66 | 修改 `项目文件夹\app\build.gradle` 中的 `namespace` 和 `applicationId` 字段，格式为域名反写。 67 | 68 | ``` 69 | ... 70 | android { 71 | namespace 'com.openwebgal.demo' //修改包名 72 | ... 73 | defaultConfig { 74 | applicationId "com.openwebgal.demo" //修改包名 75 | ... 76 | ``` 77 | 78 | 点击菜单栏中的 `File -> Sync Project with Gradle files` 等待同步完毕。 79 | 80 | 修改 `项目文件夹\app\src\main\java\com\openwebgal\demo\MainActivity.kt` 首行的 `package` 字段为前面更改的目标包名。 81 | 82 | ``` kotlin 83 | package com.openwebgal.demo //修改包名 84 | ... 85 | ``` 86 | 87 | 上面这个字段修改后会报错，这时候点击刚刚修改的包名，然后点击“黄色灯泡”选择 `Move file to '目标包名'`，再将原本包名文件夹删掉。 88 | 89 | 点击菜单栏中的 `File -> New -> Image Asset` 修改游戏图标，注意图标分为前后两层。 90 | 91 | ![创建图标](create-icons.jpg) 92 | 93 | ::: 94 | 95 | ## 调试运行 96 | 97 | 打开安卓手机的 USB 调试并连接电脑，点击上方工具栏设备标题旁的运行图标后在手机上运行。 98 | 99 | ![在设备上运行](run-app.jpg) 100 | 101 | ## 编译 APK 102 | 103 | 点击菜单栏中 `Build -> Generate Signed Bundle or APK` ，在弹出的菜单中选择 `APK`。 104 | 105 | 根据提示创建或者选择密钥。 106 | 107 | ![创建或者选择密钥](keystore.jpg) 108 | 109 | 选择 `release` 后点击 `Create` 等待编译完毕。 110 | 111 | ![选择编译变体](build.jpg) 112 | 113 | ![编译完毕](finsh.jpg) 114 | 115 | ## 视频教程 116 | 117 | [使用 Android Studio 打包 WebGAL 游戏到 Android 平台](https://www.bilibili.com/video/BV1m24y1J7ct/) 118 | 119 | ## 兼容性以及解决方案 120 | 121 | 目前支持最低版本是安卓 5.0，并依赖于系统预装的 Android System WebView, 如果您的设备在点击首屏后黑屏或者有其他问题，请尝试以下任意一种方案： 122 | 123 | * 进入 Play 商店更新 [Android System WebView](https://play.google.com/store/apps/details?id=com.google.android.webview) 124 | * 手动下载 [Android System WebView](https://www.apkmirror.com/apk/google-inc/android-system-webview/) 进行更新 125 | * 如果是华为安卓设备，可以尝试下载安装 [Huawei WebView](https://www.apkmirror.com/apk/huawei/huawei-webview-2/) 126 | -------------------------------------------------------------------------------- /src/webgal-script/dialogue.md: -------------------------------------------------------------------------------- 1 | # 对话 2 | 3 | ::: warning 4 | 每条对话的冒号、分号应当为英文字符！ 5 | ::: 6 | 7 | **编写角色对话的方式非常简单，且与自然语言几乎无异。** 8 | 9 | ::: info 10 | 在字体为中和大时，文本框显示2行，而字体为小时，显示3行。 11 | ::: 12 | 13 | ## 基本角色对话 14 | 15 | 首先，使用记事本或 VS Code 、sublime 等文本编辑器，打开游戏资源目录下 `scene` 文件夹中的 `start.txt`，然后你就可以开始编写你的第一条对话了。 16 | 17 | 编写角色对话的方法非常简单，你只需要输入 `角色:对话;` 18 | 19 | 示例： 20 | 21 | ``` ws 22 | 雪之下雪乃:请用茶; 23 | 由比滨:啊，谢谢; 24 | 小町:谢谢雪乃姐！; 25 | 一色:谢谢学姐。; 26 | ``` 27 | 28 | 在每条对话/剧本后，使用分号作为结束。（如果不写分号有时候也行，但是作者还是建议加上分号以防止 bug）。 29 | 30 | ## 连续对话 31 | 32 | 如果你的多条对话没有改变角色名称，你可以使用连续对话，而可以省略角色名称，再在你需要的时候使用： 33 | 34 | ``` ws 35 | 雪之下雪乃:你到得真早; 36 | ; // 此时，对话的角色名称仍然是 “雪之下雪乃” 37 | 对不起，等很久了吗？; 38 | 比企谷八幡:刚到而已; 39 | ``` 40 | 41 | ## 旁白 42 | 43 | 如果你想要创建没有角色名称的旁白对话，请在冒号前留空（但不能省去冒号）： 44 | 45 | ``` ws 46 | :这是一句旁白; 47 | ``` 48 | 49 | ## 黑屏文字 50 | 51 | 在许多游戏中，会以黑屏显示一些文字，用来引入主题或表现角色的心理活动。你可以使用 intro 命令来演出独白： 52 | 53 | ``` ws 54 | intro:回忆不需要适合的剧本，|反正一说出口，|都成了戏言。; 55 | ``` 56 | 57 | 独白的分拆以分隔符(|)来分割，也就是说，每一个 | 代表一个换行。在实际演出中，上面的文字会变成： 58 | 59 | ``` ws 60 | 回忆不需要适合的剧本， 61 | 反正一说出口， 62 | 都成了戏言。 63 | ``` 64 | 65 | 如果你想要在独白结束后保持独白界面，而不是继续游戏流程，请使用 ` -hold` 参数 66 | 67 | ``` ws 68 | intro:回忆不需要适合的剧本，|反正一说出口，|都成了戏言。 -hold; 69 | ``` 70 | 71 | ## 获取用户输入 72 | 73 | 使用`getUserInput` 指令来获取用户输入，并写入变量，例如： 74 | 75 | ``` 76 | getUserInput:name -title=如何称呼你 -buttonText=确认; 将用户输入写入 name 变量中 77 | ``` 78 | 79 | 其中，`title` 参数是提示的文本，`buttonText` 是确认按钮的文本 80 | 81 | ## 变量插值 82 | 83 | 可以在语句中使用 `{}` 语法来进行变量插值，将某个变量传入语句中，例如： 84 | 85 | ``` 86 | WebGAL:很高兴遇见你，{name}！ 87 | ``` 88 | 89 | 变量插值也适用于人物名称，例如： 90 | 91 | ``` 92 | {name}:我也最喜欢 WebGAL 了！; 93 | ``` 94 | 95 | ## 注音 96 | 97 | 在对话文本中注音是日语游戏中的一种很常见的演出效果。因为日语中经常会出现一些写法和读法不一致的词语。 98 | 99 | 注音的语法是 `[要注音的词](注音)` 100 | 101 | 示例： 102 | 103 | ``` 104 | 『[笑顔](えがお)』なんて、『[笑う](わらう)』なんて、[誰](だれ)でも[出来](でき)るもん…！ 105 | ``` 106 | 107 | ## 文本拓展语法 108 | 109 | 在 WebGAL 4.5.3 中，加入了“文本拓展语法”功能。该语法可以为部分文字添加文本样式。 110 | 111 | 文本拓展语法是对某段特定文本的增强。被[]包裹的，且后面跟随着()作为文本增强描述的文本是符合文本拓展语法定义的文本。 112 | 113 | 简单来说，形如以下形式： 114 | 115 | ``` 116 | WebGAL:[文本](style-alltext=font-style:italic\;font-size:80%\; style=color:#66327C\; ruby=wen ben) 117 | ``` 118 | 这代表这段文本的字体大小是偏小的，并应用了斜体，颜色为 #66327C，并具有注音。 119 | 120 | 对于文本拓展语法中的不同参数，使用空格分开，并且形式总是 `argk=argv` 这样的形式 121 | 122 | 特别需要注意的是，由于 ; 是 WebGAL 的注释语法，所以在文本拓展语法中应用 ; 需要加 \ 转义，成为 \; 123 | 124 | ### 不同参数对应的样式作用范围 125 | 126 | ![text-enhance](text-enhance.png) 127 | 128 | 在先前的示例语法中，注意到，有两个不同的参数可以为文本定义样式：`style` 和 `style-alltext`。 129 | 130 | 为文本样式区分作用域，是因为 WebGAL 为了为文本提供更好的描边效果，将一个字分为了三层——文本、描边和占位。 131 | 132 | 文本是最上层的部分，也是主要部分。描边在文本下方，被文本覆盖，用于提供白色描边且不至于破坏文字的内部形状。最下层是提供定位的透明占位符。 133 | 134 | 简而言之，如果你只需要修改文本颜色，只需要使用 `style` 参数。如果你想要应用斜体、文本大小、内外边距等效果，你则需要同时为 `style-alltext` 设置效果。 135 | 136 | **特别注意：由于4.5.3 版本中的一个 bug，目前不能只应用 style-alltext 参数，因为只有检测到 style= 这样的语法，才会启动文本拓展语法** 137 | 138 | ### 与注音的兼容性 139 | 140 | 为了兼容先前的语法，如果没有识别到 `style=` 这样的语法，则我们会将 `()[]` 语法视为注音。 141 | 142 | 如果使用了新的文本拓展语法，注音则写在 `ruby=` 参数里，上面的示例也说明了这一点。 143 | 144 | ## 关闭文本框 145 | 146 | 有时候，为了一些特殊的演出效果，可能你希望临时关闭文本框，所以你可以使用以下指令来关闭文本框： 147 | 148 | ``` ws 149 | setTextbox:hide; // 关闭文本框 150 | ``` 151 | 152 | 当 `setTextbox` 指令的值为 `hide` 时，会关闭文本框，且用户无法以任何方式打开。如果想要重新显示文本框，请再次调用此命令，并输入除`hide`以外的任意值。 153 | 154 | ``` ws 155 | setTextbox:on; // 可以是除 hide 以外的任意值。 156 | ``` 157 | 158 | ## 结束游戏并返回到标题 159 | 160 | 如果你想要在剧情结束后结束游戏并返回到标题，请使用： 161 | 162 | ``` ws 163 | end; 164 | ``` 165 | 166 | 这样，就可以使游戏返回标题界面。 167 | 168 | ## 电影模式（测试功能） 169 | 170 | 使用 `filmMode:enable;` 来开启电影模式。 171 | 使用 `filmMode:none;` 来关闭电影模式。 172 | -------------------------------------------------------------------------------- /src/ja/developers/joinus.md: -------------------------------------------------------------------------------- 1 | # WebGAL の未来を一緒に築きましょう 2 | 3 | WebGAL は、ウェブ上で動作するビジュアルノベル/ギャルゲーエンジンです。Web プラットフォームの強力なクロスプラットフォームの利点を活用して、WebGAL はブラウザを実行できるほぼすべてのデバイスで実行できます。2 年以上の反復を経て、今日の WebGAL の機能はますます豊富になり、その安定性も向上しています。WebGAL は現在、ビジュアルノベルタイプのゲームの制作に広く使用されており、その使いやすく効率的なエディターにより、プログラミングの経験がなくても、ゲーム制作者は簡単に独自のゲーム作品を開発できます。 4 | 5 | 現在、ユーザーグループの拡大に伴い、新機能の要求と障害報告が絶えず寄せられています。既存の人員では、このようなユーザー数の需要を支えることができません。そのため、シンプルで使いやすく強力なエンジンと制作ツールを作成することでこのゲームタイプの制作を普及させ、ビジュアルノベル/ギャルゲーを活性化させることを目指す、能力があり意欲的な仲間が参加して、WebGAL の未来を一緒に築いてくれることを願っています。 6 | 7 | ## WebGAL の理念 8 | 9 | 才能ある人に使いやすいツールを与えれば、傑作を生み出すことができます。脚本執筆、絵画、その他の芸術分野に従事する人にとって、ソフトウェア開発は得意分野ではありません。しかし、彼らは創造性があり、理想的な作品を創作することに情熱を注いでいます。WebGAL の理念は、開発の敷居をできるだけ低くし、プログラミングの基礎知識の有無にかかわらず、誰もが自分のゲームを作成できるようにすることです。 10 | 11 | ## 特別な説明 12 | 13 | WebGAL はオープンソースプロジェクトであるため、募集するのは実際には「貢献者」であり、実際の仕事は提供しません。 14 | 15 | ## 連絡先 16 | 17 | 参加したいターゲットの役割と基本的な自己紹介（現実の生活における名前や勤務先など、本人を特定できる情報は **記載しないでください**）をメールで送信してください。 18 | 19 | contact@openwebgal.com （WebGAL の公共メールボックス。返信が遅れる場合があります）または 20 | 21 | Mahiru_@outlook.com （プロジェクト担当者の個人メールボックス。返信が速いです）または 22 | 23 | まず WebGAL 交流グループ（QQ グループ: 709293432）に参加して、ユーザーと交流してください。ここでは、WebGAL の現在の活発な状況とユーザーのニーズを知ることができます。 24 | 25 | ## 募集要項 26 | 27 | ### Web フロントエンド開発エンジニア 28 | 29 | #### 目標 30 | 31 | WebGAL のより強力な機能を開発し、WebGAL エディターの使いやすさを向上させ、WebGAL エコシステムの繁栄を促進することが目標です。 32 | 33 | #### 基本要件 34 | 35 | Web フロントエンド開発のツールとプロセスに精通しており、React フレームワークの使用に慣れていること。 36 | 37 | #### 追加要件 38 | 39 | WebGAL は React を使用してユーザーインターフェイスを構築し、Pixi を使用してゲームステージを構築しています。そのため、Pixi を使用して 2D ゲームを開発した経験があれば、それは私たちにとって大きな助けとなります。それ以外に、革新性とソフトウェアエンジニアリング能力も私たちにとって非常に役立つ能力です。前例のない特殊なニーズを解決し、効率的で安定したソフトウェアアーキテクチャを構築するために、革新的な人材が必要です。 40 | 41 | WebGAL エンジンカーネルは、ステートマシンによって駆動されるステージステートモデルです。私たちは次世代カーネルの準備をしています。このカーネルは状態演算技術を使用しており、リアルタイムプレビューの効率を改善し、他のエンジンでは実現が難しい高度な機能である前方ジャンプを実現できる可能性があります。RFC を参照して、新しいカーネルに対する構想を確認できます。[RFC1: WebGAL 5 フロー制御と演出呼び出しの草案](https://openwebgal.com/zh-cn/blog/rfc1/) 42 | 43 | ### Node バックエンド開発エンジニア 44 | 45 | #### 目標 46 | 47 | WebGAL エディターのバックエンドは Node によって駆動されており、NestJS を使用して構築されています。私たちの目標は、安定した高性能のクロスプラットフォームエディターバックエンドを構築し、ファイルシステムアクセス、静的リソースのデプロイ、コードヒントなどの機能を提供し、エディターフロントエンドに高品質のサービスを提供することです。 48 | 49 | #### 基本要件 50 | 51 | TypeScript 開発と Nest フレームワークに精通しており、Node を使用してクロスプラットフォームバックエンドサービスを開発する関連経験があること。 52 | 53 | #### 追加要件 54 | 55 | Vscode-LanguageServer を使用してコードヒントを提供しています。Language Server の構築に従事した経験があれば、それは私たちにとって大きな助けとなります。 56 | 57 | ### 翻訳 58 | 59 | #### 目標 60 | 61 | WebGAL エンジン、エディター、公式ウェブサイトは現在、中国語、英語、日本語の 3 つの言語を提供しています。しかし、機能の高速な反復に伴い、英語と日本語の翻訳は遅れがちです。私たちの目標は、これらの言語のドキュメントとグラフィカルユーザーインターフェイスを中国語のメインバージョンと同期させることです。 62 | 63 | #### 基本要件 64 | 65 | 英語/日本語の優れた文章表現能力を持ち、高品質の翻訳テキストを提供し、他の言語のユーザーに優れたエクスペリエンスを提供できること。 66 | 67 | 英語の基本要件: CET 6 / IELTS 6+ / TOEFL 80+ 68 | 日本語の基本要件: N2 69 | 70 | ### グラフィカルユーザーインターフェイス（GUI）デザイナー 71 | 72 | #### 目標 73 | 74 | WebGAL は、ユーザーに良好な使用体験を提供するために、見栄えの良いグラフィカルユーザーインターフェイスの構築に取り組んでいます。ほとんどのユーザーはプログラミングをしないため、エンジンのデフォルトの UI は十分に美観でなければ、より多くのユーザーを引き付けることはできません。私たちの目標は、美しくてエレガントなエンジンとエディターのインターフェイスを構築し、WebGAL の製品力を向上させることです。 75 | 76 | #### 基本要件 77 | 78 | Figma を使用してグラフィカルユーザーインターフェイスを設計することに熟練しており、優れた美的センスと一定の UX（ユーザーエクスペリエンス）設計レベルを備えていること。私たちに連絡する前に、あなたの専門レベルを示すことができる作品集を用意してください。 79 | 80 | ### 美術 81 | 82 | #### 目標 83 | 84 | WebGAL の機能をオンラインで展示し、WebGAL エディターでいくつかのサンプル素材を提供するために、ユーザーが製品を使用する気を惹く高品質の美術素材が必要です。 85 | 86 | #### 基本要件 87 | 88 | 二次元絵画に精通しており、WebGAL の要件を満たす二次元キャラクター（看板娘）または二次元スタイルの背景画像を作成できること。 89 | 90 | #### 特別な説明 91 | 92 | これらの素材は WebGAL の公共素材ライブラリの素材となり、WebGAL のユーザーに無料で使用されます。WebGAL はオープンソースソフトウェアであるため、これらの素材もすべてオープンソースになります。オープンソースとは、ユーザーが無料で商用利用および再配布できることを意味しますので、ご了承ください。 -------------------------------------------------------------------------------- /src/win7.md: -------------------------------------------------------------------------------- 1 | # Windows 7 使用可视化编辑器开始制作的方法 2 | 3 | ## 前置条件 4 | 5 | ### 安装 14~16.3 版本的 node.js 6 | 7 | 1. 打开 [node.js 官网 node v16.3.0 下载地址](https://nodejs.org/dist/v16.3.0/) 下载安装包。 8 | 9 | 镜像站: 10 | 11 | 1. 根据自己的系统选择合适的安装包， 12 | 13 | 注意在 *win-x64*, *win-x86* 两个文件夹中选择，不要下载其它文件。 14 | 15 | 2. 选择对应版本文件夹后下载里面的 *node.exe*。 16 | 17 | 2. 设置绕过系统检查的环境变量 18 | 19 | 1. 右键 *我的电脑 / 计算机* ，在菜单中点击 *属性*。 20 | 2. 在左侧面板中打开 *高级系统设置* 。 21 | 3. 点击右下 *环境变量* 。 22 | 4. 在系统变量中添加变量 *NODE_SKIP_PLATFORM_CHECK*，值为 *1* 。 23 | 5. 保存。 24 | 25 | 3. 运行 node.js 的安装包 (刚才下载的 *node.exe*)，安装 node.js。 26 | 27 | --- 28 | 29 | ## 方法一：使用 Terre Win7 支持补丁 30 | 31 | ### 下载支持 Win7 的 Terre 补丁 32 | 33 | > 下载地址： 34 | > 35 | > [GitHub（第三方补丁支持）](https://github.com/hshqwq/WebGAL_Terre/releases) 36 | > 37 | > [蓝奏云（第三方补丁支持）](https://wwh.lanzoue.com/i2xqa0uy2fuh) 38 | 39 | ### 下载可视化编辑器 40 | 41 | 下载补丁对应版本的[可视化编辑器](./guide#方法1（推荐）：使用 WebGAL 编辑器)并解压。 42 | 对应版本请查看补丁中诸如 *使用说明, README* 等文件, 或查看 *package.json* 中 *version* 对应的值. 43 | 44 | ### 使用补丁 45 | 46 | 解压补丁，并将补丁中文件复制到可视化编辑器的根目录下。 47 | 48 | ### 安装依赖 49 | 50 | 运行 *Install_Dependencies.bat* 安装依赖，出现 *node_modules* 文件夹即代表成功。 51 | 52 | 手动方法： 53 | 54 | 1. 打开任意终端。 55 | 56 | 2. 打开编辑器所在目录。 57 | 58 | 3. 运行以下命令： 59 | 60 | ```bash 61 | npm i 62 | # 或（如果你有安装yarn） 63 | yarn 64 | ``` 65 | 66 | ### 启动可视化编辑器 67 | 68 | 运行 *WebGal_Terre-Win7.bat* 启动编辑器。 69 | 70 | 手动方法： 71 | 72 | 1. 打开任意终端。 73 | 74 | 2. 打开编辑器所在目录。 75 | 76 | 3. 运行以下命令： 77 | 78 | ```bash 79 | node main.js 80 | ``` 81 | 82 | ::: tip 83 | 84 | 如果电脑装过低于 14 版本的 node 请先切换为 14~16.3 版本的 node。 85 | 86 | ::: 87 | 88 | --- 89 | 90 | ## 方法二：从源码编译（推荐有一定编程经验的人采取） 91 | 92 | ### 获取源代码 93 | 94 | 克隆 [WebGAL_Terre](https://github.com/OpenWebGAL/WebGAL_Terre) 仓库。 95 | 96 | ``` shell 97 | git clone https://github.com/OpenWebGAL/WebGAL_Terre.git 98 | ``` 99 | 100 | ### 安装包管理器 (可选) 101 | 102 | 安装 yarn （可选，推荐） 103 | 104 | ``` shell 105 | npm i -g yarn 106 | ``` 107 | 108 | ### 编译可视化编辑器 109 | 110 | #### 方式一: 编译整个可视化编辑器 111 | 112 | 1. 安装依赖 113 | 114 | 在项目根目录执行依赖安装。 115 | 116 | ```shell 117 | yarn 118 | ``` 119 | 120 | 2. 按照 *release.sh* 中命令打包除 *Terre* 以外的 packages。 121 | 122 | 3. 手动编译 *Terre*，参考 [*仅编译 Terre*](./#方式二: 仅编译 *Terre*)。 123 | 124 | #### 方式二: 仅编译 *Terre2* 125 | 126 | 1. 打开 *packages/terre2* 。 127 | 128 | 2. 安装依赖 129 | 130 | ``` shell 131 | yarn 132 | ``` 133 | 134 | 3. 打包 *terre2* 135 | 136 | ``` shell 137 | yarn run build 138 | ``` 139 | 140 | 4. 删除 *dist* 目录下所有 *.d.ts* 结尾文件 (可选)。 141 | 142 | 5. 在 *dist* 中添加 *package.json* 文件，内容（注意填写相关信息）： 143 | 144 | ```json 145 | { 146 | "name": "webgal-terre-2-win7-server", 147 | "version": "版本号", 148 | "description": "", 149 | "private": true, 150 | "license": "MPL-2.0", 151 | "dependencies": { 152 | "@nestjs/common": "^8.0.0", 153 | "@nestjs/core": "^8.0.0", 154 | "@nestjs/platform-express": "^8.0.0", 155 | "@nestjs/serve-static": "^2.2.2", 156 | "open": "^8.4.0", 157 | "reflect-metadata": "^0.1.13", 158 | "rimraf": "^3.0.2", 159 | "rxjs": "^7.2.0", 160 | "vscode-languageserver": "^8.1.0", 161 | "ws": "^8.8.1" 162 | } 163 | } 164 | ``` 165 | 166 | 6. 复制 `dist`目录到已编译的编辑器目录下。 167 | 168 | ### 运行可视化编辑器 169 | 170 | 1. 在可视化编辑器目录下安装依赖。 171 | 172 | ``` shell 173 | npm i 174 | # 或（推荐yarn） 175 | yarn 176 | ``` 177 | 178 | 2. 运行 `node main.js` 启动可视化编辑器。可根据需求写成 bat, sh 脚本。 179 | -------------------------------------------------------------------------------- /src/ja/webgal-script/scenes.md: -------------------------------------------------------------------------------- 1 | # シーンと分岐 2 | 3 | ビジュアルノベルでは、章、シーン、分岐の選択は欠かせないため、WebGALでもシーンのジャンプと分岐の選択がサポートされています。 4 | 5 | スクリプトを複数のtxtドキュメントに分割し、簡単なステートメントを使用して現在実行中のスクリプトを切り替えることができます。 6 | 7 | ::: warning 8 | シーンのジャンプ、分岐の選択、またはシーンの呼び出しの後、ステージはクリアされません。これは、前のシーンで適用された背景音楽、立ち絵、背景画像などの効果が次のシーンに継承されることを意味します。 9 | 10 | WebGAL Terreビジュアルエディタを使用している場合は、エディタは単一のシーンをプレビューするときに前のシーンがどのような効果をもたらすかを考慮しないため、特に注意する必要があります。そのため、プレビュー効果と実際のゲームの実行効果が異なる場合があります。シーンのジャンプ前のステージのクリーンアップ作業を適切に処理することを検討する必要があります。 11 | ::: 12 | 13 | ## シーンのジャンプ 14 | 15 | 現在、2つの章のスクリプト、つまり`Chapter-1.txt`と`Chapter-2.txt`を作成したとします。`Chapter-1.txt`の実行が終了したら、`Chapter-2.txt`に対応するシーンにジャンプするには、次のステートメントを使用します。 16 | 17 | ``` ws 18 | changeScene:Chapter-2.txt; 19 | ``` 20 | 21 | 例： 22 | 23 | ``` ws 24 | (Chapter-1.txt) 25 | ...... 26 | ...... 27 | ; // ここからChapter-2.txtの内容を実行します 28 | changeScene:Chapter-2.txt; 29 | ...... 30 | ...... 31 | (Chapter-2.txt) 32 | ...... 33 | ``` 34 | 35 | このコマンドを実行すると、ゲームシーンが切り替わり、その後のプロットの展開が新しいシーンのスクリプトに従って実行されます。新しいスクリプトは、次のマウスクリック後に実行されます。 36 | 37 | ## シーンの呼び出し 38 | 39 | シーン内で別のシーンを呼び出す必要がある場合は、`callScene`を使用できます。呼び出されたシーンの実行が完了すると、元のシーンに戻ります。 40 | 41 | ステートメント： 42 | 43 | ``` ws 44 | callScene:Chapter-2.txt; 45 | ``` 46 | 47 | 例： 48 | 49 | ``` ws 50 | (Chapter-1.txt) 51 | ...... 52 | ...... 53 | callScene:Chapter-2.txt; 54 | ; // ここからChapter-2.txtの内容を実行します 55 | ...... 56 | ...... 57 | (Chapter-2.txt) 58 | ...... 59 | ...... 60 | (Chapter-2.txtの実行が完了) 61 | ; // 親シーンに戻り、親シーンのステートメントの実行を続行します 62 | ...... 63 | ``` 64 | 65 | ## 分岐の選択 66 | 67 | スクリプトに分岐オプションがあり、異なるオプションを選択して異なる章に移動したい場合は、`choose`を使用します。 68 | 69 | `選択肢のテキスト:章ファイル名`を使用して選択肢を定義します。異なる選択肢を区切るには`|`を使用します。例を以下に示します。 70 | 71 | ``` ws 72 | choose:彼女を呼び止める:Chapter-2.txt|家に帰る:Chapter-3.txt; 73 | ``` 74 | 75 | 選択肢のテキストと、選択肢を選択した後に移動するスクリプト名を1対1で対応付けるだけで、分岐選択機能を実装できます。 76 | 77 | ### 条件付き表示と選択 78 | 79 | 変数に応じて、オプションを条件付きで表示したり、ユーザーがオプションをクリックできるようにしたりすることもできます。構文は次のとおりです。 80 | 81 | ```ws 82 | choose:(showConditionVar>1)[enableConditionVar>2]->彼女に声を掛ける:Chapter-2.txt|家に帰る:Chapter-3.txt; 83 | ``` 84 | 85 | ここでは、showConditionVar>1 の場合にのみ最初のオプションが表示され、enableConditionVar>2 の場合にのみユーザーがクリックできます。 86 | 87 | ## ラベルジャンプ 88 | 89 | 分岐を作成したいが、そのために新しいTXTファイルを作成するのは面倒だと感じる場合は、同じファイル内で分岐とジャンプステートメントを作成する方法を試すことができます。 90 | 91 | ::: warning 92 | 分岐が長い場合は、この方法を使用しないことをお勧めします。TXTの行数は長すぎないようにしてください。そうしないと、読み込みが遅くなったり、応答が遅くなったりするなどのパフォーマンスの問題が発生する可能性があります。 93 | ::: 94 | 95 | ### ラベル（`label`）の作成 96 | 97 | ``` ws 98 | ...... 99 | jumpLabel:label_1; // label_1にジャンプします 100 | ...... 101 | ...... 102 | label:label_1; // label_1という名前のラベルを作成します 103 | ...... 104 | ``` 105 | 106 | 簡単に言うと、`jumpLabel`は`goto`ステートメントに似ており、スクリプトをシーン（TXTファイル）内の任意の位置にすぐにジャンプさせることができます。この位置は`label`を使用して作成する必要があります。 107 | 108 | `jumpLabel`をどこでもドアと例えると、このどこでもドアの終点は`label`のある場所です。 109 | 110 | ### 選択肢の追加 111 | 112 | 上記の基本事項がわかれば、`choose`を使用して分岐を使用して`label`のある場所にジャンプできます。 113 | 114 | ``` ws 115 | ...... 116 | choose:分岐1:label_1|分岐2:label_2; 117 | label:label_1; // label_1という名前のラベルを作成します 118 | ...... 119 | ...... 120 | jumpLabel:end; // endにジャンプします 121 | label:label_2; // label_2という名前のラベルを作成します 122 | ...... 123 | ...... 124 | jumpLabel:end; // endにジャンプします 125 | label:end; // endという名前のラベルを作成します 126 | ...... 127 | ``` 128 | 129 | 各分岐の最後に、希望する場所にジャンプするために`jumpLabel`を使用する必要があります。プログラムは線形に実行されるため、分岐の最後にジャンプしない場合、プログラムは次の行に実行を続行します。例えば、以下のような場合です。 130 | 131 | ``` ws 132 | ...... 133 | choose:分岐1:label_1|分岐2:label_2; 134 | label:label_1; // label_1という名前のラベルを作成します 135 | ...... 136 | ...... 137 | label:label_2; // label_2という名前のラベルを作成します 138 | ...... 139 | ``` 140 | 141 | このスクリプトでは、`分岐2`を選択した場合、すべて問題ないように見えます。しかし、`分岐1`を選択すると、`分岐1`の実行後に`分岐2`が実行されることに驚かれるでしょう。これは、プログラムが順番に次の行を実行し続け、分岐の終了後にジャンプする場所を指定していないためです。 -------------------------------------------------------------------------------- /src/webgal-script/variable.md: -------------------------------------------------------------------------------- 1 | # 变量 2 | 3 | ::: warning 4 | 在你弄清楚如何使用场景跳转和分支跳转之前，请不要轻易使用变量系统，这可能会令你感到迷惑！ 5 | ::: 6 | 7 | ## 使用变量 8 | 9 | 设置变量： 10 | 11 | ``` ws 12 | setVar:a=1; // 可以设置数字 13 | setVar:a=true // 可以设置布尔值 14 | setVar:a=人物名称 // 可以设置字符串 15 | ``` 16 | 17 | 设置随机数，请使用 `random()` 18 | 19 | ```ws 20 | setVar:a=random(); 21 | ``` 22 | 23 | `random([lower=0], [upper=1], [floating])` 随机数是一个**内置函数**，它支持多个传参： 24 | 25 | **参数**： 26 | 1. [lower=0] (number): 下限。 27 | 2. [upper=1] (number): 上限。 28 | 3. [floating] (boolean): 指定是否返回浮点数。 29 | 30 | 不写参数，它会生成一个是一个0-1区间的浮点数 31 | ```ws 32 | setVar:a=random(); 33 | ``` 34 | 35 | 当然，我们也可以指定**范围**。比如，你想要5-10之间的随机数，你可以写成： 36 | ```ws 37 | setVar:a=random(5,10); 38 | ``` 39 | 40 | 当然你想要它使用范围生成的数值也有小数，那么可指定第三个参数： 41 | ```ws 42 | setVar:a=random(5,10,true); # 将会生成5-10之间的浮点数 43 | ``` 44 | 45 | 如果先前你定义过其他变量，也可以在设置变量时使用。 46 | 47 | ``` ws 48 | setVar:a=1; 49 | setVar:b=a+1; 50 | ``` 51 | 52 | ## 条件执行 53 | 54 | 在语句后加上 `-when=(condition)` 参数，可以根据条件判断当前语句是否要执行。 55 | 56 | 例如： 57 | 58 | ``` ws 59 | setVar:a=1; 60 | ; // 当 a 大于 1 时跳转到场景 1 61 | changeScene:1.txt -when=a>1; 62 | ; // 只有 a 为 1 时才跳转，注意相等运算符是 == 63 | changeScene:2.txt -when=a==1; 64 | ; // 如果 a 小于 1，那么上面的语句不执行，自然就执行这一句了 65 | changeScene:3.txt; 66 | 67 | ``` 68 | 69 | ::: tip 70 | `=` 是赋值符号，不可用于条件判断，`==`是相等运算符。 71 | ::: 72 | 73 | 任何语句都可以加上 `-when` 参数来控制是否执行。通过组合 `-when` 参数和 `jumpLabel` `callScene` `changeScene`，你可以实现带条件判断的流程控制。 74 | 75 | ## 获取用户输入 76 | 77 | 使用`getUserInput` 指令来获取用户输入，例如： 78 | 79 | ``` 80 | getUserInput:name -title=如何称呼你 -buttonText=确认; 将用户输入写入 name 变量中 81 | ``` 82 | 83 | 其中，`title` 参数是提示的文本，`buttonText` 是确认按钮的文本 84 | 85 | ## 变量插值 86 | 87 | 可以在语句中使用 `{}` 语法来进行变量插值，将某个变量传入语句中，例如： 88 | 89 | ``` 90 | setVar:name=WebGAL; 91 | setVar:engine=WebGAL; 92 | {name}:欢迎使用 {engine}！这是一款全新的网页端视觉小说引擎。; 93 | ``` 94 | 95 | ## 长效变量（全局变量） 96 | 97 | WebGAL 的普通变量是跟随存档的，也就是说，任何变量只存在于当前的游戏场景中，只有存档才能将其保存下来，读档将其恢复。 98 | 99 | 为了解决可能存在的作者希望设置多周目的问题，提供长效（全局）变量，一旦设置，则在整个游戏中生效，除非用户清除全部数据。 100 | 101 | 加上 `-global` 参数可以设置长效（全局）变量 102 | 103 | ```ws 104 | setVar:a=1 -global; 105 | ``` 106 | 107 | 这样就设置了一个不随存档读取而改变的变量。 108 | 109 | 使用例： 110 | 111 | ```ws 112 | jumpLabel:turn-2 -when=a>0; 113 | setVar:a=1 -global; 114 | 一周目; 115 | changeScene:一周目剧情.txt; 116 | label:turn-2; 117 | 二周目; 118 | changeScene:二周目剧情.txt; 119 | ``` 120 | 121 | ## 高级用法（`>=4.5.4`） 122 | 使用内置变量进行更为高级的操作，如对配置变量进行修改，根据内置变量进行指定条件的逻辑运行等。 123 | 124 | WebGAL 目前内置变量域有两个：`stage`和`userData`。 125 | 126 | ::: tip 127 | `stage` 为**运行时内置变量**，`userData` 为**存档内置变量**。 128 | 129 | `stage` 可在 WebGAL 编辑器下面的`state`选项卡查看有哪些属性，`userData`则是可以在开发者工具中`indexedDB`查看。 130 | ::: 131 | 132 | 使用`$`可以访问他们，如获取BGM的值： 133 | 134 | ```ws 135 | setVar:a=($stage.bgm.volume); 136 | WebGAL:当前的BGM音量为{a}; 137 | ``` 138 | 139 | 当然，你也可以直接在对话中使用它： 140 | 141 | ```ws 142 | WebGAL:当前的BGM音量为{$stage.bgm.volume}; 143 | ``` 144 | 145 | ::: warning 146 | 获取**单值变量**时需要使用`括号`包裹，但进行数学运算时不需要。 147 | ::: 148 | 149 | 我们还可以访问`config.txt`中的全局变量： 150 | 151 | ```ws 152 | setVar:title=(Game_name); 153 | WebGAL:当前的游戏标题为{title}; 154 | ``` 155 | 156 | 修改也不例外，当要修改游戏标题为新游戏标题时，setVar的变量名称需要设置为我们将修改的变量名称 157 | 158 | 加`global`参数表示我们要修改的是配置变量： 159 | 160 | ```ws 161 | setVar:Game_name=新游戏标题 -global; 162 | WebGAL:当前的游戏标题为{Game_name}; 163 | ``` 164 | 165 | ::: warning 166 | 不加`global`则会赋值到游戏内变量，请注意何时使用`global`参数。 167 | ::: 168 | 169 | ::: tip 170 | 可以修改的原始配置变量`Title_img`、`Title_bgm`、`Game_name`、`Game_key`。 171 | 想要恢复则可以在游戏选项中使用`清空所有数据`即可恢复。 172 | ::: 173 | 174 | 当然，你也可以在`config.txt`中创建一个自定义配置变量，如 创建一个版本号： 175 | 176 | ```text 177 | Game_name:欢迎使用WebGAL！; 178 | Game_key:f60ad5725c1588; 179 | Title_img:WebGAL_New_Enter_Image.png; 180 | Title_bgm:s_Title.mp3; 181 | Textbox_theme:imss; 182 | ; 增加版本号 183 | version:1; 184 | ``` 185 | 186 | 那么我们就可以在脚本里面对它进行获取，修改等操作： 187 | 188 | ```ws 189 | setVar:v=(version); 190 | WebGAL:当前的版本号为{v}; 191 | setVar:version=version*2 -global; 192 | WebGAL:当前被修改的版本号为{version}; 193 | ``` 194 | 195 | ::: warning 196 | `config.txt`暂未做特殊符号的转义处理。 197 | ::: 198 | -------------------------------------------------------------------------------- /src/ja/publish/android/readme.md: -------------------------------------------------------------------------------- 1 | # Andoird 2 | 3 | WebGAL Terre 可視化編輯器をお勧めします。一键でアンドロイドプロジェクトファイルのエクスポートオプションを提供しています。 4 | 5 | ソースコードでプロジェクトを構築する場合は、ソースコードオプションに切り替えてください。 6 | 7 | ## 前期準備 8 | 9 | ::: tabs#android 10 | 11 | @tab WebGAL Terre 12 | 13 | * [Android Studio](https://developer.android.com/studio)をダウンロードしてインストールします。 14 | 15 | @tab ソースコード 16 | 17 | * [Android Studio](https://developer.android.com/studio)をダウンロードしてインストールします。 18 | * [WebGAL](https://github.com/OpenWebGAL/WebGAL)をWebウェブにコンパイルします。 19 | * [WebGAL Android プロジェクトテンプレート](https://github.com/nini22P/WebGAL-Android)をダウンロードします。 20 | 21 | ::: 22 | 23 | ## Android Studioでプロジェクトを開く 24 | 25 | ::: warning 26 | プロジェクトのエクスポートされたフォルダから直接Android Studioで開きたい場合は、ゲームを新規作成する際に**英語**を入力してください。ゲームフォルダ名が英語でない場合は、詳細メニューで英語に名前を変更するか、`WebGAL_Terre\public\games`を開いてゲーム名を変更し、プロジェクトのファイルパスに英語以外の文字が含まれないようにしてください。そうしないと、エラーが発生します。 27 | ::: 28 | 29 | ::: tabs#android 30 | 31 | @tab WebGAL Terre 32 | 33 | エディタのトップバーで、ゲーム設定の `ゲームタイトル`、`ゲームパッケージ名`、および `ゲームアイコン` を変更します。 34 | ゲームパッケージ名は、あなたのウェブサイトのドメインを逆にしたものです。ドメインがない場合は、デベロッパーとゲーム名を組み合わせたもの、例えば「webgaldev.mygame」のような形式を検討してください。**必ず****英語**を使用してください。 35 | 36 | エディタの右上にある「アンドロイドプロジェクトファイルにエクスポート」を選択すると、システムが自動的にフォルダを開きます。 37 | 38 | android studioを開き、エクスポートしたばかりの「android」ディレクトリを開き、依存関係のダウンロードが完了するまで待ちます。 39 | 40 | ![Android Studioでプロジェクトを開く](open-in-android-studio.jpg) 41 | 42 | @tab ソースコード 43 | 44 | [プロジェクトテンプレート](https://github.com/nini22P/WebGAL-Android)をダウンロードして解凍し、フォルダの名前を変更します（必ず英語を使用してください）。 45 | 「プロジェクトフォルダ\app\src\main\assets\webgal」フォルダを開き、パッケージ化するゲームをここに置きます。 46 | 47 | ゲームはデフォルトで「プロジェクトフォルダ\app\src\main\assets\webgal\index.html」を読み込みます。オンラインリンクなど、読み込みリンクをカスタマイズしたい場合は、「プロジェクトフォルダ\app\src\main\res\values\values.xml」ファイル内の「load_url」フィールドを変更してください。 48 | 49 | Android Studioを開いてプロジェクトを開きます。 50 | 「プロジェクトフォルダ\settings.gradle」ファイルの「rootProject.name」フィールドを変更します。 51 | 52 | ``` 53 | ... 54 | rootProject.name = "WebGAL" //プロジェクトタイトルを変更 55 | ... 56 | ``` 57 | 58 | 「プロジェクトフォルダ\app\src\main\res\values\strings.xml」のタイトル情報を変更します。 59 | 60 | ``` xml 61 | 62 | WebGAL //ゲームタイトルを変更 63 | 64 | ``` 65 | 66 | 「プロジェクトフォルダ\app\build.gradle」の「namespace」と「applicationId」フィールドを、ドメインを逆にした形式に変更します。 67 | 68 | ``` 69 | ... 70 | android { 71 | namespace 'com.openwebgal.demo' //パッケージ名を変更 72 | ... 73 | defaultConfig { 74 | applicationId "com.openwebgal.demo" //パッケージ名を変更 75 | ... 76 | ``` 77 | 78 | メニューバーの「ファイル -> Gradleファイルでプロジェクトを同期」をクリックして、同期が完了するまで待ちます。 79 | 80 | 「プロジェクトフォルダ\app\src\main\java\com\openwebgal\demo\MainActivity.kt」の最初の行の「package」フィールドを、前に変更したターゲットパッケージ名に変更します。 81 | 82 | ``` kotlin 83 | package com.openwebgal.demo //パッケージ名を変更 84 | ... 85 | ``` 86 | 87 | このフィールドを変更するとエラーが発生します。このとき、変更したばかりのパッケージ名をクリックして、「黄色い電球」をクリックし、「ファイルを「ターゲットパッケージ名」に移動」を選択し、元の「パッケージ名」フォルダを削除します。 88 | 89 | メニューバーの `File -> New -> Image Asset` をクリックしてゲームアイコンを変更します。アイコンは前後2層に分かれています。 90 | 91 | ![アイコンを作成する](create-icons.jpg) 92 | 93 | ::: 94 | 95 | ## デバッグ実行 96 | 97 | アンドロイド携帯のUSBデバッグをオンにしてパソコンに接続し、ツールバーの上にあるデバイスタイトルの横にある実行アイコンをクリックして携帯で実行します。 98 | 99 | ![デバイスで実行する](run-app.jpg) 100 | 101 | ## APKをコンパイルする 102 | 103 | メニューバーの「ビルド -> 署名付きバンドルまたはAPKを生成」をクリックし、ポップアップメニューで「APK」を選択します。 104 | 105 | プロンプトに従ってキーを作成または選択します。 106 | 107 | ![キーを作成または選択する](keystore.jpg) 108 | 109 | 「release」を選択して「作成」をクリックし、コンパイルが完了するまで待ちます。 110 | 111 | ![コンパイルバリアントを選択する](build.jpg) 112 | 113 | ![コンパイル完了](finsh.jpg) 114 | 115 | ## ビデオチュートリアル 116 | 117 | [Android Studioを使ってWebGALゲームをAndroidプラットフォームにパッケージする](https://www.bilibili.com/video/BV1m24y1J7ct/) 118 | 119 | ## 互換性と解決策 120 | 121 | サポートされている最小バージョンはAndroid 5.0で、システムにプリインストールされたAndroid System WebViewに依存しています。初回画面をクリックした後に黒い画面やその他の問題が発生した場合は、以下のいずれかの解決策を試してください。 122 | 123 | * Playストアにアクセスして、[Android System WebView](https://play.google.com/store/apps/details?id=com.google.android.webview)を更新します。 124 | * [Android System WebView](https://www.apkmirror.com/apk/google-inc/android-system-webview/) を手動でダウンロードして更新します。 125 | * HuaweiのAndroidデバイスを使用している場合は、[Huawei WebView](https://www.apkmirror.com/apk/huawei/huawei-webview-2/)をダウンロードしてインストールしてみてください。 126 | -------------------------------------------------------------------------------- /src/ja/win7.md: -------------------------------------------------------------------------------- 1 | # Windows 7 でビジュアルエディタを使って制作を始める方法 2 | 3 | ## 前提条件 4 | 5 | ### node.js の 14~16.3 バージョンをインストールする 6 | 7 | 1. [node.js 公式サイトの node v16.3.0 のダウンロードページ](https://nodejs.org/dist/v16.3.0/) を開き、インストーラーをダウンロードする。 8 | 9 | ミラーサイト: 10 | 11 | 1. 自分のシステムに合ったインストーラーを選択する。 12 | 13 | *win-x64*, *win-x86* の 2 つのフォルダから選択し、それ以外のファイルはダウンロードしないように注意する。 14 | 15 | 2. 対応するバージョンのフォルダを選択したら、その中の *node.exe* をダウンロードする。 16 | 17 | 2. システムチェックを回避する環境変数を設定する 18 | 19 | 1. *マイコンピュータ / コンピュータ* を右クリックし、メニューから *プロパティ* をクリックする。 20 | 2. 左側のペインで *システムの詳細設定* を開く。 21 | 3. 右下の *環境変数* をクリックする。 22 | 4. システム変数に *NODE_SKIP_PLATFORM_CHECK* という変数を追加し、値を *1* にする。 23 | 5. 保存する。 24 | 25 | 3. node.js のインストーラー（先ほどダウンロードした *node.exe*）を実行して、node.js をインストールする。 26 | 27 | --- 28 | 29 | ## 方法 1: Terre Win7 サポートパッチを使用する 30 | 31 | ### Win7 対応 Terre パッチをダウンロードする 32 | 33 | > ダウンロード先: 34 | > 35 | > [GitHub（サードパーティパッチサポート）](https://github.com/hshqwq/WebGAL_Terre/releases) 36 | > 37 | > [藍奏雲（サードパーティパッチサポート）](https://wwh.lanzoue.com/i2xqa0uy2fuh) 38 | 39 | ### ビジュアルエディタをダウンロードする 40 | 41 | パッチに対応するバージョンの[ビジュアルエディタ](./guide#方法1（推奨）：WebGALエディタを使用する)をダウンロードして解凍する。 42 | 対応するバージョンはパッチ内の *使用説明書, README* などのファイル、または *package.json* の *version* に対応する値を確認する。 43 | 44 | ### パッチを使用する 45 | 46 | パッチを解凍し、パッチ内のファイルをビジュアルエディタのルートディレクトリにコピーする。 47 | 48 | ### 依存関係をインストールする 49 | 50 | *Install_Dependencies.bat* を実行して依存関係をインストールする。*node_modules* フォルダが出現すれば成功。 51 | 52 | 手動で行う方法: 53 | 54 | 1. 任意のターミナルを開く。 55 | 56 | 2. エディタのあるディレクトリを開く。 57 | 58 | 3. 以下のコマンドを実行する。 59 | 60 | ```bash 61 | npm i 62 | # あるいは（yarn をインストールしている場合） 63 | yarn 64 | ``` 65 | 66 | ### ビジュアルエディタを起動する 67 | 68 | *WebGal_Terre-Win7.bat* を実行してエディタを起動する。 69 | 70 | 手動で行う方法: 71 | 72 | 1. 任意のターミナルを開く。 73 | 74 | 2. エディタのあるディレクトリを開く。 75 | 76 | 3. 以下のコマンドを実行する。 77 | 78 | ```bash 79 | node main.js 80 | ``` 81 | 82 | ::: tip 83 | 84 | コンピュータに 14 よりも低いバージョンの node がインストールされている場合は、まず 14~16.3 バージョンの node に切り替える。 85 | 86 | ::: 87 | 88 | --- 89 | 90 | ## 方法 2: ソースコードからコンパイルする（ある程度のプログラミング経験がある人におすすめ） 91 | 92 | ### ソースコードを取得する 93 | 94 | [WebGAL_Terre](https://github.com/OpenWebGAL/WebGAL_Terre) リポジトリをクローンする。 95 | 96 | ``` shell 97 | git clone https://github.com/OpenWebGAL/WebGAL_Terre.git 98 | ``` 99 | 100 | ### パッケージマネージャー（任意） 101 | 102 | yarn をインストールする（任意だが推奨）。 103 | 104 | ``` shell 105 | npm i -g yarn 106 | ``` 107 | 108 | ### ビジュアルエディタをコンパイルする 109 | 110 | #### 方法 1: ビジュアルエディタ全体をコンパイルする 111 | 112 | 1. 依存関係をインストールする 113 | 114 | プロジェクトのルートディレクトリで依存関係をインストールする。 115 | 116 | ```shell 117 | yarn 118 | ``` 119 | 120 | 2. *release.sh* のコマンドに従って、*Terre* 以外の packages をパッケージ化する。 121 | 122 | 3. *Terre* を手動でコンパイルする。[*Terre のみコンパイル*](./#方法2: *Terre* のみコンパイルする) を参照。 123 | 124 | #### 方法 2: *Terre2* のみコンパイルする 125 | 126 | 1. *packages/terre2* を開く。 127 | 128 | 2. 依存関係をインストールする 129 | 130 | ``` shell 131 | yarn 132 | ``` 133 | 134 | 3. *terre2* をパッケージ化する 135 | 136 | ``` shell 137 | yarn run build 138 | ``` 139 | 140 | 4. *dist* ディレクトリ内のすべての *.d.ts* で終わるファイルを削除する（任意）。 141 | 142 | 5. *dist* に *package.json* ファイルを追加する。内容は以下の通り（関連情報を必ず入力すること）。 143 | 144 | ```json 145 | { 146 | "name": "webgal-terre-2-win7-server", 147 | "version": "バージョン番号", 148 | "description": "", 149 | "private": true, 150 | "license": "MPL-2.0", 151 | "dependencies": { 152 | "@nestjs/common": "^8.0.0", 153 | "@nestjs/core": "^8.0.0", 154 | "@nestjs/platform-express": "^8.0.0", 155 | "@nestjs/serve-static": "^2.2.2", 156 | "open": "^8.4.0", 157 | "reflect-metadata": "^0.1.13", 158 | "rimraf": "^3.0.2", 159 | "rxjs": "^7.2.0", 160 | "vscode-languageserver": "^8.1.0", 161 | "ws": "^8.8.1" 162 | } 163 | } 164 | ``` 165 | 166 | 6. `dist` ディレクトリをコンパイル済みのエディタディレクトリにコピーする。 167 | 168 | ### ビジュアルエディタを実行する 169 | 170 | 1. ビジュアルエディタのディレクトリで依存関係をインストールする。 171 | 172 | ``` shell 173 | npm i 174 | # あるいは（yarn を推奨） 175 | yarn 176 | ``` 177 | 178 | 2. `node main.js` を実行してビジュアルエディタを起動する。必要に応じて bat, sh スクリプトとして記述することができる。 -------------------------------------------------------------------------------- /src/ja/webgal-script/dialogue.md: -------------------------------------------------------------------------------- 1 | # 会話 2 | 3 | ::: warning 4 | 各会話の冒頭のコロン、セミコロンは英字で記述してください！ 5 | ::: 6 | 7 | **キャラクターの会話の書き方はとても簡単で、自然言語とほとんど変わりません。** 8 | 9 | ::: info 10 | フォントが中、大のときはテキストボックスは2行表示され、フォントが小のときは3行表示されます。 11 | ::: 12 | 13 | ## 基本的なキャラクターの会話 14 | 15 | まず、メモ帳やVS Code、sublimeなどのテキストエディタで、ゲームのリソースディレクトリにある`scene`フォルダの中の`start.txt`を開いて、最初の会話の記述を始めましょう。 16 | 17 | キャラクターの会話の書き方はとても簡単で、`キャラクター:会話;`と入力するだけです。 18 | 19 | 例： 20 | 21 | ``` ws 22 | 雪ノ下雪乃:お茶どうぞ; 23 | 由比ヶ浜:あ、ありがとう; 24 | 小町:雪乃姉ありがとう！; 25 | 一色:先輩ありがとう。; 26 | ``` 27 | 28 | 各会話/シナリオの最後には、セミコロンを打って終了してください。（セミコロンを打たなくても動く場合もありますが、バグ防止のため作者はセミコロンを打つことを推奨します。） 29 | 30 | ## 連続会話 31 | 32 | 複数の会話でキャラクター名が変わらない場合は、連続会話としてキャラクター名を省略して、必要なときにだけキャラクター名を書くことができます。 33 | 34 | ``` ws 35 | 雪ノ下雪乃:随分早いですね; 36 | ; // このとき、会話のキャラクター名はまだ「雪ノ下雪乃」です 37 | お待たせしてしまいましたか？; 38 | 比企谷八幡:今来たばかりですよ; 39 | ``` 40 | 41 | ## ナレーション 42 | 43 | キャラクター名のないナレーションの会話を作成したい場合は、コロンの前に空白を入れてください（コロンは省略できません）。 44 | 45 | ``` ws 46 | :これはナレーションです; 47 | ``` 48 | 49 | ## 黒画面テキスト 50 | 51 | 多くのゲームでは、テーマを導入したり、キャラクターの心理描写を表現したりするために、黒画面にテキストが表示されます。独白を演出するには、introコマンドを使用します。 52 | 53 | ``` ws 54 | intro:思い出には適した脚本はいらない、|口に出せば、|それは戯言になる。; 55 | ``` 56 | 57 | 独白の改行は区切り記号（|）で行われます。つまり、|ごとに改行されます。実際の演出では、上記のテキストは次のように表示されます。 58 | 59 | ``` ws 60 | 思い出には適した脚本はいらない、 61 | 口に出せば、 62 | それは戯言になる。 63 | ``` 64 | 65 | 独白が終わった後も独白画面を維持し、ゲームを続行しないようにするには、`-hold` パラメータを使用します。 66 | 67 | ``` ws 68 | intro:思い出には台本はいらない、|口に出せば、|戯言になる。 -hold; 69 | ``` 70 | 71 | ## ユーザー入力を取得する 72 | 73 | `getUserInput`コマンドを使用してユーザー入力を取得し、変数に書き込みます。たとえば、 74 | 75 | ``` 76 | getUserInput:name -title=あなたの呼び方は -buttonText=決定; ユーザー入力をname変数に書き込む 77 | ``` 78 | 79 | ここで、`title`パラメータはプロンプトのテキストで、`buttonText`は確認ボタンのテキストです。 80 | 81 | ## 変数の補完 82 | 83 | `{}`構文を使用してステートメント内で変数の補完を行い、変数をステートメントに挿入できます。たとえば、 84 | 85 | ``` 86 | WebGAL:はじめまして、{name}さん！ 87 | ``` 88 | 89 | 変数の補完は、キャラクター名にも適用されます。たとえば、 90 | 91 | ``` 92 | {name}:私もWebGALが一番好きです！; 93 | ``` 94 | 95 | ## ルビ 96 | 97 | 会話テキストにルビを振ることは、日本語のゲームではよく見られる演出効果です。日本語では、書き方と読み方が一致しない単語がよくあります。 98 | 99 | ルビの構文は`[ルビを振る単語](ルビ)`です。 100 | 101 | 例： 102 | 103 | ``` 104 | 『[笑顔](えがお)』なんて、『[笑う](わらう)』なんて、[誰](だれ)でも[出来](でき)るもん…！ 105 | ``` 106 | 107 | ## テキスト拡張文法 108 | 109 | WebGAL 4.5.3 では、「テキスト拡張文法」機能が追加されました。この文法を使用すると、一部のテキストにテキストスタイルを追加できます。 110 | 111 | テキスト拡張文法は、特定のテキストを拡張したものです。 `[]` で囲まれ、その後に `()` で囲まれたテキスト拡張記述が続くテキストは、テキスト拡張文法の定義に準拠しています。 112 | 113 | 簡単に言うと、次の形式になります。 114 | 115 | ``` 116 | WebGAL:[テキスト](style-alltext=font-style:italic\;font-size:80%\; style=color:#66327C\; ruby=てきすと) 117 | ``` 118 | 119 | これは、テキストのフォントサイズが小さく、斜体で、色が #66327C で、ルビが振られていることを示しています。 120 | 121 | テキスト拡張文法の異なるパラメータは、スペースで区切られ、常に `argk=argv` の形式になります。 122 | 123 | 特に注意が必要なのは、`;` は WebGAL のコメント構文であるため、テキスト拡張構文で `;` を使用するには、`\;` のようにエスケープする必要があることです。 124 | 125 | ### 異なるパラメータに対応するスタイルの適用範囲 126 | 127 | ![text-enhance](text-enhance.png) 128 | 129 | 前のサンプル構文では、`style` と `style-alltext` の 2 つのパラメータを使用してテキストのスタイルを定義できることに注意してください。 130 | 131 | テキストスタイルの適用範囲を区別したのは、WebGAL では、テキストに優れた縁取り効果を提供するために、1 つの文字をテキスト、縁取り、プレースホルダーの 3 つのレイヤーに分割しているためです。 132 | 133 | テキストは最上位レイヤーにあり、主要部分でもあります。縁取りはテキストの下にあり、テキストで覆われており、白い縁取りを提供するために使用されますが、文字の内部形状は壊しません。最下層は、配置を提供するための透明なプレースホルダーです。 134 | 135 | 簡単に言うと、テキストの色のみを変更する場合は、`style` パラメータのみを使用する必要があります。斜体、テキストサイズ、内外の余白などの効果を適用する場合は、`style-alltext` にも効果を設定する必要があります。 136 | 137 | **特に注意：バージョン 4.5.3 のバグのため、現在、`style-alltext` パラメータのみを適用することはできません。`style=` などの構文が検出された場合にのみ、テキスト拡張構文が有効になります。** 138 | 139 | ### ルビとの互換性 140 | 141 | 以前の構文との互換性を保つため、`style=` などの構文が認識されない場合は、`()[]` 構文はルビと見なされます。 142 | 143 | 新しいテキスト拡張構文を使用した場合、ルビは `ruby=` パラメータに記述されます。上記の例でも説明されています。 144 | 145 | ## テキストボックスを閉じる 146 | 147 | 特殊な演出効果のために、一時的にテキストボックスを閉じたい場合があります。そのため、次のコマンドを使用してテキストボックスを閉じることができます。 148 | 149 | ``` ws 150 | setTextbox:hide; // テキストボックスを閉じる 151 | ``` 152 | 153 | `setTextbox`コマンドの値が`hide`の場合、テキストボックスは閉じられ、ユーザーはどの方法でも開くことができません。テキストボックスを再度表示するには、このコマンドをもう一度呼び出して、`hide`以外の任意の値を入力します。 154 | 155 | ``` ws 156 | setTextbox:on; // hide以外の任意の値にすることができます。 157 | ``` 158 | 159 | ## ゲームを終了してタイトルに戻る 160 | 161 | ストーリーの最後にゲームを終了してタイトルに戻したい場合は、次を使用してください。 162 | 163 | ``` ws 164 | end; 165 | ``` 166 | 167 | これにより、ゲームはタイトル画面に戻ります。 168 | 169 | ## 映画モード（テスト機能） 170 | 171 | `filmMode:enable;`を使用して映画モードを有効にします。 172 | `filmMode:none;`を使用して映画モードを無効にします。 173 | -------------------------------------------------------------------------------- /src/ja/spine.md: -------------------------------------------------------------------------------- 1 | # Spineについて 2 | 3 | WebGALでSpine Runtimeを統合する場合、以下のSpine Runtime統合契約に基づき、Spineエディターのライセンスを取得する必要があります。 4 | 5 | https://esotericsoftware.com/spine-runtimes-license#spine-runtimes 6 | 7 | ``` 8 | Spine Runtimes License Agreement 9 | Last updated February 20, 2024. Replaces all prior versions. 10 | 11 | Copyright (c) 2013-2024, Esoteric Software LLC 12 | 13 | Spine Runtimesのソフトウェアへの統合、またはその他のSpine Runtimesの派生物の作成は、Spine Editor License Agreementのセクション2の条項に基づいて許可されます。 14 | http://esotericsoftware.com/spine-editor-license 15 | 16 | それ以外の場合は、製品の各ユーザーが自身のSpine Editorライセンスを取得し、いかなる形式での製品の再配布にもこのライセンスと著作権表示を含めることを条件として、Spine Runtimesをソフトウェアに統合したり、Spine Runtimesの派生物を作成したりすることができます（まとめて「製品」）。 17 | 18 | SPINE RUNTIMESは、ESOTERIC SOFTWARE LLCによって「現状のまま」提供され、商品性および特定目的への適合性に関する黙示の保証を含むがこれらに限定されない、明示または黙示の保証はすべて否認されます。いかなる場合においても、ESOTERIC SOFTWARE LLCは、SPINE RUNTIMESの使用に起因する、直接的、間接的、偶発的、特別、懲罰的、または結果的な損害（代替の商品またはサービスの調達、事業の中断、使用、データ、または利益の損失を含むがこれらに限定されない）について、原因の如何を問わず、契約、厳格責任、または不法行為（過失を含む）のいずれの責任の理論に基づいても、たとえそのような損害の可能性について知らされていたとしても、責任を負わないものとします。 19 | ``` 20 | 21 | **そのため、Spine機能を必要としないユーザーへの影響を避けるため、WebGALはプロジェクトから`pixi-spine`パッケージを削除しました。** Spineを使用したい場合は、以下の手順を参照してください。 22 | 23 | :::info 24 | 注意：以下の手順はすべてWebGALのソースコードに基づいています。ソースコードはGitHubで入手できます。 25 | 26 | [WebGAL ソースコード](https://github.com/OpenWebGAL/WebGAL) 27 | ::: 28 | 29 | 1. Spineエディターのライセンスを取得する [http://esotericsoftware.com/](http://esotericsoftware.com/) 30 | 31 | 2. `package/webgal`パッケージでyarnを使用してpixi-spineをインストールする 32 | 33 | ``` 34 | cd package/webgal 35 | yarn add pixi-spine@3.1.2 36 | ``` 37 | 38 | 3. 次のファイルに移動します： `packages/webgal/src/Core/controller/stage/pixi/spine.ts` 39 | 40 | 以下のコメントアウトされた行（約30行目から）のコメントを外します。 41 | 42 | ``` 43 | // pixiSpineLoading = import('pixi-spine') 44 | // .then((module) => { 45 | // spineLoader = new PIXI.Loader(); 46 | // pixiSpineModule = module; 47 | // return module; 48 | // }) 49 | // .catch((error) => { 50 | // console.error('Failed to load pixi-spine. Spine features will be disabled.', error); 51 | // return null; 52 | // }) 53 | // .finally(() => { 54 | // pixiSpineLoading = null; 55 | // }); 56 | ``` 57 | 58 | 4. プロジェクトのルートディレクトリで以下のスクリプトを実行してWebGALをデバッグします 59 | 60 | `yarn dev` 61 | 62 | 5. これでSpineを立ち絵として使用できるようになりました。モデル全体のディレクトリを`game/figure`ディレクトリに配置する必要があります。立ち絵を呼び出す方法は、立ち絵のjsonファイルを呼び出すことです。 63 | 64 | 例： 65 | ``` 66 | game/ 67 | figure/ 68 | exampleSpine/ 69 | data.json 70 | atlas.atlas 71 | skeleton.skel 72 | ``` 73 | 74 | JSON形式のSpine立ち絵を使用している場合は、エンジンがSpineタイプとして認識できるように、以下のようなスクリプトを使用してタイプを渡す必要があります。 75 | 76 | ``` 77 | changeFigure:exampleSpine/data.json?type=spine; 78 | ``` 79 | 80 | 6. 本番用パッケージをビルドする場合、またはWebGAL Terreで使用する場合は、`yarn build`コマンドを実行してWebGALをビルドします。完了したら、[カスタムエンジンの使用方法](derivative) を参照して、変更後のエンジンを使用してください。 81 | 82 | 83 | ### 重要な注意点 84 | 85 | Spine Runtime統合契約に基づき、**Spine機能を使用する各ユーザーは、Spineエディターの有効なライセンスを所有している必要があります。** Spine機能を合法的に使用するために、適切なライセンスを取得していることを確認してください。 86 | 87 | ### 免責事項 88 | 89 | 以下の内容をよくお読みになり、ご理解ください。 90 | 91 | Spine機能を統合したWebGALバージョンを使用する前に、Spineエディターの正式なライセンスを取得していることを確認する必要があります。Spineはサードパーティ製ソフトウェアであり、そのランタイムコンポーネントはSpineエディターのライセンス契約の制約を受けます。この契約に基づき、Spine Runtimeを統合したソフトウェアを使用する場合は、Spineエディターの正式なライセンスを各自で取得する必要があります。 92 | 93 | Spineエディターのライセンスを取得せずに、Spine Runtimeを統合したWebGALを個人的に統合または使用した場合、それによって生じるすべての法的責任、経済的損失、評判の損害、およびその他のあらゆる形式の結果は、個人または組織が全責任を負います。WebGALプロジェクトチームは一切の責任を負いません。私たちはSpineライセンスを提供せず、ライセンスの取得または配布プロセスにも関与しません。WebGALは技術プラットフォームとしてのみ機能し、Spineとの統合をサポートしますが、ユーザーの使用行為を監督または責任を負うことはありません。 94 | 95 | 許可なくSpine Runtimeを使用することは、著作権侵害とみなされ、サードパーティから損害賠償を求める訴訟を起こされる可能性があります。Spineエディターのライセンス契約に違反したために発生した法的紛争または経済的賠償請求は、すべてユーザー自身で解決することに同意するものとします。また、ユーザーの行為によってWebGALプロジェクトチームおよびその関連会社に発生した損失（弁護士費用、賠償金、およびその他の関連費用を含むがこれらに限定されない）を全額補償することに同意するものとします。 96 | 97 | さらに、WebGALプロジェクトチームは、Spine機能の統合または使用中に発生した直接的または間接的な損害、不便、または損失について、一切の責任を負いません。技術的な不具合、ソフトウェアエラー、無許可の使用、またはライセンス契約の不遵守によって生じた結果について、WebGALは一切責任を負いません。Spineを統合したWebGALバージョンの使用に伴うすべてのリスクと責任は、ユーザーが完全に負うものとします。 98 | 99 | 要約すると、WebGALでSpine機能を統合または使用する場合、Spineエディターの正式なライセンスを取得済みであり、すべての関連ライセンス条項と規制を遵守することを約束する必要があります。そうでない場合、発生するすべてのリスク、責任、および結果は、個人または組織が負担し、WebGALプロジェクトチームとは無関係です。 100 | 101 | 本ソフトウェアを使用することにより、上記の免責事項のすべてを読み、理解し、同意したものとみなされます。これらの条項に同意しない場合は、Spine機能を統合したWebGALバージョンの使用を直ちに中止してください。 102 | -------------------------------------------------------------------------------- /src/en/developers/readme.md: -------------------------------------------------------------------------------- 1 | # Customization and Contribution 2 | 3 | ## WebGAL Source Code Repository 4 | 5 | [https://github.com/OpenWebGAL/WebGAL](https://github.com/OpenWebGAL/WebGAL) 6 | 7 | ## Branch Description 8 | 9 | ``` 10 | main: Stable version 11 | dev: WebGAL development version 12 | other branches: Archives of older versions 13 | ``` 14 | 15 | ## Update Plan 16 | 17 | See [WebGAL Information](/info) 18 | 19 | ## Contributor Guidelines 20 | 21 | If you wish to contribute to the WebGAL Terre visual editor, please refer to the [WebGAL Terre Contributor Guide](terre) 22 | 23 | ### Contribution Requirements 24 | 25 | To help us better understand and review your contribution, please note the following: 26 | 27 | **Pre-Pull Request Preparation:** 28 | 29 | * **Submit an Issue First:** **Before starting any development work, please submit an Issue to discuss your ideas and design proposal**. This helps avoid duplicate work, ensures your contribution aligns with the project direction, and prevents PRs from being unable to merge due to design issues. 30 | 31 | * **RFC (Request for Comments):** For major changes or new features, we recommend submitting an RFC or detailed design proposal first to discuss the feasibility of the technical approach with maintainers and community members. 32 | 33 | **Code Quality Requirements:** 34 | 35 | * **Code Comments:** To help us understand your code logic, we recommend adding comments to key sections. 36 | 37 | * **Functional Testing:** If you add or modify functionality, please provide corresponding test methods to ensure the functionality works as expected. If you refactor code, please also provide test methods to cover the affected areas and ensure the refactoring does not introduce new issues. 38 | 39 | * **Clear Explanation:** When submitting a Pull Request, please briefly describe the changes you made and the reasons behind them, and reference the related Issue. This will help us understand your contribution more quickly. 40 | 41 | ### Starting the WebGAL Project Locally 42 | 43 | WebGAL currently uses yarn as a package manager and yarn workspace as a monorepo manager. 44 | 45 | If you don't have yarn, please install it using the following command: 46 | 47 | ```shell 48 | npm install yarn -g 49 | ``` 50 | 51 | Then, execute the following command in the project root directory: 52 | 53 | ```shell 54 | yarn 55 | ``` 56 | 57 | to install dependencies. 58 | 59 | This project has 3 packages, each corresponding to different functionalities: 60 | 61 | | Package Name | Content | 62 | | ------------ | ------------------------- | 63 | | parser | WebGAL Parser | 64 | | server | WebGAL Local Debug Server | 65 | | webgal | Engine Core | 66 | | yukimi | Planned yukimi support library | 67 | 68 | ## Starting the WebGAL Engine Project Locally 69 | 70 | You can start the development server by running the following script: 71 | 72 | ```shell 73 | yarn dev 74 | ``` 75 | 76 | If you want to build WebGAL, use: 77 | 78 | ```shell 79 | yarn build 80 | ``` 81 | 82 | The packaged output is located in the `packages/webgal/dist` directory. 83 | 84 | ## About WebGAL Technology 85 | 86 | WebGAL is a project of considerable scale, and diving directly into the code can be overwhelming. Therefore, here is a reference document about WebGAL technology to help you understand it. 87 | 88 | [WebGAL Technical Introduction](/en/tech) 89 | 90 | In addition, we will also provide some documentation in some key directories of the source code to explain the principles of that module. This information will be provided in Chinese. Nowadays, large language models perform well enough in translation, so you don't have to worry if you can't read Chinese. You can try using a large language model to translate it into your language. 91 | 92 | ## Importing the Built WebGAL into the WebGAL Terre Editor 93 | 94 | ::: tip 95 | After you have finished your customization, if you want to use the WebGAL editor to easily preview and manage resources in real-time, you can copy and paste the packaged product and replace the `packages/terre2/assets/templates/WebGAL_Template` directory under the editor directory. This way, you can replace the engine built into the WebGAL editor with your customized one. If your WebGAL repository and WebGAL_Terre repository are in the same directory, you can use the `release-to-terre` shortcut script to execute this. 96 | ::: 97 | -------------------------------------------------------------------------------- /src/webgal-script/animation.md: -------------------------------------------------------------------------------- 1 | # 动画效果 2 | 3 | ## 为背景或立绘设置动画 4 | 5 | 使用语句 `setAnimation:动画名 -target=作用目标;` 6 | 7 | **示例：** 8 | 9 | ``` ws 10 | ; // 为中间立绘设置一个从下方进入的动画，并转到下一句 11 | setAnimation:enter-from-bottom -target=fig-center -next; 12 | ``` 13 | 14 | 目前，预制的动画有： 15 | 16 | | 动画效果 | 动画名 | 持续时间（毫秒）| 17 | | :------------ | :----------------- | :------------- | 18 | | 渐入 | enter | 300 | 19 | | 渐出 | exit | 300 | 20 | | 左右摇晃一次 | shake | 1000 | 21 | | 从下侧进入 | enter-from-bottom | 500 | 22 | | 从左侧进入 | enter-from-left | 500 | 23 | | 从右侧进入 | enter-from-right | 500 | 24 | | 前后移动一次 | move-front-and-back | 1000 | 25 | 26 | 目前，动画的作用目标有： 27 | 28 | | target | 实际目标 | 29 | | :--------- | :------------ | 30 | | fig-left | 左立绘 | 31 | | fig-center | 中间立绘 | 32 | | fig-right | 右侧立绘 | 33 | | bg-main | 背景 | 34 | | id | 某个有id的立绘 | 35 | 36 | ## 自定义动画 37 | 38 | ### 创建动画 39 | 40 | 动画文件在 `game/animation`，你可以创建自己的自定义动画。 41 | 42 | 动画文件使用 JSON 描述，你可以在 [参考文档](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/JSON) 参考JSON语法。 43 | 44 | 每一个动画文件都代表一个**动画序列**，使用一个 JSON 数组来描述。下面是一个示例，描述了一个从左侧进入的动画： 45 | 46 | **示例: `enter-from-left.json`** 47 | 48 | ``` json 49 | [ 50 | { 51 | "alpha": 0, 52 | "scale": { 53 | "x": 1, 54 | "y": 1 55 | }, 56 | "position": { 57 | "x": -50, 58 | "y": 0 59 | }, 60 | "rotation": 0, 61 | "blur": 5, 62 | "duration": 0 63 | }, 64 | { 65 | "alpha": 1, 66 | "scale": { 67 | "x": 1, 68 | "y": 1 69 | }, 70 | "position": { 71 | "x": 0, 72 | "y": 0 73 | }, 74 | "rotation": 0, 75 | "blur": 0, 76 | "duration": 500 77 | } 78 | ] 79 | 80 | ``` 81 | 82 | 其中各个属性代表的释义为： 83 | 84 | | 属性名 | 释义 | 85 | | :------- | :--------------------------------- | 86 | | alpha | 透明度，范围0-1 | 87 | | scale | 缩放 | 88 | | position | 位置偏移 | 89 | | rotation | 旋转角度，单位为弧度 | 90 | | blur | 高斯模糊半径 | 91 | | brightness | 调节亮度 | 92 | | contrast | 调节对比度 | 93 | | saturation | 调节饱和度 | 94 | | gamma | 调节伽马值 | 95 | | colorRed | 颜色分量:红色, 范围0-255 | 96 | | colorGreen | 颜色分量:绿色, 范围0-255 | 97 | | colorBlue | 颜色分量:蓝色, 范围0-255 | 98 | | duration | 这个时间片的持续时间，单位为毫秒(ms) | 99 | | oldFilm | 老电影效果，0代表关闭，1代表开启 | 100 | | dotFilm | 点状电影效果，0代表关闭，1代表开启 | 101 | | reflectionFilm | 反射电影效果，0代表关闭，1代表开启 | 102 | | glitchFilm | 故障电影效果，0代表关闭，1代表开启 | 103 | | rgbFilm | RGB电影效果，0代表关闭，1代表开启 | 104 | | godrayFilm | 光辉效果，0代表关闭，1代表开启 | 105 | 106 | 然后，你需要在 `animationTable`中加上你的自定义动画的文件名（不需要后缀名） 107 | 108 | 在文件 `animationTable.json`： 109 | 110 | ``` json 111 | ["enter-from-left","enter-from-bottom","enter-from-right"] 112 | ``` 113 | 114 | 然后，你就可以在脚本中调用： 115 | 116 | ``` ws 117 | setAnimation:enter-from-left -target=fig-left -next; 118 | ``` 119 | 120 | ### 省略部分属性 121 | 122 | 如果你的动画只需要操作部分属性，你可以将其他不参与动画的属性留空，使它们保持默认。 123 | 124 | **示例：`enter.json`** 125 | 126 | ``` json 127 | [ 128 | { 129 | "alpha": 0, 130 | "duration": 0 131 | }, 132 | { 133 | "alpha": 1, 134 | "duration": 300 135 | } 136 | ] 137 | 138 | ``` 139 | 140 | ### 使用变换 141 | 142 | 一个持续时间为0毫秒，且只有一个时间片的动画就是变换。 143 | 144 | **示例：** 145 | 146 | ``` json 147 | [ 148 | { 149 | "alpha": 0, 150 | "duration": 0 151 | } 152 | ] 153 | ``` 154 | 155 | ## 设置进出场效果 156 | 157 | 你还可以覆盖 WebGAL 默认的渐变进出场效果，替换为自己的动画效果，例如： 158 | 159 | ``` 160 | setTransition: -target=fig-center -enter=enter-from-bottom -exit=exit; 161 | ``` 162 | 163 | 注意：只有当立绘或背景被设置后，你才能为其设置进出场效果。设置进出场效果的代码写在立绘或背景的设置代码**后**。并且，设置进出场效果的语句必须紧随设置立绘或背景的语句**连续执行**，否则无法被正确应用。 164 | 165 | ::: tip 166 | 为什么要这样做？ 167 | 168 | 在设置立绘或背景时，会为立绘或背景默认设置一个进出场动画。在设置了立绘或背景后，立绘和背景不会立即展示在舞台上，而是会等待进出场效果的设置。 169 | 170 | 如果在立绘或背景设置后，立即执行设置进出场效果的语句，就可以覆盖掉默认的进出场动画，进而实现进出场效果的自定义。如果没有设置，则在进出场时执行默认动画。 171 | 172 | 如果不在立绘或背景设置后立即执行进出场效果的设置，等到图像已经进场了，再覆盖进场动画就没有意义了。但如果此时图像还没有出场，设置的出场动画仍有意义。其会在立绘或背景出场时正确地被应用。 173 | ::: 174 | -------------------------------------------------------------------------------- /src/spine.md: -------------------------------------------------------------------------------- 1 | # 关于 Spine 2 | 3 | 根据以下 Spine Runtime 集成协议，如果你在 WebGAL 中集成了 Spine Runtime，你需要获得 Spine 编辑器的许可证。 4 | 5 | https://esotericsoftware.com/spine-runtimes-license#spine-runtimes 6 | 7 | ``` 8 | Spine Runtimes License Agreement 9 | Last updated February 20, 2024. Replaces all prior versions. 10 | 11 | Copyright (c) 2013-2024, Esoteric Software LLC 12 | 13 | Integration of the Spine Runtimes into software or otherwise creating derivative works of the Spine Runtimes is permitted under the terms and conditions of Section 2 of the Spine Editor License Agreement: 14 | http://esotericsoftware.com/spine-editor-license 15 | 16 | Otherwise, it is permitted to integrate the Spine Runtimes into software or otherwise create derivative works of the Spine Runtimes (collectively, "Products"), provided that each user of the Products must obtain their own Spine Editor license and redistribution of the Products in any form must include this license and copyright notice. 17 | 18 | THE SPINE RUNTIMES ARE PROVIDED BY ESOTERIC SOFTWARE LLC "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL ESOTERIC SOFTWARE LLC BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, BUSINESS INTERRUPTION, OR LOSS OF USE, DATA, OR PROFITS) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 19 | ``` 20 | 21 | **因此，WebGAL 移除了项目中的 `pixi-spine` 包，以避免影响不需要使用 Spine 功能的用户。** 如果你想要使用 Spine，请参考以下步骤： 22 | 23 | :::info 24 | 注意：以下步骤都需要基于 WebGAL 源代码操作，你可以在 GitHub 找到 WebGAL 的源代码。 25 | 26 | [WebGAL 源代码](https://github.com/OpenWebGAL/WebGAL) 27 | ::: 28 | 29 | 1、获得 Spine 编辑器的授权 [http://esotericsoftware.com/](http://esotericsoftware.com/) 30 | 31 | 2、在 `package/webgal` 包中使用 yarn 安装 pixi-spine 32 | 33 | ``` 34 | cd package/webgal 35 | yarn add pixi-spine@3.1.2 36 | ``` 37 | 38 | 3、导航到以下文件： `packages/webgal/src/Core/controller/stage/pixi/spine.ts` 39 | 40 | 注意到以下被注释的行（大约从 30 行开始），取消注释即可。 41 | 42 | ``` 43 | // pixiSpineLoading = import('pixi-spine') 44 | // .then((module) => { 45 | // spineLoader = new PIXI.Loader(); 46 | // pixiSpineModule = module; 47 | // return module; 48 | // }) 49 | // .catch((error) => { 50 | // console.error('Failed to load pixi-spine. Spine features will be disabled.', error); 51 | // return null; 52 | // }) 53 | // .finally(() => { 54 | // pixiSpineLoading = null; 55 | // }); 56 | ``` 57 | 58 | 4、在项目根目录运行以下脚本以调试 WebGAL 59 | 60 | `yarn dev` 61 | 62 | 5、现在开始你可以使用 Spine 作为立绘了。你需要将整个模型的目录放入 `game/figure` 目录中，调用立绘的方法是调用立绘的 json 文件。 63 | 64 | 例如： 65 | ``` 66 | game/ 67 | figure/ 68 | exampleSpine/ 69 | data.json 70 | atlas.atlas 71 | skeleton.skel 72 | ``` 73 | 74 | 如果你使用的是 JSON 格式的 Spine 立绘，你需要使用类似以下脚本的方式传入类型，以使引擎识别其类型为 Spine。 75 | 76 | ``` 77 | changeFigure:exampleSpine/data.json?type=spine; 78 | ``` 79 | 80 | 6、如果你需要构建生产包，或在 WebGAL Terre 中使用，请运行 `yarn build` 指令构建 WebGAL。完成后，请参考 [如何使用定制引擎](derivative) 使用修改后的引擎。 81 | 82 | ### 重要提示 83 | 84 | 根据 Spine Runtime 集成协议，**每个使用 Spine 功能的用户必须拥有 Spine 编辑器的有效许可证**。请确保你已经获得了相应的授权，以合法地使用 Spine 功能。 85 | 86 | ### 免责声明 87 | 88 | 请您务必仔细阅读并理解以下内容： 89 | 90 | 在您使用集成了 Spine 功能的 WebGAL 版本之前，您必须确保已经获得了 Spine 编辑器的合法授权许可证。Spine 作为一个第三方软件，其运行时组件受 Spine 编辑器的许可证协议约束。根据该协议，任何使用集成了 Spine Runtime 的软件的行为，均需要您自行获得 Spine 编辑器的合法许可证。 91 | 92 | 如果您在未获得 Spine 编辑器许可证的情况下，私自集成或使用了集成了 Spine Runtime 的 WebGAL，所有因此产生的法律责任、经济损失、声誉损害及其他任何形式的后果，均由您个人或您的组织全权承担。WebGAL 项目团队对此不承担任何责任。我们不提供 Spine 许可证，也不参与任何许可证的获取或分发过程。WebGAL 仅作为技术平台，支持与 Spine 的集成，但不对您的使用行为进行监管或负责。 93 | 94 | 在未经授权的情况下使用 Spine Runtime，将被视为侵权行为，可能导致第三方对您提起法律诉讼，要求赔偿损失。您同意，若因您违反 Spine 编辑器的许可证协议而引发的任何法律纠纷或经济赔偿请求，均由您自行解决，并且您将全额赔偿 WebGAL 项目团队及其关联方因您的行为而产生的任何损失，包括但不限于法律费用、赔偿金及其他相关费用。 95 | 96 | 此外，WebGAL 项目团队明确声明，对您在集成或使用 Spine 功能过程中所遭受的任何直接或间接损害、不便或损失，不承担任何责任。无论是因技术故障、软件错误、未经授权的使用，还是因您未能遵守许可证协议而导致的任何后果，WebGAL 均不负任何责任。您对使用集成了 Spine 的 WebGAL 版本所带来的所有风险和责任，必须完全自负。 97 | 98 | 总而言之，如果您选择在 WebGAL 中集成或使用 Spine 功能，您必须确保已经合法获得了 Spine 编辑器的授权许可证，并且承诺遵守所有相关的许可证条款与规定。否则，所有由此产生的风险、责任及后果，均由您个人或您的组织承担，与 WebGAL 项目团队无关。 99 | 100 | 使用本软件即表示您已阅读、理解并同意以上免责声明的全部内容。如果您不同意这些条款，请立即停止使用集成了 Spine 功能的 WebGAL 版本。 -------------------------------------------------------------------------------- /src/ja/webgal-script/animation.md: -------------------------------------------------------------------------------- 1 | # アニメーション 2 | 3 | ## 背景や立ち絵にアニメーションを設定する 4 | 5 | `setAnimation:アニメーション名 -target=作用対象;` のステートメントを使用します。 6 | 7 | **例：** 8 | 9 | ``` ws 10 | ; // 中央の立ち絵に下から入ってくるアニメーションを設定し、次の行に移動します 11 | setAnimation:enter-from-bottom -target=fig-center -next; 12 | ``` 13 | 14 | 現在、プリセットされたアニメーションは以下の通りです。 15 | 16 | | アニメーション効果 | アニメーション名 | 持続時間（ミリ秒） | 17 | | :------------ | :----------------- | :------------- | 18 | | フェードイン | enter | 300 | 19 | | フェードアウト | exit | 300 | 20 | | 左右に一度揺れる | shake | 1000 | 21 | | 下側から入ってくる | enter-from-bottom | 500 | 22 | | 左側から入ってくる | enter-from-right | 500 | 23 | | 右側から入ってくる | enter-from-right | 500 | 24 | | 前後に一度移動する | move-front-and-back | 1000 | 25 | 26 | 現在、アニメーションの作用対象は以下の通りです。 27 | 28 | | target | 実際の対象 | 29 | | :--------- | :------------ | 30 | | fig-left | 左の立ち絵 | 31 | | fig-center | 中央の立ち絵 | 32 | | fig-right | 右の立ち絵 | 33 | | bg-main | 背景 | 34 | | id | idを持つ特定の立ち絵 | 35 | 36 | ## カスタムアニメーション 37 | 38 | ### アニメーションを作成する 39 | 40 | アニメーションファイルは `game/animation` にあります。独自のカスタムアニメーションを作成することができます。 41 | 42 | アニメーションファイルは JSON で記述されており、[リファレンスドキュメント](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON) で JSON 構文を参照することができます。 43 | 44 | 各アニメーションファイルは **アニメーションシーケンス** を表し、JSON 配列を使用して記述されます。以下は、左側から入ってくるアニメーションを記述した例です。 45 | 46 | **例: `enter-from-left.json`** 47 | 48 | ``` json 49 | [ 50 | { 51 | "alpha": 0, 52 | "scale": { 53 | "x": 1, 54 | "y": 1 55 | }, 56 | "position": { 57 | "x": -50, 58 | "y": 0 59 | }, 60 | "rotation": 0, 61 | "blur": 5, 62 | "duration": 0 63 | }, 64 | { 65 | "alpha": 1, 66 | "scale": { 67 | "x": 1, 68 | "y": 1 69 | }, 70 | "position": { 71 | "x": 0, 72 | "y": 0 73 | }, 74 | "rotation": 0, 75 | "blur": 0, 76 | "duration": 500 77 | } 78 | ] 79 | 80 | ``` 81 | 82 | 各プロパティの意味は以下の通りです。 83 | 84 | | プロパティ名 | 説明 | 85 | | :------- | :--------------------------------- | 86 | | alpha | 透明度、範囲は 0-1 | 87 | | scale | スケール | 88 | | position | 位置オフセット | 89 | | rotation | 回転角度、単位はラジアン | 90 | | blur | ガウスぼかしの半径 | 91 | | brightness | 輝度 | 92 | | contrast | コントラスト比 | 93 | | saturation | 彩度 | 94 | | gamma | ガンマ | 95 | | colorRed | 赤の量, 範囲は 0-255 | 96 | | colorGreen | 緑の量, 範囲は 0-255 | 97 | | colorBlue | 青の量, 範囲は 0-255 | 98 | | duration | このタイムスライスの持続時間、単位はミリ秒 (ms) | 99 | | oldFilm | オールドフィルム効果、0 はオフ、1 はオン | 100 | | dotFilm | ドット状のフィルム効果、0 はオフ、1 はオン | 101 | | reflectionFilm | 反射フィルム効果、0 はオフ、1 はオン | 102 | | glitchFilm | 故障フィルム効果、0 はオフ、1 はオン | 103 | | rgbFilm | RGB フィルム効果、0 はオフ、1 はオン | 104 | | godrayFilm | 光輝効果、0 はオフ、1 はオン | 105 | 106 | 次に、`animationTable` にカスタムアニメーションのファイル名（拡張子は不要）を追加する必要があります。 107 | 108 | `animationTable.json` ファイルで： 109 | 110 | ``` json 111 | ["enter-from-left","enter-from-bottom","enter-from-right"] 112 | ``` 113 | 114 | その後、スクリプトで呼び出すことができます。 115 | 116 | ``` ws 117 | setAnimation:enter-from-left -target=fig-left -next; 118 | ``` 119 | 120 | ### 一部のプロパティを省略する 121 | 122 | アニメーションで一部のプロパティだけを操作する必要がある場合は、アニメーションに参加しない他のプロパティを空欄にして、デフォルトのままにすることができます。 123 | 124 | **例：`enter.json`** 125 | 126 | ``` json 127 | [ 128 | { 129 | "alpha": 0, 130 | "duration": 0 131 | }, 132 | { 133 | "alpha": 1, 134 | "duration": 300 135 | } 136 | ] 137 | 138 | ``` 139 | 140 | ### 変換を使用する 141 | 142 | 持続時間が 0 ミリ秒で、タイムスライスが 1 つしかないアニメーションは、変換です。 143 | 144 | **例：** 145 | 146 | ``` json 147 | [ 148 | { 149 | "alpha": 0, 150 | "duration": 0 151 | } 152 | ] 153 | ``` 154 | 155 | ## 登場・退場のエフェクトを設定する 156 | 157 | WebGAL のデフォルトのフェードイン・フェードアウトの登場・退場エフェクトを上書きして、独自のエフェクトに置き換えることもできます。例えば、以下のようにします。 158 | 159 | ``` 160 | setTransition: -target=fig-center -enter=enter-from-bottom -exit=exit; 161 | ``` 162 | 163 | 注意：立ち絵や背景が設定されている場合にのみ、登場・退場エフェクトを設定することができます。登場・退場エフェクトを設定するコードは、立ち絵や背景の設定コードの **後** に記述します。また、登場・退場エフェクトを設定するステートメントは、立ち絵や背景を設定するステートメントの **直後** に連続して実行する必要があります。そうしないと、正しく適用されません。 164 | 165 | ::: tip 166 | なぜそうする必要があるのでしょうか？ 167 | 168 | 立ち絵や背景を設定すると、立ち絵や背景にデフォルトの登場・退場アニメーションが設定されます。立ち絵や背景を設定した後、立ち絵や背景はすぐにステージに表示されるのではなく、登場・退場エフェクトの設定を待ちます。 169 | 170 | 立ち絵や背景を設定した後、すぐに登場・退場エフェクトを設定するステートメントを実行すると、デフォルトの登場・退場アニメーションを上書きして、登場・退場エフェクトをカスタマイズすることができます。設定しない場合は、登場・退場時にデフォルトのアニメーションが実行されます。 171 | 172 | 立ち絵や背景を設定した後、すぐに登場・退場エフェクトを設定せずに、画像がすでに登場してから登場アニメーションを上書きしても意味がありません。しかし、この時点で画像がまだ登場していない場合は、設定した登場アニメーションに意味があります。立ち絵や背景が登場する際に正しく適用されます。 173 | ::: -------------------------------------------------------------------------------- /src/en/webgal-script/bg-and-figure.md: -------------------------------------------------------------------------------- 1 | # Backgrounds and Figures 2 | 3 | ## Changing Backgrounds/Figures 4 | 5 | For WebGAL to load backgrounds and figures, your background images should be placed inside the `background` folder, while figure images should be placed inside the `figure` folder. 6 | 7 | You can then change the currently displayed background image and figure with the following simple statements: 8 | 9 | ``` ws 10 | changeBg:testBG03.jpg; // Change background 11 | changeFigure:testFigure02.png; // Change figure 12 | changeBg:none; // Close background 13 | changeFigure:none; // Close figure 14 | ``` 15 | 16 | You may have noticed that after changing the background image or figure, you need to click the mouse again to display the next line of dialogue. If you want to execute the content of the next statement immediately after changing the background/figure, use the `-next` parameter. 17 | 18 | ``` ws 19 | changeBg:testBG03.jpg -next; 20 | changeFigure:testFigure02.png -next; // Change figure 21 | Ichishiki: Thank you, senior! ; 22 | ``` 23 | 24 | If you do this, the program will execute the next statement immediately after the background/figure is replaced. 25 | 26 | ## Placing Figures in Different Positions 27 | 28 | You can now place different figures in three different positions on the page. Just add the position you want to place the figure at the end of the statement, as shown in the following example: 29 | 30 | ``` ws 31 | changeFigure:testFigure03.png -left; 32 | changeFigure:testFigure04.png; 33 | changeFigure:testFigure03.png -right; 34 | ``` 35 | 36 | The above three lines correspond to the left, center, and right positions, respectively. The figures in the three different positions are independent of each other, so if you need to clear a figure, you must clear it separately: 37 | 38 | ``` ws 39 | changeFigure:none -left; 40 | changeFigure:none; 41 | changeFigure:none -right; 42 | ``` 43 | 44 | If you want to execute the next statement immediately after the figure is changed, the operation is the same as before, that is, add the parameter `-next` : 45 | 46 | ``` ws 47 | changeFigure:testFigure03.png -left -next; 48 | changeFigure:testFigure04.png -next; 49 | changeFigure:testFigure03.png -right -next; 50 | ``` 51 | 52 | ## Free Figures with ID 53 | 54 | If you want to control the position of the character sprites more precisely, or use more than 3 character sprites, you can specify `id` and initial position for them: 55 | 56 | ``` ws 57 | ; // A free figure with an initial position on the right 58 | changeFigure:testFigure03.png -left -id=test1; 59 | ; // Close the figure by id 60 | changeFigure:none -id=test1; 61 | ``` 62 | 63 | ::: tip 64 | If you want to reset the position of a figure with an ID, close it first and then reopen it. 65 | ::: 66 | 67 | ## Placing Mini Avatars 68 | 69 | Many games allow mini avatars to be placed in the lower left corner of the text box. Here is the syntax used in this engine: 70 | 71 | ``` ws 72 | ; // Display minipic_test.png in the lower left corner 73 | miniAvatar:minipic_test.png; 74 | ; // Close this mini avatar 75 | miniAvatar:none; 76 | ``` 77 | 78 | ## Unlock CGs for Appreciation 79 | 80 | Use `unlockCg` to unlock CGs in CG appreciation. 81 | 82 | ``` ws 83 | ; // Unlock CG and give it a name 84 | unlockCg:xgmain.jpeg -name="Starlight Cafe and the Butterfly of Death" -series=1; 85 | ``` 86 | 87 | Among them, the `-series` parameter is optional, which represents which series the current figure belongs to. Figures of the same series will be merged and displayed later (ie, displayed as switchable CGs of the same series). 88 | 89 | ## Set Effects When Setting Figures 90 | 91 | For a description of the effect fields, please refer to [Animation](animation.md) 92 | 93 | You can set some transform and filter effects for the figure when setting the figure. Here is an example: 94 | 95 | ``` 96 | changeFigure:stand.png -transform={"alpha":1,"position":{"x":0,"y":500},"scale":{"x":1,"y":1},"rotation":0,"blur":0,"brightness":1,"contrast":1,"saturation":1,"gamma":1,"colorRed":255,"colorGreen":255,"colorBlue":255,"oldFilm":0,"dotFilm":0,"reflectionFilm":0,"glitchFilm":0,"rgbFilm":0,"godrayFilm":0} -next; 97 | ``` 98 | 99 | ## Set Transform Effects for Existing Figures 100 | 101 | For a description of the effect fields, please refer to [Animation](animation.md) 102 | 103 | You can also use `setTransform` to set effects for existing figures directly, for example: 104 | 105 | ``` 106 | setTransform:{"position":{"x":100,"y":0}} -target=fig-center -duration=0; 107 | ``` 108 | 109 | Here a transform is set for an existing figure. -------------------------------------------------------------------------------- /src/ja/webgal-script/variable.md: -------------------------------------------------------------------------------- 1 | # 変数 2 | 3 | ::: warning 4 | 変数システムを使用する前に、シーンジャンプと分岐ジャンプの使い方を理解しておかないと、混乱する可能性がありますので、注意してください。 5 | ::: 6 | 7 | ## 変数の使い方 8 | 9 | 変数を設定する： 10 | 11 | ``` ws 12 | setVar:a=1; // 数字を設定可能 13 | setVar:a=true // 真偽値を設定可能 14 | setVar:a=キャラクター名 // 文字列を設定可能 15 | ``` 16 | 17 | 乱数を設定する場合は、`random()` を使用してください。 18 | 19 | ```ws 20 | setVar:a=random(); 21 | ``` 22 | 23 | ` random([lower=0]、[upper=1]、[floating])`乱数は、複数の参照をサポートする**内蔵関数**です。 24 | 25 | **パラメータ**： 26 | 1. [lower=0] (number): 下限。 27 | 2. [upper=1] (number): 上限。 28 | 3. [floating] (boolean): 浮動小数点数を返すかどうかを指定します。 29 | 30 | パラメータを書かずに0-1区間の浮動小数点数ですを生成します 31 | ```ws 32 | setVar:a=random(); 33 | ``` 34 | 35 | もちろん、私たちは**範囲**を指定することもできます。たとえば、5～10の間の乱数が必要な場合は、書くことができます： 36 | ```ws 37 | setVar:a=random(5,10); 38 | ``` 39 | 40 | もちろん、範囲を使用して生成したい数値にも小数があるので、3番目のパラメータを指定することができます。 41 | ```ws 42 | setVar:a=random(5,10,true); # 5～10の浮動小数点数が生成されます 43 | ``` 44 | 45 | 以前に他の変数を定義している場合は、変数を設定する際にそれらを使用することもできます。 46 | 47 | ``` ws 48 | setVar:a=1; 49 | setVar:b=a+1; 50 | ``` 51 | 52 | ## 条件付き実行 53 | 54 | 文の後に `-when=(condition)` パラメータを追加すると、現在の文を実行するかどうかを条件で判断することができます。 55 | 56 | 例えば： 57 | 58 | ``` ws 59 | setVar:a=1; 60 | ; // a が 1 より大きい場合、シーン 1 にジャンプする 61 | changeScene:1.txt -when=a>1; 62 | ; // a が 1 の場合のみジャンプする。等号演算子は == に注意 63 | changeScene:2.txt -when=a==1; 64 | ; // a が 1 より小さい場合、上の文は実行されず、当然この文が実行される 65 | changeScene:3.txt; 66 | 67 | ``` 68 | 69 | ::: tip 70 | `=` は代入演算子であり、条件判断には使用できません。`==` は等号演算子です。 71 | ::: 72 | 73 | どの文にも `-when` パラメータを追加して、実行するかどうかを制御することができます。`-when` パラメータと `jumpLabel` `callScene` `changeScene` を組み合わせることで、条件付きのフロー制御を実現することができます。 74 | 75 | ## ユーザー入力の取得 76 | 77 | `getUserInput` 命令を使用してユーザー入力を取得します。例えば： 78 | 79 | ``` 80 | getUserInput:name -title=あなたの名前を教えてください -buttonText=確認; ユーザー入力を name 変数に書き込む 81 | ``` 82 | 83 | ここで、`title` パラメータはプロンプトのテキストで、`buttonText` は確認ボタンのテキストです。 84 | 85 | ## 変数補間 86 | 87 | `{}` 構文を使用して文の中で変数補間を行い、変数を文に挿入することができます。例えば： 88 | 89 | ``` 90 | setVar:name=WebGAL; 91 | setVar:engine=WebGAL; 92 | {name}: {engine} へようこそ！これは、まったく新しいウェブベースのビジュアルノベルエンジンです。; 93 | ``` 94 | 95 | ## 永続変数（グローバル変数） 96 | 97 | WebGAL の通常の変数はセーブデータに依存します。つまり、どの変数も現在のゲームシーンにのみ存在し、セーブデータに保存され、ロードデータによって復元されるだけです。 98 | 99 | 作者がマルチエンディングを設定したい場合に問題が発生する可能性があるため、ゲーム全体で有効な永続（グローバル）変数が用意されています。一度設定すると、ユーザーがすべてのデータを消去しない限り、ゲーム全体で有効になります。 100 | 101 | `-global` パラメータを追加すると、永続（グローバル）変数を設定することができます。 102 | 103 | ```ws 104 | setVar:a=1 -global; 105 | ``` 106 | 107 | これにより、セーブデータの読み込みによって変更されない変数が設定されます。 108 | 109 | 使用例： 110 | 111 | ```ws 112 | jumpLabel:turn-2 -when=a>0; 113 | setVar:a=1 -global; 114 | 1周目; 115 | changeScene:一周目ストーリー.txt; 116 | label:turn-2; 117 | 2周目; 118 | changeScene:二周目ストーリー.txt; 119 | ``` 120 | 121 | ## 高级用法（`>=4.5.4`） 122 | 組み込み変数は、構成変数の変更や、組み込み変数に基づいて論理的に実行して条件を指定するなど、より高度な操作に使用します。 123 | 124 | WebGAL には現在、`stage` と `userData` の 2 つの組み込み変数フィールドがあります。 125 | 126 | ::: tip 127 | `stage` はランタイム組み込み変数で、`userData` はアーカイブ組み込み変数です。 128 | 129 | `stage`はWebGalエディタの下の`state`タブにあり、`userData`は開発者ツールの`indexedDB`で表示できます。 130 | ::: 131 | 132 | それらにアクセスするには `$` を使用します (例: BGM の値を取得します)。 133 | 134 | ```ws 135 | setVar:a=($stage.bgm.volume); 136 | WebGAL:現在のBGMボリュームは、以下の通りです{a}; 137 | ``` 138 | 139 | もちろん、会話で直接使用することもできます： 140 | 141 | ```ws 142 | WebGAL:現在のBGMボリュームは、以下の通りです{$stage.bgm.volume}; 143 | ``` 144 | 145 | ::: warning 146 | `括弧付き`ラッパーは、`単一値`の変数を取得するために必要ですが、数学には必要ありません。 147 | ::: 148 | 149 | また、`config.txt` のグローバル変数にもアクセスできます： 150 | 151 | ```ws 152 | setVar:title=(Game_name); 153 | WebGAL:現在のゲームのタイトルは次のとおりです{title}; 154 | ``` 155 | 156 | 変更も例外ではなく、ゲームのタイトルを新しいゲームのタイトルに変更する場合、setVar の変数名には変更する変数名を設定する必要があります。 157 | 158 | `global`パラメータを追加して、構成変数を変更していることを示します： 159 | 160 | ```ws 161 | setVar:Game_name=新しいゲームタイトル -global; 162 | WebGAL:現在のゲームのタイトルは次のとおりです{Game_name}; 163 | ``` 164 | 165 | ::: warning 166 | `global` を付けないとゲーム内変数に代入されるので、`global` パラメータを使うタイミングに注意してください。 167 | ::: 168 | 169 | ::: tip 170 | 変更可能な元の構成変数 `Title_img`、`Title_bgm`、`Game_name`、`Game_key`。 171 | 回復したい場合は、ゲームオプションの`すべてのデータを消去`を使用して回復できます。 172 | ::: 173 | 174 | もちろん、`config.txt`でカスタム構成変数を作成することもできます。たとえば、バージョン番号を作成します： 175 | 176 | ```text 177 | Game_name:欢迎使用WebGAL！; 178 | Game_key:f60ad5725c1588; 179 | Title_img:WebGAL_New_Enter_Image.png; 180 | Title_bgm:s_Title.mp3; 181 | Textbox_theme:imss; 182 | ; バージョン番号を増やす 183 | version:1; 184 | ``` 185 | 186 | 次に、スクリプトでそれを取得して変更できます： 187 | 188 | ```ws 189 | setVar:v=(version); 190 | WebGAL:現在のバージョン番号は{v}; 191 | setVar:version=version*2 -global; 192 | WebGAL:変更された現在のバージョン番号は次のとおりです{version}; 193 | ``` 194 | 195 | ::: warning 196 | `config.txt`は、特別なシンボルとしてまだ逃れられていません。 197 | ::: 198 | -------------------------------------------------------------------------------- /src/tech/readme.md: -------------------------------------------------------------------------------- 1 | # WebGAL 技术介绍 2 | 3 | ## 场景系统与预加载 4 | 5 | ### 场景获取 6 | 7 | WebGAL 的场景是以文件为单位的，一般来说是后缀名为`.txt`的WebGAL 脚本文件。就像很多编程语言有一个 `main`函数作为入口一样，WebGAL 的入口场景是`start.txt`。WebGAL 会首先尝试获取 `start.txt`，然后调用WebGAL 解析器将脚本文件解析为 WebGAL 引擎可以执行的场景对象。在任何一个场景中，都可以使用`choose`、`changeScene`、`callScene`这样的方式切换或“调用”场景。切换场景会直接替换当前的场景，而“调用”场景则会向场景调用栈中推入一个新的场景开始执行，并在执行后回到调用该场景的父场景。 8 | 9 | ### 预加载场景中的资源 10 | 11 | 在 WebGAL 解析场景的同时，场景所包含的资源也会被解析出来。对于每个场景文件，WebGAL 都会将其包含的所有资源，包括图片、音频以及视频文件。这些文件会在场景被解析完后开始预加载，以尽可能减少用户在游戏流程中等待资源加载的可能性。同时，为了使游戏在切换场景时更为顺畅，WebGAL 也会加载被当前的场景文件引用的场景文件的资源。为了防止资源浪费，WebGAL 只会拓展一层场景做预加载。 12 | 13 | ## WebGAL 解析器 14 | 15 | ### 语句解析 Ⅰ 拆分场景 16 | 17 | WebGAL 场景文件主要是以行来区分脚本的。在解析的一开始，WebGAL 解析器就会按照换行符将脚本分割开。如果有分号，则会取分号前的字符。所以，WebGAL 脚本的注释方式就是将脚本写在分号后。 18 | 19 | ### 语句解析 Ⅱ 脚本类型解析 20 | 21 | WebGAL 的脚本一般是形如 22 | 23 | ``` 24 | command:content -arg1 -arg2 ......;comment 25 | ``` 26 | 27 | 的形式。 28 | 29 | 其中，command 代表语句指令，比如 `bgm`、`changeFigure`、`choose`这样的指令，用于标明该语句对应的控制动作。而 `content`则代表语句的主要内容，比如 `bgm:Teabreak.mp3`表示的是播放一段音频文件作为 bgm。 30 | 31 | ### 语句解析 Ⅲ 对话的特殊处理 32 | 33 | WebGAL 的对话一般以如下形式书写： 34 | 35 | ``` 36 | 森川由绮:胸につかえていることを、时は解决してくれない。忘却のラベルを贴るだけで -voice_1.ogg; 37 | ``` 38 | 39 | 对于视觉小说来说，由于对话一般是脚本的主要组成部分，所以 WebGAL 设计了一个语法糖。如果任何一个脚本的 command 部分无法被解析为任何一种指令，那么 WebGAL 就会将其视为对话。而语音也可以简写其参数，只需要给出文件名即可。如上的对话实际上最终会被解析成 `say` 指令。 40 | 41 | 所以，这段对话的真正表示应该为： 42 | 43 | ``` 44 | say:胸につかえていることを、时は解决してくれない。忘却のラベルを贴るだけで -speaker=森川由绮 vocal=voice_1.ogg; 45 | ``` 46 | 47 | 除此以外，如果对话由一个人物发出，那么在对话人发生改变前，还可以省略人物名称： 48 | 49 | ``` 50 | 森川由绮:胸につかえていることを; 51 | 时は解决してくれない; 52 | 忘却のラベルを贴るだけで; 53 | ``` 54 | 55 | 对于对话的特殊处理大大提高了脚本编写的效率。 56 | 57 | ### 语句解析 Ⅳ 参数解析 58 | 59 | 在 content 后以` -`分隔的是附加参数。格外需要注意的是，附加参数的连字符`-`前需要有空格，否则 WebGAL 可能会认为这不是一个参数而是一个正常的连字符。 60 | 61 | WebGAL 的参数是以 `-key=value`的形式表示的，其中，`key` 的类型为`string`，而`value`的类型则可以动态决定，并可以以下三种可能的类型存在： `string`、`number`、`boolean`。 62 | 63 | 比如 `-key=s`的`value`是 `string`；`-key=1`的`value`是`number`，`-key=true`或`-key=false`的`value`是`boolean`。 64 | 65 | 其中，只写出 `key`而省略`value`的参数会被解析成 `-key=true`，这是一个简写的语法糖。这个语法糖非常重要，因为WebGAL 中有一个重要参数 `-next`，用于表示在执行完当前语句后立刻执行下一条语句。如果没有省略表示，则每次都需要书写`-next=true`。 66 | 67 | ### 语句解析 Ⅴ 资源处理与预加载 68 | 69 | 在进行语句解析的时候，就可以获得语句所需要的资源了。比如，`bgm`语句一般需要音频资源，`playVideo`语句一般需要视频资源，`changeBg`语句一般需要图片资源。WebGAL 场景解析器会将所有场景中语句需要的资源合并起来，用于交给预加载器来预加载资源。同时，当遇到形如`changeScene`、`choose`、`callScene`等需要调用子场景的情况时，子场景也会被扫描出，解析并对其中的资源进行预加载。 70 | 71 | ## 流程控制系统 72 | 73 | ### 准备阶段：步进前操作 74 | 75 | 流程控制模块从场景指令存储模块（这个模块是场景管理模块的子模块）获取一条指令，并进行步进前操作和检查。步进前操作主要包括停止在上一个流程中没有结束的动画、视频等带有持续时间的视觉效果。这个操作是因为当用户在上一个流程还没有结束时就点击鼠标或按下键盘的指定快捷键，意味着用户可能并不想等待到这个流程在抵达持续时间后正常结束，而是想跳过这个流程。这个时候，流程控制系统就会调用对应的提前停止流程函数（每个视觉效果都需要提供一个用于卸载这个效果的函数，调用这个函数将完全卸载这个视觉效果）。而检查则主要包括检查是否存在不能被跳过的视觉效果和检查是否已经到达当前场景的最后一条语句。如果存在不能被跳过的视觉效果（部分视觉效果脚本由于其特殊性，不能被跳过，由文章维护人员设置），则用户必须等待到抵达持续时间结束后，才可以进入下一个流程。而如果当前已经抵达场景的最后一条语句，流程控制模块会检查场景调用栈是否为空，如果不为空，则将栈顶的元素（一个场景对象）替换当前的场景存储模块中存储的场景，并将“当前语句”的指针指向场景的第一条语句，随后执行这一条语句。而如果场景调用栈为空，则可以视为互动阅读流程已经结束，这时候引擎将会跳转回互动阅读的主界面。 76 | 77 | ### 正式阶段 Ⅰ：读指令、执行条件判断 78 | 79 | 在这个阶段，指令将会被读取并进行条件判断。由于每一条指令都可能包含描述执行条件的参数（when参数），所以在每次执行指令时，都要进行条件判断。此时流程控制模块将描述执行条件的参数送到变量与条件判断模块请求条件判断。条件判断模块会解析条件判断表达式，结合引擎存储的内部变量进行条件判断，最终返回一个条件判断结果（真或假）。流程控制模块根据这个结果判断这条指令要不要执行。如果不执行，则跳过接下来的所有流程中的步骤，并重新回到准备阶段，准备读取下一条指令。 80 | 81 | 如果条件判断给出了真的结果，则流程控制模块进入正式阶段II。 82 | 83 | ### 正式阶段 Ⅱ：调用、获取演出控制模块送演出控制器 84 | 85 | 在这个阶段，将正式执行语句的指令所要执行的动作。每一种类型的指令都对应着一种动作，这个动作被存储在指令配置和执行模块。在指令配置和执行模块中，存有指令所对应的动作的配置。动作的配置主要包括指令需要执行哪些状态修改的操作（比如修改“舞台”背景或切换某个位置的人物图像）、哪些动画或特殊效果操作（比如为背景或人物图像添加一段动画效果或启动一段下雨或下雪的特殊效果）、播放一段多媒体资源等。这个配置会被送入指令执行器，具体地被指令执行器执行对应的动作。每个指令执行器执行指定的动作后，都会返回一个“演出控制模块”，这里的“演出”所表示的就是一个具有持续时间的视觉效果。“演出控制模块”主要描述当前流程中正在执行的视觉效果的描述信息和用于卸载这个视觉效果的函数，这个函数会在视觉效果抵达持续时间后被自动调用，或者在用户提前发出指令中断后提前调用。这个模块会被送入“演出控制器”，这个控制器负责维护“演出控制模块”，包括在持续时间抵达后自动卸载“演出”和在用户操作后被处于准备阶段的流程控制器调用提前结束“演出”的方法。 86 | 87 | ### 结束阶段：处理连续演出、更新 Backlog 88 | 89 | 在指令执行结束后，进入结束阶段。在这个阶段，主要处理阅读历史记录的维护。因为我们需要在阅读的过程中记录用户阅读的历史记录，以方便用户在任何时候都可以查看自己的阅读历史，并回到某个记录节点。在传统的纸质图书或图文混排的阅读方式中，用户通常以往回翻页或向上滚动鼠标滚轮的方式来回到一个之前阅读的位置。而互动阅读由于阅读的流程可能会随着用户操作而改变，因此不能使用传统的记录方式（记录页码或滚动位置等）。因此，在每个结束阶段，流程控制模块都会记录当前阅读位置（一般来说是某个场景的第n条指令），以及当前的变量信息和场景状态信息。这样，当用户想要回到过去阅读的某个记录节点时，就可以很方便地读取并恢复到之前阅读的位置。 90 | 91 | ### 自动与快进 92 | 93 | 自动阅读和快进系统本质上就是在指定的间隔内试图代替用户执行步进。自动和快进的主要区别在于，其发出的指令的优先程度和间隔不一样。 94 | 95 | 自动模式下，每隔一段时间（取决于自动模式被设置的速度），就会发出指令给流程控制系统，要求“步进”。自动模式的优先级较低，所以当遇到阻塞自动的演出（绝大多数演出，比如视频播放、对话、动画等都是阻塞自动模式的演出）时，将不会执行，直到没有演出阻塞自动模式。 96 | 97 | 而在快进模式下，绝大多数演出会被跳过，只有像选择支这样的必须用户执行一些操作的演出，不会被跳过。快进模式的触发间隔也明显较短。 98 | 99 | ## 演出控制 100 | 101 | ### WebGAL 演出类型 102 | 103 | ### 演出的自动销毁、结束判断、阻塞逻辑 104 | 105 | ## 舞台控制器与动画控制 106 | 107 | ### 数据驱动的 Pixi 舞台控制器 108 | 109 | ### 动画与“变换”控制 110 | 111 | ### 数据驱动的滤镜管理器 112 | 113 | ## 存读档、回溯与用户数据 114 | 115 | ### WebGAL 舞台状态表介绍 116 | 117 | ### 演出状态的存储与恢复 118 | 119 | ### 存档与其他用户数据的存储 120 | 121 | ## 鉴赏模块，以及一些细枝末节 122 | 123 | ### 鉴赏模块 124 | 125 | ### 离开浏览器状态保持与“继续游戏” 126 | 127 | ### 快捷键与鼠标操作 128 | -------------------------------------------------------------------------------- /src/en/win7.md: -------------------------------------------------------------------------------- 1 | # Windows 7 Using Visual Editor to Start Making 2 | 3 | ## Prerequisites 4 | 5 | ### Install node.js version 14~16.3 6 | 7 | 1. Open [node.js official website node v16.3.0 download address](https://nodejs.org/dist/v16.3.0/) to download the installation package. 8 | 9 | Mirror site: 10 | 11 | 1. Select the appropriate installation package according to your system. 12 | 13 | Be careful to select from the *win-x64*, *win-x86* folders, do not download other files. 14 | 15 | 2. Download *node.exe* inside the corresponding version folder after selecting it. 16 | 17 | 2. Set environment variables to bypass system checks 18 | 19 | 1. Right-click *My Computer / Computer*, and click *Properties* in the menu. 20 | 2. Open *Advanced system settings* in the left panel. 21 | 3. Click *Environment Variables* in the lower right corner. 22 | 4. Add the variable *NODE_SKIP_PLATFORM_CHECK* in the system variables, with a value of *1*. 23 | 5. Save. 24 | 25 | 3. Run the node.js installation package (the *node.exe* you just downloaded) to install node.js. 26 | 27 | --- 28 | 29 | ## Method 1: Use Terre Win7 Support Patch 30 | 31 | ### Download Terre patch that supports Win7 32 | 33 | > Download address: 34 | > 35 | > [GitHub (third-party patch support)](https://github.com/hshqwq/WebGAL_Terre/releases) 36 | > 37 | > [LanZou Cloud (third-party patch support)](https://wwh.lanzoue.com/i2xqa0uy2fuh) 38 | 39 | ### Download the visual editor 40 | 41 | Download the [visual editor](./guide#Method 1 (Recommended): Using WebGAL Editor) corresponding to the patch version and unzip it. 42 | 43 | For the corresponding version, please check files such as *Instructions, README* in the patch, or check the value corresponding to *version* in *package.json*. 44 | 45 | ### Use patch 46 | 47 | Unzip the patch and copy the files in the patch to the root directory of the visual editor. 48 | 49 | ### Install dependencies 50 | 51 | Run *Install_Dependencies.bat* to install dependencies. The appearance of the *node_modules* folder indicates success. 52 | 53 | Manual method: 54 | 55 | 1. Open any terminal. 56 | 57 | 2. Open the directory where the editor is located. 58 | 59 | 3. Run the following command: 60 | 61 | ```bash 62 | npm i 63 | # or (if you have yarn installed) 64 | yarn 65 | ``` 66 | 67 | ### Start the visual editor 68 | 69 | Run *WebGal_Terre-Win7.bat* to start the editor. 70 | 71 | Manual method: 72 | 73 | 1. Open any terminal. 74 | 75 | 2. Open the directory where the editor is located. 76 | 77 | 3. Run the following command: 78 | 79 | ```bash 80 | node main.js 81 | ``` 82 | 83 | ::: tip 84 | 85 | If your computer has installed a version of node lower than 14, please switch to node version 14~16.3 first. 86 | 87 | ::: 88 | 89 | --- 90 | 91 | ## Method 2: Compile from source code (recommended for people with certain programming experience) 92 | 93 | ### Get the source code 94 | 95 | Clone the [WebGAL_Terre](https://github.com/OpenWebGAL/WebGAL_Terre) repository. 96 | 97 | ``` shell 98 | git clone https://github.com/OpenWebGAL/WebGAL_Terre.git 99 | ``` 100 | 101 | ### Package manager (optional) 102 | 103 | Install yarn (optional, recommended) 104 | 105 | ``` shell 106 | npm i -g yarn 107 | ``` 108 | 109 | ### Compile the visual editor 110 | 111 | #### Method 1: Compile the entire visual editor 112 | 113 | 1. Install dependencies 114 | 115 | Install dependencies in the project root directory. 116 | 117 | ```shell 118 | yarn 119 | ``` 120 | 121 | 2. Package the packages other than *Terre* according to the commands in *release.sh*. 122 | 123 | 3. Compile *Terre* manually, refer to [*Compile Terre Only*](./#Method 2: Compile *Terre* Only). 124 | 125 | #### Method 2: Compile *Terre2* Only 126 | 127 | 1. Open *packages/terre2*. 128 | 129 | 2. Install dependencies 130 | 131 | ``` shell 132 | yarn 133 | ``` 134 | 135 | 3. Package *terre2* 136 | 137 | ``` shell 138 | yarn run build 139 | ``` 140 | 141 | 4. Delete all *.d.ts* ending files in the *dist* directory (optional). 142 | 143 | 5. Add a *package.json* file in *dist*, content (note to fill in the relevant information): 144 | 145 | ```json 146 | { 147 | "name": "webgal-terre-2-win7-server", 148 | "version": "version number", 149 | "description": "", 150 | "private": true, 151 | "license": "MPL-2.0", 152 | "dependencies": { 153 | "@nestjs/common": "^8.0.0", 154 | "@nestjs/core": "^8.0.0", 155 | "@nestjs/platform-express": "^8.0.0", 156 | "@nestjs/serve-static": "^2.2.2", 157 | "open": "^8.4.0", 158 | "reflect-metadata": "^0.1.13", 159 | "rimraf": "^3.0.2", 160 | "rxjs": "^7.2.0", 161 | "vscode-languageserver": "^8.1.0", 162 | "ws": "^8.8.1" 163 | } 164 | } 165 | ``` 166 | 167 | 6. Copy the `dist` directory to the compiled editor directory. 168 | 169 | ### Run the visual editor 170 | 171 | 1. Install dependencies in the visual editor directory. 172 | 173 | ``` shell 174 | npm i 175 | # or (yarn recommended) 176 | yarn 177 | ``` 178 | 179 | 2. Run `node main.js` to start the visual editor. It can be written as a bat, sh script according to needs. -------------------------------------------------------------------------------- /src/.vuepress/theme.ts: -------------------------------------------------------------------------------- 1 | import { hopeTheme } from "vuepress-theme-hope"; 2 | import { enNavbar, jaNavbar, zhNavbar } from "./navbar/index.js"; 3 | import { enSidebar, jaSidebar, zhSidebar } from "./sidebar/index.js"; 4 | 5 | export default hopeTheme({ 6 | hostname: "https://docs.openwebgal.com", 7 | 8 | author: { 9 | name: "Mahiru", 10 | url: "https://github.com/MakinoharaShoko", 11 | }, 12 | 13 | iconAssets: "fontawesome-with-brands", 14 | 15 | logo: "/favicon.ico", 16 | 17 | repo: "OpenWebGAL/WebGAL_Doc", 18 | 19 | docsDir: "src", 20 | 21 | locales: { 22 | "/": { 23 | // navbar 24 | navbar: zhNavbar, 25 | 26 | // sidebar 27 | sidebar: zhSidebar, 28 | 29 | footer: "MPL-2.0 Licensed", 30 | 31 | displayFooter: true, 32 | 33 | metaLocales: { 34 | editLink: "在 GitHub 上编辑此页", 35 | }, 36 | }, 37 | 38 | /** 39 | * Chinese locale config 40 | */ 41 | "/en/": { 42 | // navbar 43 | navbar: enNavbar, 44 | 45 | // sidebar 46 | sidebar: enSidebar, 47 | 48 | footer: "MPL-2.0 Licensed", 49 | 50 | displayFooter: true, 51 | 52 | // page meta 53 | metaLocales: { 54 | editLink: "Edit this page on GitHub", 55 | }, 56 | }, 57 | "/ja/": { 58 | // navbar 59 | navbar: jaNavbar, 60 | 61 | // sidebar 62 | sidebar: jaSidebar, 63 | 64 | footer: "MPL-2.0 Licensed", 65 | 66 | displayFooter: true, 67 | 68 | // page meta 69 | metaLocales: { 70 | editLink: "Edit this page on GitHub", 71 | }, 72 | }, 73 | }, 74 | 75 | //导航栏布局 76 | navbarLayout: { 77 | start: ["Brand"], 78 | center: [], 79 | end: [ 80 | "Links", 81 | "Language", 82 | // "Repo", 83 | "Outlook", 84 | "Search" 85 | ], 86 | }, 87 | 88 | // encrypt: { 89 | // config: { 90 | // "/demo/encrypt.html": ["1234"], 91 | // }, 92 | // }, 93 | 94 | //插件选项 95 | plugins: { 96 | // You should generate and use your own comment service 97 | // comment: { 98 | // provider: "Giscus", 99 | // repo: "vuepress-theme-hope/giscus-discussions", 100 | // repoId: "R_kgDOG_Pt2A", 101 | // category: "Announcements", 102 | // categoryId: "DIC_kwDOG_Pt2M4COD69", 103 | // }, 104 | 105 | // All features are enabled for demo, only preserve features you need here 106 | mdEnhance: { 107 | align: true, 108 | attrs: true, 109 | chart: true, 110 | codetabs: true, 111 | demo: true, 112 | echarts: true, 113 | figure: true, 114 | flowchart: true, 115 | gfm: true, 116 | imgLazyload: true, 117 | imgSize: true, 118 | include: true, 119 | katex: true, 120 | mark: true, 121 | mermaid: true, 122 | playground: { 123 | presets: ["ts", "vue"], 124 | }, 125 | presentation: ["highlight", "math", "search", "notes", "zoom"], 126 | stylize: [ 127 | { 128 | matcher: "Recommended", 129 | replacer: ({ tag }) => { 130 | if (tag === "em") 131 | return { 132 | tag: "Badge", 133 | attrs: { type: "tip" }, 134 | content: "Recommended", 135 | }; 136 | }, 137 | }, 138 | ], 139 | sub: true, 140 | sup: true, 141 | tabs: true, 142 | vPre: true, 143 | vuePlayground: true, 144 | }, 145 | 146 | // uncomment these if you want a pwa 147 | // pwa: { 148 | // favicon: "/favicon.ico", 149 | // cacheHTML: true, 150 | // cachePic: true, 151 | // appendBase: true, 152 | // apple: { 153 | // icon: "/assets/icon/apple-icon-152.png", 154 | // statusBarColor: "black", 155 | // }, 156 | // msTile: { 157 | // image: "/assets/icon/ms-icon-144.png", 158 | // color: "#ffffff", 159 | // }, 160 | // manifest: { 161 | // icons: [ 162 | // { 163 | // src: "/assets/icon/chrome-mask-512.png", 164 | // sizes: "512x512", 165 | // purpose: "maskable", 166 | // type: "image/png", 167 | // }, 168 | // { 169 | // src: "/assets/icon/chrome-mask-192.png", 170 | // sizes: "192x192", 171 | // purpose: "maskable", 172 | // type: "image/png", 173 | // }, 174 | // { 175 | // src: "/assets/icon/chrome-512.png", 176 | // sizes: "512x512", 177 | // type: "image/png", 178 | // }, 179 | // { 180 | // src: "/assets/icon/chrome-192.png", 181 | // sizes: "192x192", 182 | // type: "image/png", 183 | // }, 184 | // ], 185 | // shortcuts: [ 186 | // { 187 | // name: "Demo", 188 | // short_name: "Demo", 189 | // url: "/demo/", 190 | // icons: [ 191 | // { 192 | // src: "/assets/icon/guide-maskable.png", 193 | // sizes: "192x192", 194 | // purpose: "maskable", 195 | // type: "image/png", 196 | // }, 197 | // ], 198 | // }, 199 | // ], 200 | // }, 201 | // }, 202 | }, 203 | }); 204 | --------------------------------------------------------------------------------