【譯】Phaser3 入門教程（附帶webpack版本，見part1）

時間 2019-11-21

標籤 phaser3 phaser 入門教程附帶 webpack 版本 part1 简体版

原文原文鏈接

Phaser 3

網上沒翻到對應的中文版，故而我學習的時候隨手翻譯了一下Phaser3的官網教程，沒有逐句翻譯，意思到位就行。web

Phaser 3安裝

$ cnpm i --save phaser

webpack全局配置shell

// 若有多文件開發，可使用全局配置Phaser，不然單文件import Phaser from 'phaser'便可
const webpack = require('webpack')
...

module.exports = function () {
    ...
    plugins: [
        ...
         new webpack.ProvidePlugin({
             // 無需每一個文件導入，全局直接使用Phaser
             Phaser: 'phaser',
         })
    ]
}

Part 1 - 介紹

Phaser是一個h5遊戲框架，旨在幫助開發者作出有力的、跨瀏覽器的HTML5遊戲真的很快。它的創建是爲了利用桌面端和移動端上瀏覽器的優點，惟一的要求就是瀏覽器canvas標籤的支持。npm

要求

點擊下載官方源碼
 點擊下載個人webpack版本源碼canvas

下載個人git上的源碼，在文件目錄下運行如下源碼，便可預覽效果（支持本地服務器預覽及熱更新）瀏覽器
$ cnpm i
$ cnpm run dev

在開始教程以前確保你已經瞭解過了開始指南服務器

var config = {
     type: Phaser.AUTO,
     width: 800,
     height: 600,
     scene: {
         preload: preload,
         create: create,
         update: update
     }
 };

var game = new Phaser.Game(config);

function preload() {}

function create() {}

function update() {}

其中，config的type能夠有三個值：Phaser.CANVAS,Phaser.WEBGL, Phaser.AUTO決定遊戲渲染的上下文，其中Phaser.AUTO會自動嘗試使用WebGL，若是瀏覽器或者設備不支持，會回退到Canvas渲染；框架

Phaser建立的canvas元素默認插入document中腳本被執行的地方，能夠經過parent屬性來設置其父容器（用id名字設置）

Part 2 - 加載資源

全部要加載的資源須要放在scene的preload進行預加載

// 在webpack中須要先import進來資源，而後用變量替換下面資源的url
function preload () {
    // 載入4張圖片和1個精靈
    // 第一個參數是該資源的別名
    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 });
}

顯示一張圖片

function create() {
    this.add.image(400, 300, 'sky');
}

this.add.image(x, y, alias)，Phaser3默認全部Game的對象的原點即爲中心（這張背景圖本來是800

x600的大小）

Hint：能夠用 setOrigin來改變原點，例如：this.add.image(0, 0, 'sky').setOirigin(0, 0)

在game對象中建立對象的順序即爲顯示的順序

function create() {
    // 星星在天空上
    this.add.image(400, 300, 'sky');
    this.add.image(400, 300, 'star');
}

Part 3 - 建造世界

this.add.image創造了一個新的圖片game對象，並將其加入scenes的顯示列表，全部game對象都在這個列表上。

你能夠將img放在任何地方，Phaser不會care，scene是沒有固定大小的，且能夠在任意方向上無限延伸。camera系統能夠控制你看scene的視角，你隨意對camera移動、變焦。能夠建立多個camera，但這個話題超出了這個教程討論的範圍，足以證實Phaser3的camera系統較Phaser2的強大之處。

如今咱們在scene上添加背景、圖片和一些臺階：

var platforms;

function create() {
    this.add.image(400, 300, 'sky');
    platforms = this.physics.add.staticGroup();
    platforms.create(400, 568, 'ground').setScale(2).refreshBody();
    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
}

其中this.physics表示咱們用到了Arcade Physics引擎，在使用前，咱們須要在config中將引擎加進來，故而更新config以下：

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

Part 4 - 平臺的解釋

對以前在create()函數中添加的一組代碼作出解釋，首先：

playforms = this.physics.add.staticGroup();

在Arcade Physics中有兩種物質體：動態和靜態，動態物體是能夠受力運動的（例如加速度和速度），它能夠反彈和碰撞，且其運動受物體的質量和其餘因素的影響。

造成鮮明對比，靜態物體只有位置和大小，不受重力影響，不能添加速度，且受到碰撞後不會移動。對於咱們的背景和平臺，是很是適合的選擇。

什麼是group？顧名思義，是一組屬性類似的對象，且能夠用同一個單元去控制它們。與其餘game對象相比，group能夠經過建立本身的helper函數來方便建立本身的game對象，例如create()函數，一個物理group能夠自動建立該引擎支持的子對象，從而節省你的工做量。

用咱們的平臺group，咱們能夠建立這些平臺以下

