遊戲場景的建立是遊戲開發的基礎，而遊戲場景又是由各種圖片、模型、文字等構成的，我們本節就來學習怎麼載入資源到遊戲場景中。

       一、載入圖片：

首先，我們載入一張簡單的圖片，程式碼如下：

var game = newPhaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload,create: create});
function preload() {
    //  給路徑所在位置的圖片定義一個唯一的關鍵字，這個關鍵字在所有的圖片中必須是唯一的。
    game.load.image('imageKey','assets/sprites/phaser2.png');
}

function create() {
       //引數：x座標，y座標，圖片關鍵字
    game.add.sprite(0, 0, 'imageKey');
}
 

這段程式碼中，我們只使用了preload和create兩個方法，因為我們只是載入了圖片和建立場景，並沒有進行其他操作，所以並沒有定義其他狀態。

       這裡，我們需要了解下sprite的概念，sprite的翻譯是精靈，它在phaser中是一個物件，具體來講，它是一個具有結構（紋理）、可以執行動畫、支援輸入事件和物理學的遊戲物件。所以，我們一般講會進行操作的圖片和動畫物件等都定義成sprite物件。

       在上面的例子中，因為我們沒有設定背景，所以自動填充為黑色，下面我們新增一張背景圖片：

var game = newPhaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload,create: create});
function preload() {
    //  給路徑所在位置的圖片定義一個唯一的關鍵字，這個關鍵字在所有的圖片中必須是唯一的。
    game.load.image('space','assets/pics/thalion-rain.png');
}
function create() {
var bg = game.add.tileSprite(0, 0, 800, 600, 'space');
//var bg = game.add.sprite(0, 0, 'space');
}
 

因為背景圖片需要填充整個遊戲區域，而sprite物件並不支援填充區域的寬高，所以我們選擇了tileSprite物件，tileSprite物件可以對圖片進行裁剪或平鋪填充設定區域，你可以切換註釋行嘗試下新增兩種物件的不同。

當然，你也可以直接填充一個顏色作為背景色：

function create() {
       //注意，這裡的顏色只支援16進位制的數字或者字串
    game.stage.backgroundColor = 0xfff00;
//  game.stage.backgroundColor = '#ff0000';
}

二、載入文字

       如果只是單純的在遊戲中顯示文字的話，很簡單，檢視程式碼：

var game = newPhaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { create: create });

//設定文字樣式：大小、字型、顏色、排列方向
var textStyle= { font: "48px Arial", fill: "#ff0044", align:"center" };
functioncreate() {
       //game.world.centerX：檢視中心的x座標
       //game.world.centerY：檢視中心的y座標
    var text =game.add.text(game.world.centerX, game.world.centerY, "你好，歡迎來到Phaser的世界", textStyle);
    //錨點設定
text.anchor.set(0.5, 0.5);
//text.scale.setTo(0.5);
//text.angle = 90;
//text.alpha = 0.5;
}

這裡要介紹幾個基礎且常用的屬性：anchor、scale、angle、alpha。

anchor（錨點）：取值範圍0~1，其實就是，元素（圖片、文字等）中心與放置位置（新增到的座標）相對於自身長寬的一個比例，比如（0,0）表示元素左上角座標和放置位置座標重合，（1,1）表示元素右下角座標和放置位置座標重合，（0.5,0.5）表示元素中心和放置位置重合，其他則根據元素長寬比例來設定。

scale（縮放比例）：相對於元素原始尺寸的比例。

angle（角度）：一個有效的數字，一般取值0~360.

alpha（透明度）：也就是rgba中的a，取值範圍0~1.

       可是遊戲嘛，很多時候都常常使用一些類似於藝術字之類的炫酷字型，那就沒辦法用textStyle設定文字樣式了，這個時候，我們就需要藉助一個叫做BitmapText（點陣圖文字，如果不知道什麼叫點陣圖的話，可以百度一下概念），使用BitmapText物件，我們不僅可以自定義字型，還可以定義角度、透明度、顏色等屬性，先來看一個簡單的例子：

var game = newPhaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload,create: create, render: render });

