Phaser3之 load

this.add.load(…)
如果你的this.load从外部调用任何方法，那么您需要通过调用Loader.start(). Scene.preload仅在场景预加载期间自动启动。

Event (Phaser.Loader. Events)

this.load.on(‘addfile’, listener).

当新文件成功添加到 Loader 并放入加载队列时，将调度此事件。

this.load.on(‘complete’, listener).

当加载程序完全处理加载队列中的所有内容时，将调度此事件。此时，每个加载的文件现在都将位于其关联的缓存中并可供使用。

this.load.on(‘filecomplete’, listener).

当队列中的任何文件完成加载时，加载器插件会调度此事件。还可以侦听特定文件的完成情况。看到FILE_KEY_COMPLETE事件。

this.load.on(‘filecomplete-image-monster’, listener).

当队列中的任何文件完成加载时，加载器插件会调度此事件。
它使用由文件的键和类型构造的特殊动态事件名称。
例如，如果您加载了image一个键为 的monster，则可以使用以下命令进行侦听：

this.load.on('filecomplete-image-monster', function (key, type, data) {
    // Your handler code
});

this.load.on(‘load’, listener).

当文件完成加载时，但在处理并添加到内部 Phaser 缓存之前，该事件由 Loader Plugin 调度。

this.load.on(‘loaderror’, listener).

当文件加载失败时，该事件由 Loader Plugin 调度。

this.load.on(‘fileprogress’, listener).

如果浏览器接收到 DOM ProgressEvent 并且lengthComputableevent 属性为 true ，则该事件在加载文件期间由 Loader Plugin 调度。根据所使用的文件和浏览器的大小，这可能会发生，也可能不会发生。

this.load.on(‘postprocess’, listener).

当 Loader 完成加载加载队列中的所有内容时，该事件由 Loader Plugin 调度。它在内部列表被清除和每个文件被销毁之前被调度。

使用这个钩子来执行任何最后一分钟的文件处理，这些文件只能在 Loader 完成后但在它发出complete事件之前发生。

this.load.on(‘progress’, listener).

当 Loader 更新其加载进度时调度此事件，通常是因为文件已完成加载。

this.load.on(‘start’, listener).

当 Loader 开始运行时调度此事件。此时加载进度为零。
即使加载队列中没有任何文件，也会调度此事件。

animation(key [, url] [, dataKey] [, xhrSettings]) 参考 load.animation.md文件

spritesheet(key [, url] [, frameConfig] [, xhrSettings])

将精灵表图像或精灵表图像数组添加到当前加载队列。
参数：

姓名	类型	Argument	描述
key	string / Phaser.Types.Loader.FileTypes.SpriteSheetFileConfig / Array.<Phaser.Types.Loader.FileTypes.SpriteSheetFileConfig>		用于此文件的键，或文件配置对象，或它们的数组。
url	string	<可选>	要从中加载此文件的绝对或相对 URL。如果未定义或null将设置为.png，即如key是“alien”，则 URL 将是“alien.png”。
frameConfig	Phaser.Types.Loader.FileTypes.ImageFrameConfig	<可选>	框架配置对象。至少它应该有一个frameWidth属性。
xhrSettings	Phaser.Types.Loader.XHRSettingsObject	<可选>	XHR 设置配置对象。用于替换 Loaders 默认的 XHR 设置。

自：3.0.0
来源：src/loader/filetypes/SpriteSheetFile.js（第 59 行）
火灾：
Phaser.Loader.LoaderPlugin#event:ADD
返回：
加载器实例。

类型
Phaser.Loader.LoaderPlugin

可以从 Scene 的 中调用此方法preload，以及您希望加载的任何其他文件：

function preload (){
    this.load.spritesheet('bot', 'images/robot.png', { frameWidth: 32, frameHeight: 38 });
}

this.load.spritesheet({
    key: 'bot',
    url: 'images/robot.png',
    frameConfig: {
        frameWidth: 32,
        frameHeight: 38,
        startFrame: 0,
        endFrame: 8
    }
});

