Godot 4.2 Web Export 导出小坑

我真的服了再也没有愉快的项目一拖就完事

Godot 4.0~4.2 较 3.0 在 HTML 导出上的区别

WebGL 改用 2.0, 使用 JavaScript SharedArrayBuffer 特征。这些导致:

  • HTML5 的兼容性可能变差
  • C# 项目暂时无法导出,只能用 Godot 3(这相当于项目要进行许多重写,因为 3 和 4 有许多语法和属性差别,e.g. @ 写法和 shader 相关属性)
  • 4.0 项目无法直接托管,如 GitHub Page、Netlify (详情下一节)

JavaScript::SharedArrayBuffer

尽管这一特征赋能音频低延迟,但是,这使得从其他页面加载的脚本也可以访问这个共享内存,从而使页面面临安全漏洞。

因此,在网页部署由 Godot 4.0~4.2 导出的 HTML5 项目时,需要在网站 header 中配置 COOP 和 COEP。

部署分为 2 种场景:可以配置 response header / 无法配置

目前来说 SharedArrayBuffer 特征是必需的,但有可能 4.3 起会被移除(来源:Godot 4.3 will FINALLY fix web builds, no SharedArrayBuffers required!

对于 web 游戏开发者,停留在 3.0 是个更好的选择(我相信不会有人在 web 这侧写重度 3D 性能项目)

可以配置 Response header

以 Netlify 平台为例,netlify 可以在项目中添加一个 netlify.toml 文件启用特征:

# netlify.toml


[[headers]]
for = "/*"

[headers.values]
Cross-Origin-Opener-Policy = "same-origin"
Cross-Origin-Embedder-Policy = "require-corp"

其他自行运行 web server 的,如 Nginx 和 Apache, 反正主要是配置中这些属性对应就行:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

itch.io 已经可以开启 SharedArrayBuffer 支持了,这个具体参见 参考第2条

无法配置 Response header

引入一个 JS 脚本:coi-serviceworker

只要把其中的 coi-serviceworker.js / coi-serviceworker.min.js 置于 Godot 4.0~4.2 导出的结果文件夹内,并在项目导出配置页面添加对应 header 即可。

// coi-serviceworker.js
<script src="coi-serviceworker.js"></script>
// coi-serviceworker.min.js
<script src="coi-serviceworker.min.js"></script>

参考

  1. https://github.com/godotengine/godot-docs/blob/master/tutorials/export/exporting_for_web.rst
  2. https://www.rafa.ee/articles/deploying-godot-4-html-exports/
Licensed under CC BY-NC-SA 4.0
comments powered by Disqus
Built with Hugo
Theme Stack designed by Jimmy