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

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

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

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

加載圖片

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

加載音頻

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

加載圖片序列

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

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

加載資源集合

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

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

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

上一節(jié)我們提過每個(gè)場(chǎng)景都有自己的生命周期，因此加載資源的操作應(yīng)放在preload這個(gè)階段執(zhí)行。當(dāng)preload中的資源加載完畢后，則preload場(chǎng)景將進(jìn)入create階段，示例代碼如下：

// 加載場(chǎng)景
preload: function() {
    this.preload = function() {
        // 設(shè)置背景為黑色
        game.stage.backgroundColor = "#000000";
        // 加載游戲資源
        game.load.crossOrigin = "anonymous"; // 設(shè)置跨域
        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_...

第二步：監(jiān)聽加載完成的事件

通常來說我們都需要反饋加載進(jìn)度，例如一個(gè)進(jìn)度條，或者是一個(gè)百分比的數(shù)字。于是我們接下來就需要監(jiān)聽加載完成的事件了。

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

如果我們需要監(jiān)聽到加載的進(jìn)度，那么可以用下面的方法：

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

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

第三步：添加加載頁(yè)的最小展示時(shí)間

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

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

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

順帶豐富一下開始場(chǎng)景吧

// 開始場(chǎng)景
created: function() {
    this.create = function() {
        // 添加背景
        var bg = game.add.image(0, 0, "bg");
        bg.width = game.world.width;
        bg.height = game.world.height;
        // 添加標(biāo)題
        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, "點(diǎn)擊任意位置開始", {
            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);
        // 添加點(diǎn)擊事件
        game.input.onTap.add(function() {
            game.state.start("play");
        });
    }
}

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

onDown - 對(duì)應(yīng)touchstart/mousedown

onUp - 對(duì)應(yīng)touchend/mouseup

onHold - 封裝了長(zhǎng)按事件的實(shí)現(xiàn)

onTap - 封裝了點(diǎn)擊事件的實(shí)現(xiàn)

另外還有滑動(dòng)事件：

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

現(xiàn)在，開始界面是這樣子的：

這一節(jié)我們介紹了加載場(chǎng)景，分步驟介紹了加載資源、監(jiān)聽加載完成的事件以及添加一個(gè)最小的加載展示時(shí)間，其中“添加一個(gè)最小的加載展示時(shí)間”是偏實(shí)際應(yīng)用的內(nèi)容，非必須。

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

那么如何利用這些資源構(gòu)建出游戲的玩法，蘋果怎么掉，怎么控制主角等等，將是下一節(jié)的內(nèi)容。

回顧：

Chapter 1 - 認(rèn)識(shí)Phaser.js

Chapter 2 - 搭建游戲的骨架

下一節(jié)：Chapter 4 - 游戲即將開始