企业官网建设流程全解析

Godot Web导出快速上手：30分钟把 HTML5 游戏发布到浏览器

【免费下载链接】godot-docsGodot Engine official documentation项目地址: https://gitcode.com/GitHub_Trending/go/godot-docs

玩家点开一个链接，几秒后游戏就在浏览器里跑起来了——不用下载、不用安装、不经过应用商店。这篇文章带你走完 Godot Web导出 的完整流程：从安装导出模板、单线程与多线程的取舍，到浏览器埋下的坑和上线前自查，一天之内让你的 Godot 游戏多出一个可以直接丢给朋友玩的网页链接。

为什么值得发网页版

• 免安装、即点即玩，试玩门槛从"下载几百兆"降到"打开一个链接"
• 传播快：一个链接能直接发群聊、社交平台、文章里，不用过应用商店审核
• 跨端通用：桌面、手机、平板的浏览器都能跑，不用单独打包
• 方便试玩验证：把新做的功能发给协作者，丢个链接比装客户端舒服得多

发布前的 3 分钟准备

先确认环境：Web 导出依赖 WebAssembly（让浏览器安全快速运行编译后游戏代码的方式）和 WebGL 2.0（浏览器的 3D 绘图接口），现代 Chrome、Firefox、Safari 都满足。另外 Godot 4 在浏览器里只能使用兼容（Compatibility）渲染方法，Forward+/Mobile 不受支持。

然后是模板和预设，三步搞定：

1. 编辑器菜单 → 管理导出模板，下载并安装与你版本匹配的 Web 导出模板。没有模板就导出不了，这是新手最容易卡住的一步。

2. 项目 → 导出 → 添加，选择 Web 平台新建预设，并把导出主文件命名为index.html（服务器访问目录时默认加载它）。
3. 点编辑器顶栏新增的"在浏览器中运行"按钮，本地先试跑一遍。

预设面板里就是导出选项的主战场：线程支持、VRAM 纹理压缩、PWA 等都在这里，下一节说最关键的开关。

一个关键抉择：单线程还是多线程

先说结论：多数项目选单线程就够了。Godot 4.3 起单线程就是 Web 导出的默认方式，官方文档也是这么推荐的。

关键在"服务器要求"这一行。多线程导出依赖浏览器的 SharedArrayBuffer 能力，出于安全考虑，浏览器要求服务器下发两个 CORS 头（告诉浏览器"这个页面是隔开的，别怕"），同时整个页面不能挂广告、不能有第三方脚本——游戏托管站点基本做不到。

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

所以选择流程其实很简单：

只有自建服务器、且确实需要性能时，才考虑多线程。

浏览器会给你埋的坑

浏览器不是游戏平台，为了"安全"设了不少限制，最常见的四个都在这里。

1. 开场没声音

   • 表现：页面加载完，音乐音效全静默
   • 原因：浏览器限制自动播放音频，必须用户先动手
   • 怎么填：⚠️ 加一个"点击开始"启动画面，在第一次点击时解锁音频

2. 黑屏白屏跑不起来

   • 表现：多线程版本本地正常，传到服务器就不启动
   • 原因：服务器没发上面那两个 CORS 头，浏览器不放行 SharedArrayBuffer
   • 怎么填：服务器配置头；或者启用 PWA，内置的 service worker 可以"模拟"这两个头；或者直接换单线程
   • 顺带核对 MIME：.wasm要按application/wasm下发，.pck用application/octet-stream，MIME 给错可能让启动优化失效

3. 全屏、鼠标捕获没反应

   • 表现：全屏按钮按了没效果，光标藏不住
   • 原因：浏览器只允许在"用户输入事件"的响应中触发这些操作
   • 怎么填：在_input的按键/鼠标事件回调里处理；在_process里查询 Input 状态不算数

4. 存档刷新就没

   • 表现：写到user://的存档下次访问时时有时无，隐私模式下必挂
   • 原因：网页存储靠 IndexedDB，浏览器可能自行清理，持久性不保证
   • 怎么填：用OS.is_userfs_persistent()检查持久性，引导玩家把页面加到主屏幕

另外一句：剪贴板、手柄、麦克风等功能只在 HTTPS 页面可用，正式发一定要上 HTTPS（本机 localhost 除外）。

如果你开了 PWA 的离线缓存，还有个隐藏坑：service worker 的缓存可能一直给你旧版游戏。在开发者工具（F12）的 Application 面板里注销旧的 service worker再刷新即可。

让加载快起来的 3 件事

下载体积直接决定你流失多少玩家，按这三件事做就行：

1. 开服务器压缩。.wasm和.pck是两个大头，gzip 能把 wasm 压到原始体积的约四分之一。不少网页游戏托管平台不做即时压缩，自己预压缩（Brotli 更好）再上传更稳。
2. 裁剪纹理与未用功能。导出选项里打开 VRAM 纹理压缩；如果自建导出模板，把游戏用不到的特性关掉，.wasm体积能明显变小——2D 游戏没必要带着 3D 物理走。
3. 配好缓存策略。.wasm、.pck发长期缓存头，.html发短期缓存；开了 PWA 还会多一份 service worker 缓存，首开之后支持离线再玩。

发布前自查清单

• Chrome、Firefox、Safari 桌面端各跑一遍（Safari 的 WebGL 2.0 问题偏多）
• 启动画面有用户操作来解锁音频
• 导出主文件叫index.html，其余导出文件原样放在同目录、未改名
• 服务器已为.wasm和.pck开启 GZIP/Brotli 压缩
• .wasm的 MIME 是application/wasm
• 用多线程的话，在 Network 面板确认两个 CORS 头真的下发了
• 手机真机测过加载速度、帧率和存档持久性
• 开 PWA 的已验证图标显示和离线加载
• 打开 F12 控制台，确认没有红色报错

想再深一层，可以看仓库里的 tutorials/export/exporting_for_web.rst（Web 导出官方完整文档）；想定制加载页外观和页面品牌，看 tutorials/platform/web/customizing_html5_shell.rst。

【免费下载链接】godot-docsGodot Engine official documentation项目地址: https://gitcode.com/GitHub_Trending/go/godot-docs