- 装载资源
现在要为我们的游戏载入所需的资源了。我们只需要在场景函数preload中加入Phaser的载入代码即可，Phaser将自动调用该函数并执行里面的内容。
当前的preload函数体为空，我们将它改成下面这样：
| function preload () { this.load.image('sky', 'assets/sky.png'); this.load.image('ground', 'assets/platform.png'); this.load.image('star', 'assets/star.png'); this.load.image('bomb', 'assets/bomb.png'); this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 } ); } |
你可以明显的看出来，这里会载入5个资源：4个图片和一个精灵表单。第一个参数是资源的名称（即sky，bomb等）。在游戏对象中你可以任意使用JavaScript语言的合法字符串来命名，该名称将在你的代码中表示你对应载入的资源。
显示图像
为了显示图像，我们在create函数中放入下面的代码：
this.add.image(400, 300, 'sky');
用浏览器打开part3.html文件，你会看到一个蓝色天空的背景图：
参数值400和300是图片的x和y坐标。那么为什么是400和300呢？因为在Phaser3中，所有对象的原点默认为它们的中心。这幅背景图是800x600像素的，如果你将它定位在坐标(0,0)上，那你只能看到它的右下角。只有定位在(400,300)坐标才能看到全图。
提示：可以用setOrigin改变默认原点。例如代码：this.add.image(0,0,’sky’).setOrigin(0,0)可重置原点到图像的左上顶点。在Phaser 2中要达到此效果要用‘anchor’属性，但在Phaser 3 中用originX和originY属性来替代。
游戏对象的显示顺序将和创建它们的顺序一致，也就是说：如果想将一个星星的精灵放在背景上，那么就要保证显示star的代码在显示sky的代码之后。如下所示：
| function create () { this.add.image(400, 300, 'sky'); this.add.image(400, 300, 'star'); } |
如果star的图片在前，它将被背景图像盖住。