# 把游戏移植到网页

> 浏览器构建没有文件系统、有硬性内存上限，而且下载过程是玩家盯着看的。这三点决定了整次移植。

- URL: https://www.summerengine.com/zh/port-a-game-to-web
- Keyword: 移植游戏到网页
- Related: https://www.summerengine.com/zh/porting

把游戏移植到网页，意思是为一款你拥有的游戏构建一个通过 WebAssembly 和浏览器图形 API 运行的浏览器版本。有一条事实是 Summer Engine 特有的。Summer 可以为 GDScript 项目导出网页版本，你把它发布到 Summer Games，玩家就能在浏览器中游玩。本页说明浏览器版本需要什么。

网页是唯一让玩家看着你的下载条走完的平台。每一兆字节都是一次离开的机会。内存上限比桌面低，在移动浏览器上尤其如此。没有文件系统，所以存档放在玩家可以清掉的浏览器存储里。在玩家与页面交互之前，音频不能开始播放。

作为交换，你得到即点即玩、一个可以发到任何地方的链接，以及不需要商店审批。所以当你的引擎支持时，网页版本很适合作为桌面发行之外的试玩形式。

## 体积和加载时间决定成败

动手之前先定下载预算，然后照着它设计。压缩贴图，把任何不会以全分辨率显示的东西降采样，音频按合理码率转成 OGG，并把未使用的内容从导出里剔掉。快速加载出一个可玩的首场景，其余的流式或惰性加载。展示真实进度，而不是转圈动画。一个要三十秒才能开始的网页构建，会失去多数点进来的人。

## 需要在代码里绕开的浏览器约束

音频上下文在用户操作之前保持挂起，所以要加一个点击开始的界面。存储是浏览器本地的，可以被清掉，所以把存档当作尽力而为，如果进度重要就提供导出或云端选项。标签页会被切到后台并降频，所以在可见性变化时暂停。使用时间增量，因为帧率的波动比原生更大。全屏和指针锁定都需要用户操作触发。移动浏览器内存更紧，也没有键盘。

## 页面上的输入

支持键盘鼠标、通过浏览器手柄 API 的手柄，以及移动端的触摸。当玩家在画布上按方向键或滑动时，阻止页面滚动。处理玩家点到游戏之外时的失焦。让画布对不同窗口尺寸自适应，而不是假定一个固定分辨率，并且在小笔记本窗口和整块桌面显示器上都测一遍。

## 托管在哪里

Summer 的网页版本是一个标准的静态 .zip 文件，根目录包含 index.html，Summer Games 就是发布它的地方。itch.io 托管 HTML5 版本并负责嵌入，限制为总大小 500 MB、单个文件 200 MB、最多 1000 个文件。Newgrounds 和网页游戏门户仍然接收浏览器作品，可以按流量或分成付费。自建托管用任何静态托管都行。Godot 4.3 及更高版本的单线程版本不需要特殊响应头，多线程版本则需要跨源隔离响应头。浏览器试玩也能给 Steam 页面导流，很多开发者会在付费桌面版旁边提供一个免费网页试玩。

## FAQ

### 浏览器构建能用 C# 吗？

用 C# 做不到。Godot 4 无法把 C# 项目导出到网页，这一点在 Summer 中同样成立。在 Summer 中，GDScript 项目可以导出网页版本，你把它发布到 Summer Games。C# 可在 Summer 桌面编辑器中用于制作桌面版本。

### 我的网页构建为什么加载这么慢？

几乎总是下载体积和未压缩的资源。先缩小贴图和音频，剔掉未使用的内容，然后把加载拆开，让一个可玩场景先出现，其余的随后到。

### 网页构建在手机上能用吗？

能，但需要做设计。移动浏览器内存更少、没有键盘、只有触摸输入，所以要规划更低的资源预算和触摸操作，而不是照搬桌面布局。

### 玩家能在浏览器游戏里保存进度吗？

能，通过浏览器存储，但它可能被玩家或浏览器清掉。对长流程游戏，加上导出码、文件下载，或基于账号的存档。

### 同一个项目也能发到 Steam 吗？

能。Summer 可导出用于 Steam 的 Windows 和 macOS 桌面版本，GDScript 项目还可以导出网页版本，所以 Summer Games 上的免费浏览器试玩版可以和 Steam 版本同时提供。

[开始重建](https://www.summerengine.com/zh/download)

---

## Machine-readable resources

- Site index for agents: https://www.summerengine.com/llms.txt
- Full inlined content: https://www.summerengine.com/llms-full.txt
- Porting catalog: https://www.summerengine.com/llms-porting.txt
- Structured catalog: https://www.summerengine.com/agent-catalog.json
- Sitemap: https://www.summerengine.com/sitemap.xml
- Developer resources: https://www.summerengine.com/docs
- Summer API (assets from any agent or code; public per-call model prices): https://docs.summerengine.com/api