Web 产物播放指南

设计人员在 GE 的编辑器导出 Web 产物，得到一个压缩包。开发人员拿到这个压缩包后，应该如何使用呢？请参考按下步骤。

解压压缩包

首先，我们将压缩包解压。解压后的目录结构如下图所示：

上面的目录包含了以下文件：

• JSON 文件：GE 运行时加载播放的主文件。
• images：图片资源，上面为一张 WebP/PNG 图片。图片通常为合并后的、类似于雪碧图的图片。GE 运行时会优先加载 WebP 图片。如果有其他格式的资源，还会包含其他目录比如 spines。
• downgrade：此目录中文件为一张降级图片。当 GE 运行时播放发生错误时（比如设备不支持 WebGL ）将会触发 onError，此时可以展示降级图作为兜底手段。一般来说，GE 正常播放的覆盖率约为 95%。

上传 CDN

然后，我们需要将 JSON 文件与 images 目录上传至 CDN，同时要保证这两者的相对路径一样，比如 JSON 的地址为：

• https://my-cdn.com/animations/promotion/新建合成7.json

那么图片的地址需要为：

• https://my-cdn.com/animations/promotion/images/64...11fd.webp
• https://my-cdn.com/animations/promotion/images/b3...6c08.png

JSON 文件的名称可自定义。图片等资源的名称及路径不可修改。

如果涉及版本号管理，可自行通过外层目录名称（比如上面的 promotion）区分。

播放

得到 JSON 地址后，我们只需要将 JSON 地址传给 GE 运行时播放即可，如下代码所示：

import { Player } from '@galacean/effects';

const container = document.getElementById('container');
const player = new Player({ container });
const json = 'https://my-cdn.com/animations/promotion/新建合成7.json';
player.loadScene(json);

更多播放介绍详见：《播放动画》。

如果在本地测试播放，可以启动一个 http-server，作为静态资源服务。在解压后的目录下执行：

$ http-server --cors

那么就可以访问 JSON 的地址：http://localhost:8080/新建合成7.json

将此 JSON 地址作为本地播放加载的 JSON 地址。