文件加载完成后，您可以通过引用其键将其用作游戏对象的纹理：

this.load.spritesheet('bot', 'images/robot.png', { frameWidth: 32, frameHeight: 38 });
// and later in your game ...
this.add.image(x, y, 'bot', 0);

Phaser 还支持自动加载关联的法线贴图。如果你有一个法线贴图来配合这个图像，那么你可以通过提供一个数组作为url第二个元素是法线贴图的地方来指定它：

this.load.spritesheet('logo', [ 'images/AtariLogo.png', 'images/AtariLogo-n.png' ], { frameWidth: 256, frameHeight: 80 });

this.load.spritesheet({
    key: 'logo',
    url: 'images/AtariLogo.png',
    normalMap: 'images/AtariLogo-n.png',
    frameConfig: {
        frameWidth: 256,
        frameHeight: 80
    }
});

案例

  function preload() {
      // 可以用上面的pack方式加载文件
      //可以用下面这种
      this.load.spritesheet([
        {
          key: 'explosion', url: 'https://labs.phaser.io/assets/sprites/explosion.png',
          frameConfig: { frameWidth: 64, frameHeight: 64 } // ,endFrame: 23 
        },
        {
          key: 'balls', url: 'https://labs.phaser.io/assets/sprites/balls.png',
          frameConfig: {
            frameWidth: 15, frameHeight: 15
          }
        }
      ])
    }

    function create() {
      // 设置一个名字叫做playexplosion的动画,该动画调用load中的 explosion资源(即explosion.png)，它包含23帧,并且该动画会重复执行
      this.anims.create({
        key: 'playexplosion',
        frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23 }),
        repeat: -1
      })
      // 设置一个名字叫做playball的动画,该动画调用load中的 balls资源(即balls.png)，它执行的帧顺序是[ 0, 1, 3, 1, 4, 0, 1, 2 ],并且该动画会重复执行
      this.anims.create({
        key: 'playballs',
        frames: this.anims.generateFrameNumbers('balls',{ frames: [ 0, 1, 3, 1, 4, 0, 1, 2 ] }),
        repeat: -1
      })

      // 将键为 explosion的资源添加到场景中,并且添加playexplosion动画,
      this.add.sprite(400, 300, 'explosion').play('playexplosion');


      // 下面的代码效果是,先出现ball,一秒后会出现explosion的动画
      // 由于动画playexplosion使用的frame是explosion,最终展示的动效也是 explosion在一帧一帧的动.
      var ball = this.add.sprite(400, 300, 'balls')
      setTimeout(() => {
        ball.play('playexplosion')
      },1000)
    }

atlas(key [, textureURL] [, atlasURL] [, textureXhrSettings] [, atlasXhrSettings])

参考load.atlas.md文件

pack(key [, url] [, dataKey] [, xhrSettings])

将 JSON 文件包或包数组添加到当前加载队列。

function preload (){
    this.load.pack('level1', 'data/Level1Files.json');
	this.load.pack({
	    key: 'level1',
	    url: 'data/Level1Files.json'
	});
}

Level1Files.json文件包是一个 JSON 文件（或对象），其中包含有关应添加到加载器中的其他文件的详细信息。
参数：

姓名	类型	参数	描述
key	字符串/ Phaser.Types.Loader.FileTypes.PackFileConfig / Array.< Phaser.Types.Loader.FileTypes.PackFileConfig >		用于此文件的键，或文件配置对象，或它们的数组。
url	string	<可选>	要从中加载此文件的绝对或相对 URL。如果未定义或null将设置为.json，即如果key是“alien”，则 URL 将是“alien.json”。
dataKey	string	<可选>	当 JSON 文件加载时，仅此属性将存储在缓存中。
xhrSettings	Phaser.Types.Loader.XHRSettingsObject	<可选>	XHR 设置配置对象。用于替换 Loaders 默认的 XHR 设置。

