文章图片

Godot 游戏简介
Godot 是一款免费开源的游戏制作引擎 。 它也非常轻量级 ， 整个安装包不到 100M ， 却又功能齐全 ， 易于上手 。 作为一个后期之秀 ， Godot 并未得到多少关注 ， 尤其是中文的社区资料就比较少 。 但如果你在 github 上搜索 “game” 或者 “game engine” ， 按照星标数排序 ， 就能看到 Godot 以 43.7k star 排名第一 ， 紧随其后的分别是 pixijs（34.7k star）和 phaser （30.7k star） 。
它的引擎整个是开源的 ， 并且是 MIT 协议 ， 这也就意味着你可以在它的代码上改一改 ， 就可以宣布自己做了个游戏引擎 ， 要拿出去商用也都是可以的 。 引擎制作的游戏可以导出到多个平台 ， 如 Windows、Linux、Android、iOS、Web 等等 。
Canvas、WebGL、WebAssembly
现如今如果要在以浏览器内核运行游戏 ， 你就会频繁听到以上这些概念 。 他们都与 Java 有点关系 ， 但彼此又不太相同 。 Canvas 其实是 HTML5 的一部分 ， 可以用脚本去控制一些 2D 元素的渲染 。 而 WebGL 则脱胎于 OpenGL ， 是一套图形的 API 标准 ， 可以在 Web 端渲染 3D 的图像 。 WebGL 是 OpenGL 的 web 实现 ， 主要用于在浏览器上展示 3D 图形的底层图形技术 。
这样 ， 网页端游戏的第一大类实现 ， 就是基于 WebGL 的 ， 例如微信小程序、Cocos Creator、Pixijs 等 。
拿微信小游戏举例 ， 它其实是封装了一层 runtime 环境 ， 从底层操作系统开始 ， 封装出了一层 Java API ， 它和 WebGL 长得一样 。 上层的使用者（如 Cocos ）就基于这层接口做开发 。 但这个 runtime 又是一层阉割版的浏览器内核 ， 它实现 HTML5 的部分内容 。 如果要操作原生 DOM ， 这在 chrome 里是可以 ， 但在小程序的 runtime 里就不行 。 参考 https://forum.cocos.org/t/faq/54842
而 WebAssembly 则可以看作是汇编版的 Java ， 弥补 Java 在执行效率上的缺陷 。 可以通过 Emen 这样的工具 ， 直接从 C/C++ 程序编译出可以在网页端运行的二进制代码 。 参考 https://developer.mozilla.org/zh-CN/docs/WebAssembly/Concepts
这也就意味着 ， 如果以 C++ 写的引擎代码 ， 可以直接编译到网页端运行 ， 以 JS 作为胶水来粘合 。 这就形成了网页端游戏的第二大类实现 ， 我们说它是基于 WebAssembly 的 ， 把游戏引擎搬到了网页中 ， 例如 Unity、Godot 等 。 这里的引擎有 WebGL 的部分 ， 也有其他的（例如物理系统等等） 。
包的导出
在 Godot 中导出到网页的操作是比较容易的 ， 选择 Project -> Export ， 添加 HTML5 的导出模板即可 。 在添加之后 ， 工具栏上也会出现一个按钮 ， 点击之后可以直接在网页端预览效果 ， 十分地方便 ， 如下图所示：

文章图片

打开导出的文件 ， 主要会包含 index.html、index.pck、index.wasm ， 还有一些 js 的胶水文件 。 index.pck 是场景、素材、资源文件的打包 ， 而 index.wasm 即是游戏的引擎文件 。 占据主要大小的是后两者 。
关于 pck 文件及优化
一般来说 ， pck 文件中会包含场景（.tscn）、脚本（.gd） ， 还有资源（.jpg, .ttf）等 。 代码和场景都还好 ， 一般占大头的是图片等资源 。 对于特别大的图片 ， 可以选中图片资源、双击 ， 切换到 Import 选项卡 ， 在 Compression 的模式中选择 Lossy（有损） ， 如下图所示：

文章图片

更多的导入选项可以参考文档
https://docs.godotengine.org/en/stable/getting_started/workflow/assets/importing_images.html