function preload() {
       //載入點陣圖字型圖片和配置檔案
       //bitmapFont(key, textureURL, atlasURL,atlasData, xSpacing, ySpacing)
       //引數：關鍵字，紋理圖片路徑，配置檔案（xml或json格式，如果不帶字尾，預設解析成xml格式），atlasData，字元間距，行間距
       //atlasData：暫時沒有用到，根據api翻譯的理解，應該是如果配置檔案有多層的話，這裡可以選擇其中的一層
    game.load.bitmapFont('desyrel','assets/fonts/bitmapFonts/desyrel.png', 'assets/fonts/bitmapFonts/desyrel.xml');
}
 
var line1;
var line2;
function create() {
       //順便檢視下anchor、tint、scale、alpha效果
    var text1 = game.add.bitmapText(400, 70,'desyrel', 'Anchor.x = 0', 64);
    var text2 = game.add.bitmapText(400, 270,'desyrel', 'Anchor.x = 0.5', 64);
    text2.anchor.x = 0.5;
    var text3 = game.add.bitmapText(400, 470,'desyrel', 'Anchor.x = 1', 64);
    text3.anchor.x = 1;
    //設定文字顏色
    text3.tint = 0xFF0000;
    text3.scale.set(0.8);
    text3.alpha = 0.5;
       //新增兩條中心線
    line1 = new Phaser.Line(400, 0, 400, 600);
    line2 = new Phaser.Line(0, 300, 800, 300);
} 
function render() {
       //顯示中心線
    game.debug.geom(line1);
    game.debug.geom(line2);
}

下面是使用到的圖片：

       如果紋理圖片被整合到其他圖片中，和另外的圖片合成了一張新圖片，照樣也可以設定點陣圖字型（不過此方法為2.7版本新增方法，2.6以下不支援）：

var game = newPhaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload,create: create });
function preload() {
    //  載入紋理圖片和圖片地圖集資料
    game.load.atlas('atlas','assets/sprites/atlas-mixed.png', 'assets/sprites/atlas-mixed.json');
    //  載入點陣圖字型配置檔案
    game.load.xml('fontData','assets/fonts/bitmapFonts/desyrel.xml');
}
var bmpText;
functioncreate() {
       // addBitmapFontFromAtlas方法為2.7版本新增的
       //引數：定義字型的關鍵字，圖片資源關鍵字，圖片中字型部分的關鍵字，字型配置檔案，配置檔案格式，字元間隔，行間距
    game.cache.addBitmapFontFromAtlas('myFont','atlas', 'desyrel', 'fontData', 'xml', 0, 0);
    // 新增點陣圖字型：x，y，字型關鍵字，文字，字型大小

    bmpText = game.add.bitmapText(0, 100,'myFont', 'A Bitmap Font\nfrom a Texture Atlas', 64);

    bmpText.align = 'center';
    bmpText.centerX = 400;

    //  還可以新增同一張圖片的其他元素：一個綠球
    var ball = game.add.sprite(20, 100,'atlas', 'wizball');
}

       其實還有一種簡單的匯入文字資源的方式，只需要載入一張圖片就行了，不過在這張圖片中，每個字元或者空格都要佔有相同大小的位置，還要定義好文字的位置，這樣才可以使用，檢視下面示例：

這是Phaser.RetroFont已經定義好的字元：

要使用的圖片如下：

程式碼如下：

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload,create: create, update: update });

function preload() {
    game.load.image('goldFont','assets/fonts/retroFonts/gold_font.png');
    game.load.image('bluePink','assets/fonts/retroFonts/bluepink_font.png');
}
var font1;
var font2;
var image1;
var image2;
function create() {
       console.log(Phaser);
       //字首，空格對應空格
    font1 = game.add.retroFont('goldFont', 16,16, "!     :() ,?." +Phaser.RetroFont.TEXT_SET10, 20, 0, 0);
    font1.text = "phaser brings you retrostyle bitmap fonts";
    image1 = game.add.image(game.world.centerX,48, font1);
    image1.anchor.set(0.5);
font2 = game.add.retroFont('bluePink', 32,32, Phaser.RetroFont.TEXT_SET2, 10);
font2.setText("phaser 2\nin thehouse", true, 0, 8, Phaser.RetroFont.ALIGN_CENTER);
image2 = game.add.image(game.world.centerX,220, font2);
    image2.anchor.set(0.5);

       //每兩秒鐘隨機變換一次顏色
    game.time.events.loop(Phaser.Timer.SECOND *2, change, this);
}