返回：
加载器实例。

类型
Phaser.Loader.LoaderPlugin

案例

var FilePackObject = { 
    "test1": {
        "files": [
            {
                "type": "image",
                "key": "taikodrummaster",
                "url": "assets/pics/taikodrummaster.jpg"
            },
            {
                "type": "image",
                "key": "sukasuka-chtholly",
                "url": "assets/pics/sukasuka-chtholly.png"
            }
        ]
    },
    "test2": {
        "prefix": "TEST2.",
        "path": "assets/pics",
        "defaultType": "image",
        "files": [
            {
                "key": "donuts",
                "extension": "jpg"
            },
            {
                "key": "ayu"
            }
        ]
    },
    "meta": {
        "generated": "1401380327373",
        "app": "Phaser 3 Asset Packer",
        "url": "https://phaser.io",
        "version": "1.0",
        "copyright": "Photon Storm Ltd. 2018"
    }
};

function preload() {
// this.load.pack('pack1','http://labs.phaser.io/assets/loader-tests/pack1.json','test1') // 单独加载某一项
// this.load.pack('pack1','http://labs.phaser.io/assets/loader-tests/pack1.json','test2') // 单独加载某一项

// this.load.pack('pack1','http://labs.phaser.io/assets/loader-tests/pack1.json') // 通过json加载所有

this.load.pack('pack1',FilePackObject ) // 加载一个对象,加载所有,

}

function create() {
  this.add.image(400,300,'TEST2.donuts')
  this.add.image(400,400,'TEST2.ayu')
  this.add.image(400,500,'sukasuka-chtholly')
}

sceneFile(key [, url] [, xhrSettings])

将外部场景文件或场景文件数组添加到当前加载队列。
您可以从 Scene 的 中调用此方法preload，以及您希望加载的任何其他文件：
案例

function preload (){
    this.load.sceneFile('Level1', 'src/Level1.js');
}
this.load.sceneFile({
    key: 'Level1',
    url: 'src/Level1.js'
});

// 添加到场景管理器中。
this.scene.start('Level1');

参数
key string | Phaser.Types.Loader.FileTypes.SceneFileConfig | Array.< Phaser.Types.Loader.FileTypes.SceneFileConfig >
用于此文件的键，或文件配置对象，或它们的数组。

url string <可选>
要从中加载此文件的绝对或相对 URL。如果未定义或null将设置为.js，即如果key是“alien”，则 URL 将是“alien.js”。

xhrSettings Phaser.Types.Loader.XHRSettingsObject <可选>
XHR 设置配置对象。用于替换 Loaders 默认的 XHR 设置。

multiatlas(key [, atlasURL] [, path] [, baseURL] [, atlasXhrSettings])

将多纹理图集或多图集数组添加到当前加载队列。
要获取地图集中所有可用帧的列表，请咨询您的 Texture Atlas 软件。
案例
您可以从 Scene 的 中调用此方法preload，以及您希望加载的任何其他文件：

function preload ()
{
    this.load.multiatlas('level1', '/assets/loader-tests/texture-packer-multi-atlas-with-normals.json');
}

unityAtlas(key [, textureURL] [, atlasURL] [, textureXhrSettings] [, atlasXhrSettings])

将基于 Unity YAML 的纹理图集或图集数组添加到当前加载队列。
案例
要获取地图集中所有可用帧的列表，请咨询你的 Texture Atlas 软件

function preload (){
    this.load.unityAtlas('mainmenu', 'assets/atlas/ant.png', '/assets/atlas/ant.meta');
}

this.load.unityAtlas({
    key: 'mainmenu',
    textureURL: 'assets/atlas/ant.png',
    atlasURL: '/assets/atlas/ant.meta'
});

this.load.unityAtlas('mainmenu', [ 'images/MainMenu.png', 'images/MainMenu-n.png' ], 'images/MainMenu.txt');

