loading-assets

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Loading Assets

加载资源

The Phaser Loader (
this.load
) handles fetching all external content: images, audio, JSON, tilemaps, atlases, fonts, scripts, and more. Assets are queued in
preload()
, loaded in parallel, and placed into global caches accessible by every Scene.
Key source paths:
src/loader/LoaderPlugin.js
,
src/loader/File.js
,
src/loader/filetypes/
,
src/loader/events/
Related skills: ../game-setup-and-config/SKILL.md, ../scenes/SKILL.md, ../sprites-and-images/SKILL.md
Phaser Loader(
this.load
)负责获取所有外部内容:图片、音频、JSON、瓦片地图、图集、字体、脚本等。资源在
preload()
中排队,并行加载,然后放入全局缓存,供所有Scene访问。
核心源码路径:
src/loader/LoaderPlugin.js
src/loader/File.js
src/loader/filetypes/
src/loader/events/
相关技能: ../game-setup-and-config/SKILL.md、../scenes/SKILL.md、../sprites-and-images/SKILL.md

Quick Start

快速入门

js
class GameScene extends Phaser.Scene {
    preload() {
        this.load.image('logo', 'assets/logo.png');
    }

    create() {
        this.add.image(400, 300, 'logo');
    }
}
Assets loaded in
preload()
are guaranteed to be ready when
create()
runs. The Loader starts automatically during the preload phase.
js
class GameScene extends Phaser.Scene {
    preload() {
        this.load.image('logo', 'assets/logo.png');
    }

    create() {
        this.add.image(400, 300, 'logo');
    }
}
preload()
中加载的资源,会确保在
create()
执行时已准备就绪。Loader会在preload阶段自动启动。

Core Concepts

核心概念

The Preload Pattern

Preload模式

Every Scene can define a
preload()
method. The Loader automatically starts when
preload()
completes and waits for all queued files to finish before calling
create()
.
js
preload() {
    // Queue files - they don't load immediately
    this.load.image('sky', 'assets/sky.png');
    this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
    this.load.audio('jump', 'assets/jump.mp3');
}

create() {
    // All assets above are now available
    this.add.image(400, 300, 'sky');
    this.add.sprite(100, 450, 'dude');
    this.sound.play('jump');
}
每个Scene都可以定义
preload()
方法。当
preload()
执行完成后,Loader会自动启动,并等待所有排队的文件加载完成后才调用
create()
js
preload() {
    // 将文件加入队列——不会立即加载
    this.load.image('sky', 'assets/sky.png');
    this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
    this.load.audio('jump', 'assets/jump.mp3');
}

create() {
    // 上述所有资源现在都已可用
    this.add.image(400, 300, 'sky');
    this.add.sprite(100, 450, 'dude');
    this.sound.play('jump');
}

Loading Outside of Preload

在Preload之外加载资源

If you call
this.load
methods outside of
preload()
(for example, in
create()
or in response to a user action), you must manually start the Loader:
js
create() {
    this.load.image('extra', 'assets/extra.png');
    this.load.once('complete', () => {
        this.add.image(400, 300, 'extra');
    });
    this.load.start();
}
如果在
preload()
之外调用
this.load
方法(例如在
create()
中或响应用户操作时),必须手动启动Loader:
js
create() {
    this.load.image('extra', 'assets/extra.png');
    this.load.once('complete', () => {
        this.add.image(400, 300, 'extra');
    });
    this.load.start();
}

URL Resolution: baseURL, path, and prefix

URL解析:baseURL、path和prefix