// 因爲對靜態對象使用了setScale(2)，故而須要用refreshBody()通知引擎
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
platforms.create(600, 400, 'ground');
platforms.create(50, 250, 'ground');
platforms.create(750, 220, 'ground');

其中'ground'是綠色矩形，大小爲400x32

Part 5 - 準備player

player = this.physics.add.sprite(100, 450, 'dude');
player.setBounce(0.2);
player.setCollideWorldBounds(true);

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', {
        start: 0,
        end: 3,
    }),
    frameRate: 10,
    repeat: -1,
});

this.anims.create({
    key: 'turn',
    frames: [{
        key: 'dude',
        frame: 4,
    }],
    frameRate: 20,
});

this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', {
        start: 5,
        end: 8,
    }),
    frameRate: 10,
    repeat: -1,
});

物理精靈

// 在(100, 450)放置sprite（默認爲動態物體）
player = this.physics.add.sprite(100, 450, 'dude');
// 設置反彈值0.2
player.setBounce(0.2);
// 設置爲與世界的邊界碰撞
player.setCollideWorldBounds(true);

首先這個sprite是經過物理game對象工廠建立的(this.physics.add)，故而默認爲動態物體。

其中世界的邊界，默認超出遊戲的維度，可是咱們已經將遊戲設置爲800x600，並設置setCollideWorldBounds屬性，故而player不會超出這個區域。

動畫

回顧preload()函數，咱們將'dude'以spritesheet加載進來，而不是以image，這是由於spritesheet自帶動畫框架。

（這裏有9幀，4個左跑，一個面對camera，4個右跑）Phaser在動畫幀上支持對sprites的反轉，但出於這個教程的目的，咱們以老辦法作就能夠。

this.anims.create({
     key: 'left',
     frames: this.anims.generateFrameNumbers('dude', {
         // 左跑涉及到前4幀 
         start: 0,
         end: 3,
     }),
     // 每秒跑10幀
     frameRate: 10,
     // -1表示loop
     repeat: -1,
 });

Extra Info：與Phaser2不一樣的是，Phaser3的動畫管理器是全局系統，對於全部game對象，在Phaser中建立的動畫都是全局的，它們共享全部的基本動畫數據，且其時間表由本身管理。這就容許你定義一個動畫，就能夠在不少game對象中使用。

Part 6 - 物體速度：一個物理世界

Phaser有三個不一樣的物理引擎(Arcade Physics, Impact Physics 和 Matter.js Physics )，對於咱們這種簡單遊戲，可使用Arcade Physics引擎，不須要任何重的幾何計算

當一個物理精靈被建立時，會被賦予body的屬性（與其Arcade Physics body相關），這表明了在Phasers Arcade Physics引擎中這個sprite被當作一個物質體，這個物質體有咱們能夠操縱的不少屬性和方法。

例如，爲了模擬重力對於sprite的印象，能夠寫成

// 值越大，重力影響越大，下落越快
player.body.setGracityY(300);

在config中已經設置過了默認的

physics: {
     default: 'arcade',
         arcade: {
             gravity: {
                 y: 300
             },
         },
 },

能夠看到player落在了ground的裏面，這是由於咱們還沒測試ground和player之間的碰撞。

以前咱們已經設置過ground和playforms都是靜態物體，若是沒有設置爲靜態的話，默認會建立動態物體，那麼若是player和它們碰撞的話，會卡住一段時間，而後全部都會崩潰掉。這是由於，除非告訴其餘，不然當player碰撞ground的時候，這個ground sprite會成爲一個運動的物體對象，碰撞會致使ground下沉，player也會改變其速度。

爲了容許player對platforms碰撞，咱們能夠建立一個Collider對象。這個對象會監測兩個物體對象（能夠包括groups對象）的重疊和碰撞，影響行爲能夠在其回調函數中自定義，但出於這個教程的簡單目的，咱們不須要。

this.physics.add.collider(player, platforms);

Part 7 - 用鍵盤操縱player

Phaser擁有內置的鍵盤管理，咱們能夠在create()中經過下面的方式輕易獲取到鍵盤的監聽器

cursors = this.input.keyboard.createCursorKeys();

cursors對象有4個可取值：up, down, left, right，咱們須要在update循環調用中輪詢鍵盤的輸入值

if (cursors.left.isDown) {
     player.setVelocityX(-160);
     player.anims.play('left', true);
 } else if (cursors.right.isDown) {
     player.setVelocityX(160);
     player.anims.play('right', true);
 } else {
     player.setVelocityX(0);
     player.anims.play('turn');
 }
if (cursors.up.isDown && player.body.touching.down) {
    player.setVelocityY(-330);
}