this.load.unityAtlas({
    key: 'mainmenu',
    textureURL: 'images/MainMenu.png',
    normalMap: 'images/MainMenu-n.png',
    atlasURL: 'images/MainMenu.txt'
});

// 使用
this.add.image(x, y, 'mainmenu', 'background');

参数：

姓名	类型	参数	描述
key	字符串 /Phaser.Types.Loader.FileTypes.UnityAtlasFileConfig/ Array.< Phaser.Types.Loader.FileTypes.UnityAtlasFileConfig >
	用于此文件的键，或文件配置对象，或它们的数组。
textureURL	字符串 /数组。<字符串>	<可选>	要从中加载纹理图像文件的绝对或相对 URL。如果未定义或null将设置为.png，即如果key是“alien”，则 URL 将是“alien.png”。
atlasURL	string	<可选>	从中加载纹理图集数据文件的绝对或相对 URL。如果未定义或null将设置为.txt，即如果key是“alien”，则 URL 将是“alien.txt”。
textureXhrSettings	Phaser.Types.Loader.XHRSettingsObject	<可选>	图集图像文件的 XHR 设置配置对象。用于替换 Loaders 默认的 XHR 设置。
atlasXhrSettings	Phaser.Types.Loader.XHRSettingsObject	<可选>	图集数据文件的 XHR 设置配置对象。用于替换 Loaders 默认的 XHR 设置。

案例

function preload (){
    this.load.unityAtlas('asteroids', 'assets/atlas/asteroids.png', 'assets/atlas/asteroids.txt');
}

function create (){
this.add.image(200, 200, 'asteroids', 'asteroids_7'); // asteroids_7是在asteroids.txt里面设置的名称
}

bitmapFont(key [, textureURL] [, fontDataURL] [, textureXhrSettings] [, fontDataXhrSettings])

将基于 XML 的位图字体或字体数组添加到当前加载队列。
案例

function preload ()
{
    this.load.bitmapFont('goldenFont', 'images/GoldFont.png', 'images/GoldFont.xml');
	this.load.bitmapFont({
	    key: 'goldenFont',
	    textureURL: 'images/GoldFont.png',
	    fontDataURL: 'images/GoldFont.xml'
	});
	
	this.add.bitmapText(x, y, 'goldenFont', 'Hello World');
}

参数：

姓名	类型	参数	描述
key	字符串 / Phaser.Types.Loader.FileTypes.BitmapFontFileConfig/Array.< /Phaser.Types.Loader.FileTypes.BitmapFontFileConfig >		用于此文件的键，或文件配置对象，或它们的数组。
textureURL	字符串 /数组<字符串>	<可选>	要从中加载字体图像文件的绝对或相对 URL。如果未定义或null将设置为.png，即如果key是“alien”，则 URL 将是“alien.png”。
fontDataURL	string	<可选>	要从中加载字体 xml 数据文件的绝对或相对 URL。如果未定义或null将设置为.xml，即如果key是“alien”，则 URL 将是“alien.xml”。
textureXhrSettings	Phaser.Types.Loader.XHRSettingsObject	<可选>	字体图像文件的 XHR 设置配置对象。用于替换 Loaders 默认的 XHR 设置。
fontDataXhrSettings	Phaser.Types.Loader.XHRSettingsObject	<可选>	字体数据 xml 文件的 XHR 设置配置对象。用于替换 Loaders 默认的 XHR 设置。

自：3.0.0
来源：src/loader/filetypes/BitmapFontFile.js（第 113 行）
火灾：
Phaser.Loader.LoaderPlugin#event:ADD
返回：
加载器实例。

类型
Phaser.Loader.LoaderPlugin

this.load.setPath('http://labs.phaser.io/')

// this.load.pack('pack','assets/loader-tests/pack6.json'); // pack6.json包含了下面的三行

