從零到一：用Phaser.js寫意地開發小遊戲（Chapter 3 - 加載遊戲資源）

回顧

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

Phaser.Loader

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', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bg.png');
        game.load.image('dude', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/dude.png');
        game.load.image('green', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/green.png');
        game.load.image('red', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/red.png');
        game.load.image('yellow', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/yellow.png');
        game.load.image('bomb', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/bomb.png');
        game.load.image('five', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/five.png');
        game.load.image('three', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/three.png');
        game.load.image('one', '//24haowan-cdn.shanyougame.com/pickApple2/assets/images/one.png');
        game.load.audio('bgMusic', '//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 - 遊戲即將開始