The final URL for a file is resolved as:
baseURL + path + filename
. These can be set via the game config or at runtime.
js
preload() {
    // Set base URL (prepended to all relative paths)
    this.load.setBaseURL('https://cdn.example.com/');

    // Set path (prepended after baseURL, before filename)
    this.load.setPath('assets/images/');

    // Set key prefix (prepended to the cache key, not the URL)
    this.load.setPrefix('LEVEL1.');

    // Loads from: https://cdn.example.com/assets/images/hero.png
    // Cached with key: LEVEL1.hero
    this.load.image('hero', 'hero.png');

    // Absolute URLs bypass the path/baseURL
    this.load.image('cloud', 'https://other-server.com/cloud.png');
}
These can also be set in the game config:
js
const config = {
    loader: {
        baseURL: 'https://cdn.example.com/',
        path: 'assets/',
        prefix: '',
        maxParallelDownloads: 32,
        crossOrigin: 'anonymous',
        responseType: '',
        async: true,
        timeout: 0,
        maxRetries: 2,
        imageLoadType: 'XHR' // or 'HTMLImageElement'
    }
};
文件的最终URL解析规则为:
baseURL + path + filename
。这些参数可通过游戏配置或运行时设置。
js
preload() {
    // 设置基础URL(会添加到所有相对路径前)
    this.load.setBaseURL('https://cdn.example.com/');

    // 设置路径(添加在baseURL之后、文件名之前)
    this.load.setPath('assets/images/');

    // 设置缓存键前缀(添加到缓存键前,不会影响URL)
    this.load.setPrefix('LEVEL1.');

    // 加载路径为:https://cdn.example.com/assets/images/hero.png
    // 缓存键为:LEVEL1.hero
    this.load.image('hero', 'hero.png');

    // 绝对URL会绕过path和baseURL设置
    this.load.image('cloud', 'https://other-server.com/cloud.png');
}
这些参数也可以在游戏配置中设置:
js
const config = {
    loader: {
        baseURL: 'https://cdn.example.com/',
        path: 'assets/',
        prefix: '',
        maxParallelDownloads: 32,
        crossOrigin: 'anonymous',
        responseType: '',
        async: true,
        timeout: 0,
        maxRetries: 2,
        imageLoadType: 'XHR' // 或 'HTMLImageElement'
    }
};

Global Caches

全局缓存

Assets are stored in global game-level caches, not per-Scene. An image loaded in one Scene is available in every other Scene. Textures go into
game.textures
(the Texture Manager). Other data goes into
game.cache
sub-caches (e.g.,
game.cache.json
,
game.cache.audio
,
game.cache.xml
).
资源存储在游戏级别的全局缓存中,而非Scene级缓存。在一个Scene中加载的图片,可在所有其他Scene中使用。纹理会存入
game.textures
(纹理管理器),其他数据则存入
game.cache
的子缓存(例如
game.cache.json
game.cache.audio
game.cache.xml
)。

Load Events

加载事件

The Loader emits events throughout the loading lifecycle. Use these for progress bars and loading screens.
js
preload() {
    this.load.on('progress', (value) => {
        // value is 0 to 1
        console.log(`Loading: ${Math.round(value * 100)}%`);
    });

    this.load.on('complete', () => {
        console.log('All assets loaded');
    });

    this.load.on('loaderror', (file) => {
        console.warn('Failed to load:', file.key);
    });

    this.load.image('bg', 'assets/bg.png');
}
Loader会在加载生命周期中触发各类事件,可用于实现进度条和加载界面。
js
preload() {
    this.load.on('progress', (value) => {
        // value取值范围为0到1
        console.log(`加载进度:${Math.round(value * 100)}%`);
    });

    this.load.on('complete', () => {
        console.log('所有资源加载完成');
    });

    this.load.on('loaderror', (file) => {
        console.warn('加载失败:', file.key);
    });

    this.load.image('bg', 'assets/bg.png');
}

Common Patterns

常见用法

Loading Images and Sprite Sheets

加载图片和精灵表

