React中Phaser如何从Bootstrap场景预加载资源到GameScene？

算力阿峰

2026-7-28

解决方案

情况1：无需重复加载，直接使用资源

Phaser中的资源是全局共享的——只要Bootstrap场景已经完成预加载（你的配置里已经把它放在场景数组的第一位，会优先执行），GameScene不需要在preload里写任何加载代码，直接在create方法中使用这些资源即可：

create() {
  // 直接使用Bootstrap加载好的资源
  const player = this.add.sprite(100, 100, 'adam');
  const map = this.make.tilemap({ key: 'tilemap' });
  const tileset = map.addTilesetImage('Serene_Village_48x48_extruded', 'tiles');
  // 其他资源使用逻辑...
}

情况2：复用Bootstrap的预加载逻辑（避免重复代码）

如果需要让GameScene也能独立加载这些资源（比如场景执行顺序不确定），可以把加载逻辑抽成独立函数复用：

创建共享加载工具函数（比如src/utils/preloadSharedAssets.js）：

export const preloadSharedAssets = (scene) => {
  scene.load.spritesheet('adam', 'sprites/adam.png', {
    frameWidth: 32,
    frameHeight: 48,
  });
  scene.load.image('tiles', 'maps/Serene_Village_48x48_extruded.png');
  scene.load.image('collision', 'maps/Collision_48x48.png');
  scene.load.tilemapTiledJSON('tilemap', 'maps/SereneVillage_Demo.json');
};

修改Bootstrap场景调用该函数：

import Phaser from 'phaser';
import { preloadSharedAssets } from '@/utils/preloadAssets';

export default class Bootstrap extends Phaser.Scene {
  constructor() {
    super('Bootstrap');
  }

  preload() {
    preloadSharedAssets(this);
  }
}

在GameScene的preload中调用同一函数：

import Phaser from 'phaser';
import { preloadSharedAssets } from '@/utils/preloadAssets';

export default class GameScene extends Phaser.Scene {
  constructor() {
    super('GameScene');
  }

  preload() {
    preloadSharedAssets(this);
  }
}