跳到主要内容

预加载

在 Web 上,尽快让用户进入应用十分重要。PlayCanvas 资源系统提供预加载,确保应用启动前关键资源已经就绪。

预加载标记​

每个资源都有 preload 属性。设为 true 时,会在应用进入 initialize 阶段前完成下载并创建运行时资源。

应用启动后立即需要的资源应使用预加载,避免应用运行后才突然出现。

提示

在 PlayCanvas 编辑器中,可通过资源属性面板设置预加载标记。新资源默认启用预加载。

资源何时加载?​

资源按以下规则加载:

  1. 预加载资源(preload = true)在应用启动前加载。
  2. 被引用资源在已启用组件引用它们时加载。对于场景中已启用的实体,这发生在预加载完成后。
  3. 依赖资源在上层资源加载时加载。例如模型加载时会加载其引用的材质,材质又会加载其引用的纹理。

流式加载与预加载​

未预加载的资源会在需要时流式加载。组件会等待资源就绪后再开始工作,但可能出现模型已经显示、纹理仍在加载的视觉突现。

通过标签加载资源组​

为避免突现,可以在显示前先加载一组资源。使用资源标签将资源组织为逻辑分组:

// 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 元素、玩家模型及其他启动时立即需要的内容。
  • 流式加载大型资源:背景音乐、远处场景和可选内容。
  • 按关卡使用标签:按关卡或区域分组,一起加载相关资源。
  • 显示加载进度:为流式加载内容提供进度提示。

另请参阅​