function change(){
       //程式碼的作用是生成一個類似0xXXXXXX這樣的16進位制數字
    image2.tint = Math.random() * 0xFFFFFF;
}
function update() {
       //game.time.physicsElapsed = 1/60
       image2.rotation += (2 *game.time.physicsElapsed);
}

       這個時候，你可以想象一下如果遊戲中的提示全部用中文特效來做，你要做多少個字的特效？

三、載入動畫

大家都知道，動畫其實就是由一幀一幀的圖片組成的，所以動畫的本質就是讓一系列的圖片按照順序以特定的時間間隔顯示出來。Phaser也一樣，它的動畫實際上就是載入了一張（或幾張）png圖片，然後按照固定的寬高擷取圖片中相應位置的內容作為動畫的一幀，按照規定的順序逐一顯示，形成動畫。說起來有點繞口，下面還是直接看例子吧：

1.載入順序、固定位置動畫：

先來看個示例：

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload,create: create });

function preload() {
       //39X40是每個畫面的尺寸
    game.load.spritesheet('mummy', 'assets/sprites/metalslug_monster39x40.png',39, 40);
} 
function create() {
       //將sprite新增到場景中
    var mummy = game.add.sprite(300, 200,'mummy');
//因為圖片太小，放大為原來的兩倍顯示
mummy.scale.set(2); 
    //新增一個名叫walk的動畫
    //因為我們沒有設定其他引數，所以它會執行mummy中所有的frame
    var walk = mummy.animations.add('walk');
    //開始動畫，每秒30幀，迴圈執行
    mummy.animations.play('walk', 30, true);
}

上面的示例中，要載入的圖片如下：

這張圖片一共有16個畫面，圖片大小156*160px，每個畫面都佔用了39*40px，按照順序顯示，就形成了上面的動畫；可是如果畫面數量不是16個呢，如果圖片中有額外的空白呢？那麼把程式碼修改下吧：

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload,create: create }); 
function preload() {
       //37X45是每個frame的尺寸，畫面並沒有佔滿全部圖片，所以新增一個引數：顯示畫面的數量
    game.load.spritesheet('mummy','assets/sprites/metalslug_mummy37x45.png', 37, 45, 18); 
} 
function create() {
       //將sprite新增到場景中
    var mummy = game.add.sprite(300, 200,'mummy');
    mummy.scale.set(2); 
    //新增一個名叫walk的動畫
    //因為我們沒有設定其他引數，所以它會執行mummy中所有的frame
    var walk = mummy.animations.add('walk');
    //開始動畫，每秒30幀，迴圈執行
    mummy.animations.play('walk', 30, true);
}

這個例子中，載入的圖片如下：

如果你的圖片中所有畫面並沒有緊挨，而是有著固定的間距，那麼你就需要在最後再新增兩個引數，margin和spacing，分別表示垂直和水平的間距（我並沒有找到合適的圖片，所以這裡不提供程式碼了）。 

2.載入無序、隨機位置動畫：

事實上，我們也不能保證製作的png圖片中每個畫面都有固定的長度和寬度（就算可以實現，也要花費設計人員很多的時間，畢竟是要按畫素調整的）。比如下面這張圖片，展示了一個機器人奔跑的動畫：

這個時候，我們可以使用atlasJSONHash函式來載入這張圖片和配合它使用的json檔案，程式碼如下：

var game = newPhaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload,create: create }); 

function preload() {
    game.load.atlasJSONHash('bot','assets/sprites/running_bot.png', 'assets/sprites/running_bot.json');
} 
function create() {

這樣動畫就可以播放了。

那麼問題又來了，我們怎麼生成一個和png圖片匹配的json的檔案呢？開啟上面的json檔案，你可以看到它是有固定的格式的，整個物件中包含了frames和meta兩個屬性，frames固定了所有畫面截圖位置和順序，meta屬性則顯示了製作工具的地址和圖片名稱等資訊。所以，其實json檔案是可以通過工具生成的。

  OK，這一節就就到這裡，下一節來講一些簡單的互動操作。

上面的示例中，要載入的圖片如下：
這張圖片一共有16個畫面，圖片大小156*160px，每個畫面都佔用了39*40px，按照順序顯示，就形成了上面的動畫；

可是如果畫面數量不是16個呢，如果圖片中有額外的空白呢？那麼把程式碼修改下吧：