this.load.bitmapFont('desyrel', 'bitmapText/desyrel.png', 'bitmapText/desyrel.xml');
this.load.bitmapFont('desyrel-pink', 'bitmapText/desyrel-pink.png', 'bitmapText/desyrel-pink.xml');
this.load.bitmapFont('shortStack', 'bitmapText/shortStack.png', 'bitmapText/shortStack.xml');

tilemapTiledJSON(key [, url] [, xhrSettings])

将 Tiled JSON Tilemap 文件或地图文件数组添加到当前加载队列
案例

function preload ()
{
    this.load.tilemapTiledJSON('level1', 'maps/Level1.json');
}
this.load.tilemapTiledJSON({
    key: 'level1',
    url: 'maps/Level1.json'
});

// and later in your game ...
var map = this.make.tilemap({ key: 'level1' });

setPath( [path])

setPath的值（path如果设置）放置在给定的任何相对文件路径之前。例如

this.load.setPath("http://labs.phaser.io/images/sprites/");
this.load.image("a", "a.png");
this.load.image("b"); // 不写路径的话，默认key为文件名
this.load.image("cat1", "animations/cat1.png");
this.load.image("balls", "http://server.com/explode.png");

this.load.setPath('assets/sprites');
//一组精灵床单。
//URL是根据路径和键自动创建的（有关详细信息，请参阅文档）
this.load.spritesheet([
  { key: 'explosion', frameConfig: { frameWidth: 64, frameHeight: 64, endFrame: 23 } },
  { key: 'balls', frameConfig: { frameWidth: 17, frameHeight: 17 } }
]);

ball将从中加载文件images/sprites/ball.png和树， images/sprites/level1/oaktree.png但文件boom将从给定的 URL 加载，因为它是绝对 URL。
请注意，路径添加在文件名之前但在baseURL 之后（如果已设置）。
一旦设置了路径，它将影响从那时起添加到加载器的每个文件。它并没有改变任何文件已加载队列。要重置它，请不带参数调用此方法。

image(key [, url] [, xhrSettings])

将图像或图像数组添加到当前加载队列。
图像类型：png、jpg、gif ,如果是加载动画 gif，则只会渲染第一帧
Parameters:

Name	Type	Argument	Description
key	string /Phaser.Types.Loader.FileTypes.ImageFileConfig / Array.<Phaser.Types.Loader.FileTypes.ImageFileConfig>		用于此文件的键，或文件配置对象，或它们的数组。
url	string / Array.	可选	要从中加载此文件的绝对或相对 URL。如果未定义或null将设置为.png，即如果key是“alien”，则 URL 将是“alien.png”。
xhrSettings	Phaser.Types.Loader.XHRSettingsObject	可选	XHR 设置配置对象。用于替换 Loaders 默认的 XHR 设置。

您可以从 Scene 的 中调用此方法preload，以及您希望加载的任何其他文件：

function preload (){
    this.load.image('logo', 'images/phaserLogo.png');
}

键必须是唯一的字符串。它用于在成功加载后将文件添加到全局纹理管理器。
可以传递配置对象，而不是传递参数，例如：

function preload (){
	this.load.image({
	    key: 'logo',
	    url: 'images/AtariLogo.png'
	});
}

文件加载完成后，您可以通过引用其键将其用作游戏对象的纹理：

this.load.image('logo', 'images/AtariLogo.png');
// 或者
this.load.image('logo', [ 'images/AtariLogo.png', 'images/AtariLogo-n.png' ]);
// and later in your game ...
this.add.image(x, y, 'logo');

audio(key [, urls] [, config] [, xhrSettings])

将音频或 HTML5Audio 文件或音频文件数组添加到当前加载队列。
案例

function preload (){
    this.load.audio('title', [ 'music/Title.ogg', 'music/Title.mp3', 'music/Title.m4a' ]);
	this.load.audio({
	    key: 'title',
	    url: [ 'music/Title.ogg', 'music/Title.mp3', 'music/Title.m4a' ]
	});
}