js
preload() {
    // Single image
    this.load.image('star', 'assets/star.png');

    // Image with normal map (pass URL array: [texture, normalMap])
    this.load.image('brick', ['assets/brick.png', 'assets/brick_n.png']);

    // Sprite sheet (fixed frame sizes)
    this.load.spritesheet('explosion', 'assets/explosion.png', {
        frameWidth: 64,
        frameHeight: 64,
        startFrame: 0,
        endFrame: 23,
        margin: 0,
        spacing: 0
    });

    // SVG (optionally rasterize at a specific size)
    this.load.svg('logo', 'assets/logo.svg', { width: 400, height: 400 });
}
js
preload() {
    // 单张图片
    this.load.image('star', 'assets/star.png');

    // 带法线贴图的图片(传入URL数组:[纹理, 法线贴图])
    this.load.image('brick', ['assets/brick.png', 'assets/brick_n.png']);

    // 精灵表(固定帧尺寸)
    this.load.spritesheet('explosion', 'assets/explosion.png', {
        frameWidth: 64,
        frameHeight: 64,
        startFrame: 0,
        endFrame: 23,
        margin: 0,
        spacing: 0
    });

    // SVG图片(可选择按指定尺寸光栅化)
    this.load.svg('logo', 'assets/logo.svg', { width: 400, height: 400 });
}

Loading Audio

加载音频

js
preload() {
    // Single file
    this.load.audio('bgm', 'assets/music.mp3');

    // Multiple formats for cross-browser support
    this.load.audio('bgm', ['assets/music.ogg', 'assets/music.mp3']);

    // Audio sprite (JSON defines named regions within a single audio file)
    this.load.audioSprite('sfx', 'assets/sfx.json', [
        'assets/sfx.ogg',
        'assets/sfx.mp3'
    ]);
}
js
preload() {
    // 单个音频文件
    this.load.audio('bgm', 'assets/music.mp3');

    // 多格式文件以支持跨浏览器
    this.load.audio('bgm', ['assets/music.ogg', 'assets/music.mp3']);

    // 音频精灵(JSON定义单个音频文件中的命名片段)
    this.load.audioSprite('sfx', 'assets/sfx.json', [
        'assets/sfx.ogg',
        'assets/sfx.mp3'
    ]);
}

Loading JSON and Tilemaps

加载JSON和瓦片地图

js
preload() {
    // JSON data (stored in this.cache.json)
    this.load.json('levelData', 'assets/level1.json');

    // JSON with a dataKey to extract a sub-object
    this.load.json('enemies', 'assets/data.json', 'enemies');

    // Tiled tilemap (JSON format exported from Tiled)
    this.load.tilemapTiledJSON('map', 'assets/map.json');

    // CSV tilemap
    this.load.tilemapCSV('csvmap', 'assets/level.csv');

    // Impact tilemap
    this.load.tilemapImpact('impactmap', 'assets/level.js');
}

create() {
    const data = this.cache.json.get('levelData');
    const map = this.make.tilemap({ key: 'map' });
}
js
preload() {
    // JSON数据(存储在this.cache.json中)
    this.load.json('levelData', 'assets/level1.json');

    // 提取子对象的JSON(通过dataKey指定)
    this.load.json('enemies', 'assets/data.json', 'enemies');

    // Tiled瓦片地图(从Tiled导出的JSON格式)
    this.load.tilemapTiledJSON('map', 'assets/map.json');

    // CSV格式瓦片地图
    this.load.tilemapCSV('csvmap', 'assets/level.csv');

    // Impact格式瓦片地图
    this.load.tilemapImpact('impactmap', 'assets/level.js');
}

create() {
    const data = this.cache.json.get('levelData');
    const map = this.make.tilemap({ key: 'map' });
}

Loading Atlases

加载图集

