[email protected]’s Humble Abode       博  客   时 间 线   归  档 



WebGAL开发日志1:我如何打造一个网页版的Galgame游戏引擎
Published on Mon Sep 27 2021 12:00:01 GMT+0000

项目地址:https://github.com/MakinoharaShoko/WebGAL
演示地址(可能需要科学冲浪):http://msfasr.com/WebGAL_Demo_Page/

正文:
作为一个 Galgame 爱好者,我一直有一个设想,未来的 Galgame 能否做到仅需要一个浏览器就可以访问并随时游玩?答案是肯定的,并且也已经有先行者在这方面做出了尝试。橙光游戏早就做到了在网页上实现文字冒险游戏的运行,并打造了自己的社区;bilibili也通过推出互动视频的方式,让无数up主可以使用互动视频制作 galgame 。

但是,这两者都存在部分缺陷。橙光游戏的引擎并非完全基于浏览器,其对于多设备的适应性并不好,对于屏幕缩放比例的更改也缺乏页面自适应。bilibili 的互动视频由于是以视频为载体,相对来说更难制作(因为你需要视频制作的基础),并且更加消耗流量。更致命的是,你只能按章节存档,而不能像真正的 Galgame 一样做到更加自由的存档。因此,我便产生了用 React 打造一个完全基于 Web 的 Galgame 游戏引擎的想法,并尽可能简化制作难度,使得大多数语句只需要1分钟即可学会,从而让这项成果能够惠及所有热爱 Galgame 的人。

目前,基础界面的设计已经基本完成,场景跳转的分支选择已经可用。接下来没有完成的工作主要是存档与读档模块、设置界面的完善、自动播放、快进、剧本回溯等功能。接下来请允许我介绍基本功能的实现情况:

img

img

img

现在,基本的文字显示功能已经几乎完全实现,分支选择的功能也已经几乎完全实现。切换背景和立绘的功能也几乎完全实现。它们的语法也极其简单:

1
2
3
4
5
6
7
8
9
10
11
12
人物对话语法:
人物:要说的话;
例如:
雪之下雪乃:良好的显示效果能够使玩家在游玩时感到赏心悦目,与此相对的,如果渐变显示过于僵硬、或是喧宾夺主,都会大幅降低游戏体验;
切换背景语法:
changeBG:背景.jpg;
切换立绘语法:
changeP:立绘.png;
切换场景语法:
changeScene:场景2.txt;
分支选择语法:
choose:{选择分支1:分支1.txt,选择分支2:分支2.txt};

我希望通过减小语法的难度,来简化开发者的开发成本,使得他们无需关心如何实现,只需要将注意力放在编写有趣的剧本和绘制精美的立绘上。相比于互动视频和橙光游戏的要求,使用这套引擎只需要你有一个 idea ,有背景和立绘的素材,即可立刻开始制作,并将你的制作成果轻易地与全世界的爱好者分享。(通过免费的GitHub Pages部署)。如果开发者有自己的 Web 服务器,那部署就更加容易了。但为了能够让所有人都能体验制作 Galgame 的乐趣,我今后可能会发表一篇教程,讲述如何部署到GitHub Pages。

这个项目是我学习 React 的练手项目,所以许多地方可能都有欠考虑和需要优化的点,我相信随着该工程的持续开发与我前端水平的提高,这个引擎会变得越来越好。虽然 Galgame 注定是一个只属于死宅的小众游戏类别,但是我还是想为此尽一份绵薄之力。

共勉!