上面的代碼很好理解，很少闡述，固然Phrase也容許你作更多複雜的操做，例如動量、加速度等等，可是上述代碼已經給了咱們所需的效果。你能夠試着改改上面的數據，看看動做效果。

Part 8 - 星塵

是時候該給咱們的遊戲添加一些小目標了，讓咱們在scene中添加一些星星，讓player去收集它們。爲了達成這個目標，咱們建立一個新的group，並填充它。

stars = this.physics.add.group({
    // 設置物體紋理，全部子對象的默認紋理都是star
    key: 'star',
    // 自動建立1個子對象，複製11個，共有12個星星
    repeat: 11,
    // 從(12, 0)開始，x軸方向每隔70放置一個子對象
    setXY: { x: 12, y: 0, stepX: 70 }
});

// 迭代對全部子對象進行設置，bounce表示碰撞的反彈程度，其範圍爲[0,1]
stars.children.iterate(function (child) {
    // Phaser.Math.FloatBetween返回0.4到0.8之間的隨機數
    child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));
});

這段code和以前建立平臺的group十分類似，但因爲咱們想要star移動，故而將其建立爲動態物體。

在迭代函數iterate中，因爲每一個子對象的位置都是從y=0處開始，因爲重力影響，會下落碰撞到地面或者平臺，故而咱們還需綁定platforms和star的碰撞關係：

this.physics.add.collider(platforms, stars);

除此以外，咱們還需檢測player是否與star重合

this.physics.add.overlap(player, stars, collectStar, null, this);

咱們能夠經過自定義函數collectStar()來進行檢查：

function collectStar(player, star) {
    star.disableBody(true, true);
}

這很簡單，若是某個star和player重合，這個star會隱藏掉，而且其父game對象stars不會受影響。

到此爲止，這個遊戲已經給了咱們一個能夠奔跑、跳躍、跳上平臺、收集天上落下的星星，對於這樣幾行短短的代碼，這個效果很是喜人了。

Part 9 - 分數的實現

如今這個遊戲還差兩部分須要實現：一個能夠擊殺玩家的敵人以及收集星星的分數顯示。首先，來實現分數的顯示。

這裏咱們先建立兩個變量：

var score = 0; // 記錄真實分數
var scoreText; // 承載分數的文本對象

在create()函數中定義scoreText對象

// 從(16,16)座標開始，放置文本對象的內容，默認文本爲'score:0'
scoreText = this.add.text(16, 16, 'score: 0', {
    fontSize: '32px',
    fill: '#000'
});

咱們設置遊戲規則爲，每收集一顆星星加10分，將這個邏輯添加到collectStar()函數中去

function collectStar(player, star) {
    star.disableBody(true, true);
    score += 10;
    scoreText.setText('Score: ' + score);
}

Part 10 - 彈跳炸彈

爲了完整咱們的遊戲，是時候加些壞蛋了，這給遊戲挑戰加了不少趣味性。

規則是：開局就會釋放一個彈跳炸彈，這個炸彈會在這關中瞎幾把轉，player碰上必死無疑。在你收集完全部星星後，這些星星會重生，隨着會再釋放一個彈跳炸彈，這就給玩家增長挑戰性：是男人就拿更高分。

首先咱們須要在create()中添加一組炸彈並綁定碰撞關係：

bombs = this.physics.add.group();
this.physics.add.collider(bombs, platforms);
this.physics.add.collider(player, bombs, hitBomb, null, this);

其中碰撞的回調函數自定義爲，若是碰到炸彈，全部動做中止，player變紅

function hitBomb(player, bomb) {
    this.physics.pause();
    player.setTint(0xF00);
    player.anims.play('turn');
    gameOver = true;
}

此外，咱們還須要在collectStar()函數中添加釋放炸彈的邏輯

function collectStar(player, star) {
    star.disableBody(true, true);
    score += 10;
    scoreText.setText('Score: ' + score);
    
    // 檢測display的星星個數
    if (stars.countActive(true) === 0) {
        stars.children.iterate((child) => {
            // 重啓全部星星，設置初始位置(child.x, y)
            child.enableBody(true, child.x, 0, true, true);
        });
        
        // 在玩家附近放置炸彈
        let x = (player.x < 400) ? Phaser.Math.Between(400, 800) : Phaser.Math.Between(0, 400);
        let bomb = bombs.create(x, 16, 'bomb');
        // 設置與世界的邊界碰撞
        bomb.setCollideWorldBounds(true);
        // 設置速度
        bomb.setVelocity(Phaser.Math.Between(-200, 200), 20);
        // 忽略重力影響
        bomb.allowGravity = false;
         // 設置炸彈彈跳程度(1讓炸彈能夠一直彈跳)
        bomb.setBounce(1);
    }
}

這個遊戲一旦炸彈數量增長，難度會加強