js
preload() {
    // JSON atlas (e.g., TexturePacker JSON Hash/Array)
    this.load.atlas('sprites', 'assets/sprites.png', 'assets/sprites.json');

    // XML atlas (e.g., Starling/Sparrow format)
    this.load.atlasXML('ui', 'assets/ui.png', 'assets/ui.xml');

    // Multi-atlas (atlas split across multiple textures)
    this.load.multiatlas('world', 'assets/world.json', 'assets/');

    // Unity texture atlas format
    this.load.unityAtlas('chars', 'assets/chars.png', 'assets/chars.txt');

    // Aseprite atlas
    this.load.aseprite('knight', 'assets/knight.png', 'assets/knight.json');
}

create() {
    this.add.sprite(400, 300, 'sprites', 'walk_01');
}
js
preload() {
    // JSON图集(例如TexturePacker JSON Hash/Array格式)
    this.load.atlas('sprites', 'assets/sprites.png', 'assets/sprites.json');

    // XML图集(例如Starling/Sparrow格式)
    this.load.atlasXML('ui', 'assets/ui.png', 'assets/ui.xml');

    // 多图集(图集拆分到多个纹理文件)
    this.load.multiatlas('world', 'assets/world.json', 'assets/');

    // Unity纹理图集格式
    this.load.unityAtlas('chars', 'assets/chars.png', 'assets/chars.txt');

    // Aseprite图集
    this.load.aseprite('knight', 'assets/knight.png', 'assets/knight.json');
}

create() {
    this.add.sprite(400, 300, 'sprites', 'walk_01');
}

Loading Bitmap Fonts

加载位图字体

js
preload() {
    // Requires both a texture and XML/JSON font data file
    this.load.bitmapFont('pixels', 'assets/font.png', 'assets/font.xml');
}

create() {
    this.add.bitmapText(100, 100, 'pixels', 'Hello World', 32);
}
js
preload() {
    // 需要同时加载纹理和XML/JSON字体数据文件
    this.load.bitmapFont('pixels', 'assets/font.png', 'assets/font.xml');
}

create() {
    this.add.bitmapText(100, 100, 'pixels', 'Hello World', 32);
}

Loading Video

加载视频

js
preload() {
    // Load a video file. Third arg: noAudio flag (default false)
    this.load.video('intro', 'assets/intro.mp4');

    // Load without audio track
    this.load.video('bg_loop', 'assets/loop.mp4', true);
}
js
preload() {
    // 加载视频文件。第三个参数:noAudio标志(默认false)
    this.load.video('intro', 'assets/intro.mp4');

    // 加载不含音轨的视频
    this.load.video('bg_loop', 'assets/loop.mp4', true);
}

Loading Web Fonts

加载Web字体

js
preload() {
    // Load a font file (ttf, otf, woff, woff2)
    this.load.font('myFont', 'assets/myfont.ttf', 'truetype');

    // With optional font face descriptors
    this.load.font('boldFont', 'assets/bold.woff2', 'woff2', {
        weight: 'bold',
        style: 'normal'
    });
}
js
preload() {
    // 加载字体文件(ttf、otf、woff、woff2格式)
    this.load.font('myFont', 'assets/myfont.ttf', 'truetype');

    // 带可选字体描述符
    this.load.font('boldFont', 'assets/bold.woff2', 'woff2', {
        weight: 'bold',
        style: 'normal'
    });
}

Loading a Pack File

加载打包文件

A pack file is a JSON file that describes multiple assets to load at once. Useful for organizing asset manifests.
js
preload() {
    this.load.pack('pack1', 'assets/pack.json');
}
Pack file format:
json
{
    "section1": {
        "baseURL": "assets/",
        "files": [
            { "type": "image", "key": "bg", "url": "bg.png" },
            { "type": "atlas", "key": "chars", "textureURL": "chars.png", "atlasURL": "chars.json" }
        ]
    }
}
打包文件是一个JSON文件,用于描述需要一次性加载的多个资源,便于组织资源清单。
js
preload() {
    this.load.pack('pack1', 'assets/pack.json');
}
打包文件格式:
json
{
    "section1": {
        "baseURL": "assets/",
        "files": [
            { "type": "image", "key": "bg", "url": "bg.png" },
            { "type": "atlas", "key": "chars", "textureURL": "chars.png", "atlasURL": "chars.json" }
        ]
    }
}

