myshmup.com 允许在浏览器中创建 shmup(射击)游戏,我们可以使用具有创意通用许可证的资源或上传自己的艺术作品和声音。 创建的游戏可以在网站上发布。 该平台不需要编码,游戏对象的配置是在用户界面的帮助下执行的,后端是使用Django框架开发的,编辑器 UI 用 Javascript 编写并使用REACT框架游戏用 Typescript 编写并调用低级 Webgl API 进行渲染。
接下来,我将解释我在游戏部分使用的优化,以确保在大多数浏览器中获得流畅的 60PS 体验。
1,Webgl API
Webgl(Web 图形库)API 允许使用现代 GPU 在浏览器内渲染图形,为了让 GPU 工作,你需要提供两个称为着色器的函数:顶点着色器和片段着色器。 着色器是用类似于 C++ 的 GLSL(GL Shader Language)编写的。
顶点着色器旨在计算场景的顶点位置。 然后,顶点着色器的输出被发送到片段着色器,片段着色器计算渲染的所有像素的颜色。 在 myshmup.com 中,我使用了一对简单的顶点和片段着色器。 它们仅处理 2D 矩形作为原始形状,每个矩形都有自己的纹理要绘制在其表面上。 可以调整纹理颜色以启用闪烁效果。 大多数渲染工作包括向着色器提供每帧所需的数据。