预加载
在 Web 上,尽快让用户进入应用十分重要。PlayCanvas 资源系统提供预加载,确保应用启动前关键资源已经就绪。
预加载标记
每个资源都有 preload 属性。设为 true 时,会在应用进入 initialize 阶段前完成下载并创建运行时资源。
应用启动后立即需要的资源应使用预加载,避免应用运行后才突然出现。
提示
在 PlayCanvas 编辑器中,可通过资源属性面板设置预加载标记。新资源默认启用预加载。
资源何时加载?
资源按以下规则加载:
- 预加载资源(
preload = true)在应用启动前加载。 - 被引用资源在已启用组件引用它们时加载。对于场景中已启用的实体,这发生在预加载完成后。
- 依赖资源在上层资源加载时加载。例如模型加载时会加载其引用的材质,材质又会加载其引用的纹理。
流式加载与预加载
未预加载的资源会在需要时流式加载。组件会等待资源就绪后再开始工作,但可能出现模型已经显示、纹理仍在加载的视觉突现。
通过标签加载资源组
为避免突现,可以在显示前先加载一组资源。使用资源标签将资源组织为逻辑分组:
// Find all assets tagged for level 1
const assets = this.app.assets.findByTag('level-1');
let loadedCount = 0;
// Load each asset
for (const asset of assets) {
asset.once('load', () => {
loadedCount++;
if (loadedCount === assets.length) {
// All level-1 assets are loaded
this.startLevel();
}
});
this.app.assets.load(asset);
}
也可以使用更复杂的标签查询:
// Assets tagged with BOTH 'level-1' AND 'enemy'
const enemies = this.app.assets.findByTag(['level-1', 'enemy']);
// Assets tagged with 'level-1' OR 'level-2'
const assets = this.app.assets.findByTag('level-1', 'level-2');
最佳实践
- 预加载关键资源:UI 元素、玩家模型及其他启动时立即需要的内容。
- 流式加载大型资源:背景音乐、远处场景和可选内容。
- 按关卡使用标签:按关卡或区域分组,一起加载相关资源。
- 显示加载进度:为流式加载内容提供进度提示。