Loading with a Progress Bar

实现加载进度条

js
preload() {
    const progressBar = this.add.graphics();
    const progressBox = this.add.graphics();
    progressBox.fillStyle(0x222222, 0.8);
    progressBox.fillRect(240, 270, 320, 50);

    this.load.on('progress', (value) => {
        progressBar.clear();
        progressBar.fillStyle(0xffffff, 1);
        progressBar.fillRect(250, 280, 300 * value, 30);
    });

    this.load.on('complete', () => {
        progressBar.destroy();
        progressBox.destroy();
    });

    // Queue your assets
    this.load.image('sky', 'assets/sky.png');
    // ... more assets
}
js
preload() {
    const progressBar = this.add.graphics();
    const progressBox = this.add.graphics();
    progressBox.fillStyle(0x222222, 0.8);
    progressBox.fillRect(240, 270, 320, 50);

    this.load.on('progress', (value) => {
        progressBar.clear();
        progressBar.fillStyle(0xffffff, 1);
        progressBar.fillRect(250, 280, 300 * value, 30);
    });

    this.load.on('complete', () => {
        progressBar.destroy();
        progressBox.destroy();
    });

    // 加入需要加载的资源
    this.load.image('sky', 'assets/sky.png');
    // ... 更多资源
}

All File Types Reference

全文件类型参考

All
this.load
methods accept positional arguments or a single config object. They also accept an array of config objects to batch-load multiple files of the same type. See
references/REFERENCE.md
for the complete parameter table.
Textures:
image
,
spritesheet
,
atlas
,
atlasXML
,
multiatlas
,
unityAtlas
,
aseprite
,
svg
,
htmlTexture
,
texture
(compressed) Audio/Video:
audio
,
audioSprite
,
video
Data:
json
,
xml
,
text
,
binary
,
html
,
css
,
glsl
Fonts:
bitmapFont
,
font
Tilemaps:
tilemapTiledJSON
,
tilemapCSV
,
tilemapImpact
Other:
animation
,
pack
,
script
,
scripts
,
plugin
,
scenePlugin
,
sceneFile
所有
this.load
方法均接受位置参数或单个配置对象,也可接受配置对象数组以批量加载同类型的多个文件。完整参数表请参考
references/REFERENCE.md
纹理类:
image
spritesheet
atlas
atlasXML
multiatlas
unityAtlas
aseprite
svg
htmlTexture
texture
(压缩纹理) 音频/视频类:
audio
audioSprite
video
数据类:
json
xml
text
binary
html
css
glsl
字体类:
bitmapFont
font
瓦片地图类:
tilemapTiledJSON
tilemapCSV
tilemapImpact
其他:
animation
pack
script
scripts
plugin
scenePlugin
sceneFile

Events

事件

