Phaser3入門教程：第一個Phaser3遊戲（中文版）（二）
- 裝載資源
現在要為我們的遊戲載入所需的資源了。我們只需要在場景函式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
遊戲物件的顯示順序將和建立它們的順序一致，也就是說：如果想將一個星星的精靈放在背景上，那麼就要保證顯示star的程式碼在顯示sky的程式碼之後。如下所示：
|
function create () { this.add.image(400, 300, 'sky'); this.add.image(400, 300, 'star'); } |
如果star的圖片在前，它將被背景影象蓋住。