参数：
姓名 类型 争论 描述
key 字符串 | Phaser.Types.Loader.FileTypes.AudioFileConfig | Array.< Phaser.Types.Loader.FileTypes.AudioFileConfig >
用于此文件的键，或文件配置对象，或它们的数组。
參數
key string | Phaser.Types.Loader.FileTypes.AudioFileConfig | Array.<Phaser.Types.Loader.FileTypes.AudioFileConfig> 用于此文件的键，或文件配置对象，或它们的数组。
urls 字符串 | 数组。<字符串> <可选>要从中加载音频文件的绝对或相对 URL。
config 任何 <可选>一个包含instancesHTML5Audio 属性的对象。默认为 1。
xhrSettings Phaser.Types.Loader.XHRSettingsObject <可选>XHR 设置配置对象。用于替换 Loaders 默认的 XHR 设置。

返回值：
加载器实例。

类型
Phaser.Loader.LoaderPlugin

audioSprite(key, jsonURL [, audioURL] [, audioConfig] [, audioXhrSettings] [, jsonXhrSettings])

将基于 JSON 的音频精灵或音频精灵数组添加到当前加载队列。
音频精灵是音频文件和 JSON 配置的组合
JSON 遵循由 https://github.com/tonistiigi/audiosprite 创建的格式

function preload ()
{
    this.load.audioSprite('kyobi', 'kyobi.json', [
        'kyobi.ogg',
        'kyobi.mp3',
        'kyobi.m4a'
    ]);
}

bitmapFont(key [, textureURL] [, fontDataURL] [, textureXhrSettings] [, fontDataXhrSettings])

将基于 XML 的位图字体或字体数组添加到当前加载队列。

您可以从 Scene 的 中调用此方法preload，以及您希望加载的任何其他文件：

function preload ()
{
    this.load.bitmapFont('goldenFont', 'images/GoldFont.png', 'images/GoldFont.xml');
}

键必须是唯一的字符串。它用于在成功加载后将文件添加到全局纹理管理器。
可以传递配置对象，而不是传递参数，例如：

this.load.bitmapFont({
    key: 'goldenFont',
    textureURL: 'images/GoldFont.png',
    fontDataURL: 'images/GoldFont.xml'
})

地图集加载完成后，您可以在创建位图文本游戏对象时使用它的键：

this.load.bitmapFont('goldenFont', 'images/GoldFont.png', 'images/GoldFont.xml');
this.load.bitmapFont('goldenFont', [ 'images/GoldFont.png', 'images/GoldFont-n.png' ], 'images/GoldFont.xml');
// and later in your game ...
this.add.bitmapText(x, y, 'goldenFont', 'Hello World');

once(event, fn [, context])

为给定事件添加一次性侦听器。

参数：
event string | symbol 事件名称。
fn function 监听器功能。
context * <可选> 默认:this 调用侦听器的上下文。

返回值：
this

类型
Phaser.Loader.LoaderPlugin

this.bg = this.add.image(400, 300,'startbtn').setInteractive(); // setInteractive()添加input控制事件
this.bg.once('pointerup', () => {
  this.load.image('img1','http://labs.phaser.io/assets/pics/turkey-1985086.jpg')
  this.load.start(); // 如果你的this.load从外部调用任何方法，那么您需要通过调用Loader.start(). Scene.preload仅在场景预加载期间自动启动。
  this.load.once('complete', () => {
    this.add.image(400,300,'img1')  
  },this)
}, this)

aseprite(key [, textureURL] [, atlasURL] [, textureXhrSettings] [, atlasXhrSettings])

Aseprite 是一个强大的动画精灵编辑器和像素艺术工具。
您可以在 https://www.aseprite.org/ 上找到更多详细信息
将基于 JSON 的 Aseprite 动画或动画数组添加到当前加载队列。
您可以从 Scene 的 中调用此方法preload，以及您希望加载的任何其他文件：

function preload ()
{
    this.load.aseprite('gladiator', 'images/Gladiator.png', 'images/Gladiator.json');
}