All events are emitted on the Loader instance (
this.load
).
Event StringCallback SignatureDescription
'addfile'
(key, type, loader, file)
A file was added to the load queue
'start'
(loader)
Loader has started. Progress is zero
'load'
(file)
A single file finished loading (before processing/caching)
'fileprogress'
(file, percentComplete)
Per-file download progress (0-1). Only fires if browser provides
lengthComputable
'progress'
(value)
Overall load progress updated (0-1)
'postprocess'
(loader)
All files loaded and processed, before internal cleanup
'filecomplete'
(key, type, data)
Any file finished loading and processing
'filecomplete-{type}-{key}'
(key, type, data)
Specific file finished (e.g.,
'filecomplete-image-hero'
)
'loaderror'
(file)
A file failed to load
'complete'
(loader, totalComplete, totalFailed)
All files in the queue are done
所有事件均在Loader实例(
this.load
)上触发。
事件字符串回调签名描述
'addfile'
(key, type, loader, file)
文件被加入加载队列
'start'
(loader)
Loader已启动,进度为0
'load'
(file)
单个文件完成下载(在处理/缓存之前)
'fileprogress'
(file, percentComplete)
单个文件的下载进度(0-1),仅当浏览器提供
lengthComputable
时触发
'progress'
(value)
整体加载进度更新(0-1)
'postprocess'
(loader)
所有文件加载并处理完成,内部清理之前
'filecomplete'
(key, type, data)
任意文件完成加载和处理
'filecomplete-{type}-{key}'
(key, type, data)
指定文件完成加载(例如
'filecomplete-image-hero'
'loaderror'
(file)
文件加载失败
'complete'
(loader, totalComplete, totalFailed)
队列中所有文件处理完成

Event Lifecycle Order

事件生命周期顺序

  1. 'start'
    - Loader begins
  2. 'fileprogress'
    - Per-file progress (repeats per file, if available)
  3. 'load'
    - Each file finishes downloading
  4. 'filecomplete-{type}-{key}'
    - Specific file processed and cached
  5. 'filecomplete'
    - Generic per-file completion
  6. 'progress'
    - Overall progress updated
  7. 'postprocess'
    - All files done, before cleanup
  8. 'complete'
    - Everything finished
  1. 'start'
    - Loader开始
  2. 'fileprogress'
    - 单个文件进度更新(若支持,会重复触发)
  3. 'load'
    - 单个文件下载完成
  4. 'filecomplete-{type}-{key}'
    - 指定文件处理并缓存完成
  5. 'filecomplete'
    - 通用单个文件完成事件
  6. 'progress'
    - 整体进度更新
  7. 'postprocess'
    - 所有文件处理完成,清理之前
  8. 'complete'
    - 所有操作完成

Gotchas and Common Mistakes

常见陷阱与错误

Keys must be unique within their type. Loading a second image with the same key as an existing one will log a warning and skip it. Remove the old texture from the Texture Manager first if you need to replace it.
Sprite sheet is not the same as an atlas. Use
spritesheet()
for fixed-size grids of frames (referenced by index). Use
atlas()
for packed texture atlases with named frames.
Forgetting
this.load.start()
outside preload.
If you call load methods in
create()
or later, the Loader does not auto-start. You must call
this.load.start()
manually.
Path must end with
/
.
If you call
this.load.setPath()
it will append the slash automatically. If you set
this.load.path
directly, you must include the trailing slash yourself.
Audio format fallbacks. Always provide multiple audio formats (OGG + MP3 at minimum) for cross-browser support. The Loader picks the first format the browser supports.
Pack files can override baseURL/path/prefix. Each section in a pack file can set its own
baseURL
,
path
, and
prefix
values. These apply only to files within that section and are restored after the section is processed.
File keys include the prefix. If you set
this.load.setPrefix('MENU.')
and load an image with key
'bg'
, the actual cache key becomes
'MENU.bg'
. You must use that full key when referencing the asset.
The
maxRetries
property (default: 2)
controls how many times the Loader retries a failed file before giving up. This is set per-file at creation time based on
this.load.maxRetries
. Adjusting it after files are added has no effect on those files.
Image load type. By default images load via XHR (as blobs). Set
imageLoadType: 'HTMLImageElement'
in the loader config to use
<img>
tag loading instead, which can help with CORS issues in some environments.
Local file schemes. The Loader recognizes
file://
and
capacitor://
as local schemes by default (via
localSchemes
). Files loaded from local schemes skip CORS headers.
Cross-origin. Set
crossOrigin: 'anonymous'
in the loader config (or via
this.load.setCORS('anonymous')
) when loading assets from a different domain, especially if those textures will be used with WebGL.
Keys are case-sensitive and scoped per type.
'Player'
and
'player'
are different keys. An image key
'player'
and an audio key
'player'
can coexist without conflict.
Duplicate keys are silently ignored. A second
this.load.image('bg', ...)
call does nothing if
'bg'
already exists in the texture cache. Remove the old asset first to replace it.
Scene
update()
does NOT fire during preload.
While assets are loading,
update()
is paused. However,
preupdate
,
postupdate
, and
render
still fire.
Progress can decrease. If new files are added mid-load (e.g., via
filecomplete
chaining), the progress value may drop because the total file count increased.
同类型资源的键必须唯一。若加载的第二个图片与现有图片键相同,会触发警告并跳过加载。如需替换,需先从纹理管理器中移除旧纹理。
精灵表和图集不同
spritesheet()
用于固定尺寸的帧网格(通过索引引用),
atlas()
用于带命名帧的打包纹理图集。
在preload之外加载时忘记调用
this.load.start()
。如果在
create()
或之后调用加载方法,Loader不会自动启动,必须手动调用
this.load.start()
路径必须以
/
结尾
。使用
this.load.setPath()
会自动添加斜杠,但直接设置
this.load.path
时,必须手动添加末尾斜杠。
音频格式需提供备选。为支持跨浏览器,至少提供OGG和MP3两种格式,Loader会选择浏览器支持的第一个格式。
打包文件会覆盖baseURL/path/prefix。打包文件中的每个章节都可设置自己的
baseURL
path
prefix
,这些设置仅对该章节内的文件生效,章节处理完成后会恢复原有设置。
缓存键包含前缀。若设置
this.load.setPrefix('MENU.')
并加载键为
'bg'
的图片,实际缓存键为
'MENU.bg'
,引用资源时必须使用完整键名。
**
maxRetries
属性(默认值:2)**控制Loader在放弃前重试失败文件的次数,该值在文件创建时基于
this.load.maxRetries
设置,添加文件后调整该值不会影响已加入队列的文件。
图片加载类型。默认图片通过XHR加载(以blob形式),在Loader配置中设置
imageLoadType: 'HTMLImageElement'
可改用
<img>
标签加载,这在某些环境下可解决CORS问题。
本地文件协议。Loader默认将
file://
capacitor://
识别为本地协议(通过
localSchemes
),从本地协议加载的文件会跳过CORS头。
跨域设置。从不同域名加载资源时,需在Loader配置中设置
crossOrigin: 'anonymous'
(或通过
this.load.setCORS('anonymous')
),尤其是当这些纹理将用于WebGL时。
键区分大小写且按类型作用域
'Player'
'player'
是不同的键,图片键
'player'
和音频键
'player'
可共存且互不冲突。
重复键会被静默忽略。若纹理缓存中已存在
'bg'
,第二次调用
this.load.image('bg', ...)
不会产生任何效果,如需替换需先移除旧资源。
Scene的
update()
在preload期间不会触发
。资源加载时,
update()
会暂停,但
preupdate
postupdate
render
仍会触发。
进度值可能下降。若在加载过程中添加新文件(例如通过
filecomplete
链式加载),进度值可能会下降,因为总文件数增加了。

Scene Payload (Load Before Preload)

Scene预加载包(Preload前加载)

Load files before
preload()
runs by defining a
pack
in the Scene constructor. Useful for loading progress bar assets.
js
class BootScene extends Phaser.Scene {
    constructor() {
        super({
            key: 'BootScene',
            pack: {
                files: [
                    { type: 'image', key: 'bar', url: 'loaderBar.png' }
                ]
            }
        });
    }
    // 'bar' is already available in preload()
}
通过在Scene构造函数中定义
pack
,可在
preload()
运行前加载文件,适用于加载进度条资源。
js
class BootScene extends Phaser.Scene {
    constructor() {
        super({
            key: 'BootScene',
            pack: {
                files: [
                    { type: 'image', key: 'bar', url: 'loaderBar.png' }
                ]
            }
        });
    }
    // 'bar'在preload()中已可用
}

Adding Files Mid-Load

加载过程中添加文件

Use the per-file completion event to chain dependent loads during an active loading session.
js
preload() {
    this.load.json('level1', 'level1.json');
    this.load.on('filecomplete-json-level1', (key, type, data) => {
        this.load.image(data.images);
        this.load.spritesheet(data.spritesheets);
    });
}
利用单个文件完成事件,可在加载会话中链式加载依赖资源。
js
preload() {
    this.load.json('level1', 'level1.json');
    this.load.on('filecomplete-json-level1', (key, type, data) => {
        this.load.image(data.images);
        this.load.spritesheet(data.spritesheets);
    });
}

Inline Pack Manifests

内联打包清单

Pack data can be provided inline instead of from a URL.
js
preload() {
    this.load.pack('manifest', {
        section1: {
            prefix: '',
            path: 'assets/',
            defaultType: 'image',
            files: [
                { type: 'image', key: 'bg', url: 'bg.png' },
                { type: 'spritesheet', key: 'player', url: 'player.png', frameConfig: { frameWidth: 32, frameHeight: 32 } }
            ]
        }
    });
}
可直接提供内联的打包数据,而非从URL加载。
js
preload() {
    this.load.pack('manifest', {
        section1: {
            prefix: '',
            path: 'assets/',
            defaultType: 'image',
            files: [
                { type: 'image', key: 'bg', url: 'bg.png' },
                { type: 'spritesheet', key: 'player', url: 'player.png', frameConfig: { frameWidth: 32, frameHeight: 32 } }
            ]
        }
    });
}

Cache System

缓存系统

Loaded assets go into global caches shared across all Scenes. Textures are stored in the Texture Manager (
this.textures
); other asset types go into typed sub-caches under
this.cache
.
js
// Access cached data
const json = this.cache.json.get('levelData');
const text = this.cache.text.get('dialogue');

// Check existence
this.cache.json.exists('levelData'); // or .has('levelData')
this.textures.exists('hero');

// Remove assets to free memory
this.textures.remove('hero');
this.cache.audio.remove('bgm');

// Listen for cross-scene texture additions
this.textures.on('addtexture-mapKey', (texture) => {
    // Another scene loaded 'mapKey' — now available here
});
Cache sub-types:
this.cache.text
,
this.cache.json
,
this.cache.audio
,
this.cache.binary
,
this.cache.shader
,
this.cache.xml
. See
references/REFERENCE.md
for the full Cache API.
加载的资源会存入所有Scene共享的全局缓存。纹理存储在纹理管理器(
this.textures
)中,其他类型的资源存入
this.cache
下的子缓存。
js
// 访问缓存数据
const json = this.cache.json.get('levelData');
const text = this.cache.text.get('dialogue');

// 检查资源是否存在
this.cache.json.exists('levelData'); // 或使用.has('levelData')
this.textures.exists('hero');

// 移除资源释放内存
this.textures.remove('hero');
this.cache.audio.remove('bgm');

// 监听跨Scene的纹理添加事件
this.textures.on('addtexture-mapKey', (texture) => {
    // 其他Scene加载了'mapKey'——现在可在此处使用
});
缓存子类型:
this.cache.text
this.cache.json
this.cache.audio
this.cache.binary
this.cache.shader
this.cache.xml
。完整缓存API请参考
references/REFERENCE.md

Source File Map

源码文件映射

See
references/REFERENCE.md
for the complete source file map and Cache API reference.
Key files:
src/loader/LoaderPlugin.js
(main Loader),
src/loader/File.js
(base File class),
src/loader/filetypes/
(all file type loaders),
src/loader/events/
(event constants).
完整源码文件映射和缓存API参考请见
references/REFERENCE.md
核心文件:
src/loader/LoaderPlugin.js
(主Loader)、
src/loader/File.js
(基础文件类)、
src/loader/filetypes/
(所有文件类型加载器)、
src/loader/events/
(事件常量)。