摘要：順帶一說，這次的示例是做一個接蘋果的游戲，一句話說完就是控制主角接住每一個從天上掉下來的蘋果，否則就算輸。那么如何利用這些資源構建出游戲的玩法，蘋果怎么掉，怎么控制主角等等，將是下一節的內容。

上一節我們搭建了游戲的骨架，添加了四個游戲場景，分別是加載、開始、游戲、結束。那么這一節我們來介紹加載這個場景，順帶豐富一下各個場景的基本內容。

Phaser框架自帶的一個loader，支持加載多種類型的資源，下面是離線文檔中的介紹的截圖，詳細的API可以查閱文檔得知。

介紹幾個常用的加載資源的方法：(下列代碼中的game默認為Phaser實例，通過new Phaser.Game賦值)

加載圖片

game.load.image("star", "star.png");

加載音頻

game.load.audio("bg", "bg.mp3)");

加載圖片序列

由于要指定幀的寬高，因此一般是動畫的連續幀，例如行走動畫的每一幀合成的圖片。

game.load.spritesheet("walk", "walk.png", 80, 80);

加載資源集合

同樣可以用作加載圖片序列，但這種用法主要用于加載類似于TexturePacker打包出來的資源集合。相比于spritesheet一般是一連串的動畫幀合成的圖片，這種資源集合中的圖片可以是各種各樣的，和我們平常做網站會將icon、背景圖片等合成sprites一個道理。
打包出來的資源一般包括一個json和一張合成的圖片，json描述了合成圖片中每張圖片的寬高位置等信息。

game.load.altasJSONArray("fly", "fly.png", "fly.json");

第一步：加載你需要的資源

上一節我們提過每個場景都有自己的生命周期，因此加載資源的操作應放在preload這個階段執行。當preload中的資源加載完畢后，則preload場景將進入create階段，示例代碼如下：

// 加載場景
preload: function() {
    this.preload = function() {
        // 設置背景為黑色
        game.stage.backgroundColor = "#000000";
        // 加載游戲資源
        game.load.crossOrigin = "anonymous"; // 設置跨域
        game.load.image("bg", "http://24haowan-cdn.shanyougame.com/pickApple2/assets/images/bg.png");
        game.load.image("dude", "http://24haowan-cdn.shanyougame.com/pickApple2/assets/images/dude.png");
        game.load.image("green", "http://24haowan-cdn.shanyougame.com/pickApple2/assets/images/green.png");
        game.load.image("red", "http://24haowan-cdn.shanyougame.com/pickApple2/assets/images/red.png");
        game.load.image("yellow", "http://24haowan-cdn.shanyougame.com/pickApple2/assets/images/yellow.png");
        game.load.image("bomb", "http://24haowan-cdn.shanyougame.com/pickApple2/assets/images/bomb.png");
        game.load.image("five", "http://24haowan-cdn.shanyougame.com/pickApple2/assets/images/five.png");
        game.load.image("three", "http://24haowan-cdn.shanyougame.com/pickApple2/assets/images/three.png");
        game.load.image("one", "http://24haowan-cdn.shanyougame.com/pickApple2/assets/images/one.png");
        game.load.audio("bgMusic", "http://24haowan-cdn.shanyougame.com/pickApple2/assets/audio/bgMusic.mp3");
    },
    this.create = function() {
        alert("加載完畢!");
    }
}

示例代碼：https://jsfiddle.net/Vincent_...

第二步：監聽加載完成的事件

通常來說我們都需要反饋加載進度，例如一個進度條，或者是一個百分比的數字。于是我們接下來就需要監聽加載完成的事件了。

// 監聽加載完畢事件
game.load.onLoadComplete.add(function() {
    alert("加載完畢!");
});

如果我們需要監聽到加載的進度，那么可以用下面的方法：

// 添加進度文字
var progressText = game.add.text(game.world.centerX, game.world.centerY, "0%", {
    fontSize: "60px",
    fill: "#ffffff"
});
progressText.anchor.setTo(0.5, 0.5); // 設置錨點，用于居中
// 監聽加載完一個文件的事件
game.load.onFileComplete.add(function(progress) {
    progressText.text = progress + "%";
});

示例代碼： https://jsfiddle.net/Vincent_...

第三步：添加加載頁的最小展示時間

一般而言，我們做游戲都會在loading界面放一個LOGO，作為展示宣傳用，那么如果需要加載的資源體積很小的話，有可能加載界面就是一閃而過了。于是，根據我們開發的經驗，會設置一個最小的展示時間（例如3秒），在未到最小的展示時間前，即便資源已經加載完畢，也不會離開加載場景。

// 監聽加載完畢事件
game.load.onLoadComplete.add(onLoad);
// 最小展示時間，示例為3秒
var deadLine = false;
setTimeout(function() {
    deadLine = true;
}, 3000);
// 加載完畢回調方法
function onLoad() {
    if (deadLine) {
        // 已到達最小展示時間，可以進入下一個場景
        game.state.start("created");
    } else {
        // 還沒有到最小展示時間，1秒后重試
        setTimeout(onLoad, 1000);
    }
}

示例代碼：https://jsfiddle.net/Vincent_...

順帶豐富一下開始場景吧

// 開始場景
created: function() {
    this.create = function() {
        // 添加背景
        var bg = game.add.image(0, 0, "bg");
        bg.width = game.world.width;
        bg.height = game.world.height;
        // 添加標題
        var title = game.add.text(game.world.centerX, game.world.height * 0.25, "小恐龍接蘋果", {
            fontSize: "40px",
            fontWeight: "bold",
            fill: "#f2bb15"
        });
        title.anchor.setTo(0.5, 0.5);
        // 添加提示
        var remind = game.add.text(game.world.centerX, game.world.centerY, "點擊任意位置開始", {
            fontSize: "20px",
            fill: "#f2bb15"
        });
        remind.anchor.setTo(0.5, 0.5);
        // 添加主角
        var man = game.add.sprite(game.world.centerX, game.world.height * 0.75, "dude");
        var manImage = game.cache.getImage("dude");
        man.width = game.world.width * 0.2;
        man.height = man.width / manImage.width * manImage.height;
        man.anchor.setTo(0.5, 0.5);
        // 添加點擊事件
        game.input.onTap.add(function() {
            game.state.start("play");
        });
    }
}

示例代碼中使用了input的onTap事件，那么input實際上還有其他事件，例如下圖中框住的就是我們最常用的幾個事件：

onDown - 對應touchstart/mousedown

onUp - 對應touchend/mouseup

onHold - 封裝了長按事件的實現

onTap - 封裝了點擊事件的實現

另外還有滑動事件：

示例代碼：https://jsfiddle.net/Vincent_...

現在，開始界面是這樣子的：

這一節我們介紹了加載場景，分步驟介紹了加載資源、監聽加載完成的事件以及添加一個最小的加載展示時間，其中“添加一個最小的加載展示時間”是偏實際應用的內容，非必須。

在文章的最后我們還向場景中加入了主角、背景、標題和開始提示等元素，來豐富開始場景。順帶一說，這次的示例是做一個接蘋果的游戲，一句話說完就是控制主角接住每一個從天上掉下來的蘋果，否則就算輸。

那么如何利用這些資源構建出游戲的玩法，蘋果怎么掉，怎么控制主角等等，將是下一節的內容。

回顧：

Chapter 1 - 認識Phaser.js

Chapter 2 - 搭建游戲的骨架

下一節：Chapter 4 - 游戲即將開始