讓你的角色在phaser中復活

為你的移相器遊戲新增動畫將使他們更上一層樓。你就是這樣做的。...

在Phaser中新增遊戲動畫很容易。動畫使電子遊戲角色栩栩如生。將動畫融入遊戲的一種方法是為角色的移動設定動畫。你甚至可以給他們一個空閒狀態的動畫，將執行時，球員沒有任何移動。這會讓你的角色更有個性。

遊戲設定

你需要對Phaser有一個基本的瞭解才能使用動畫。如果您不熟悉Phaser，請先從基本的遊戲教程開始，然後再繼續。本教程將建立在這些基礎之上。

首先，建立一個具有可移動角色的遊戲。在我們的示例中，我們將從用箭頭鍵移動的塊開始。以下是起始程式碼：

此程式碼將建立一個可以在藍色背景周圍移動的遊戲塊。為簡單起見，該示例僅使用橙色塊作為遊戲角色。看起來是這樣的：

建立精靈圖紙

第一步是建立動畫。有許多方法來建立動畫，但這是超出了我們在這裡可以涵蓋。出於我們的目的，將動畫儲存為精靈表非常重要。

相關：最好的畫素藝術工具，創造畫素完美的藝術品

精靈圖紙是包含一組動畫幀的單個影象檔案。動畫中的每一幀都放在它後面的一幀旁邊。每個框架的大小必須相同。動畫程式將根據單個幀的尺寸將影象分割成單個幀。

影象儲存在一個數組中。與所有陣列一樣，這意味著第一個影象位於零位置。因此，在上面的示例中，向下動畫從0開始，到3結束。左邊的動畫從四點開始，到七點結束。

向phaser新增精靈表

載入sprite表類似於在Phaser中載入影象。但是，您的程式將需要有關影象檔案的更多資訊。之前，我們在影象中載入了以下文字：

this.load.image('gamePiece', 'img/gamePiece.png');

不過，Sprite表還需要一些引數。我們還必須指定框架的尺寸。因此，要載入sprite表，我們需要按如下方式調整程式碼：

this.load.spritesheet('gamePiece', 'img/spriteSheet.png', { frameWidth: 60, frameHeight: 60});

程式碼非常相似。最大的區別是我們添加了第三個引數，用於指定動畫幀的寬度和高度。在這種情況下，幀是60畫素乘60畫素。

本例將使用一個簡單的sprite表。我們已經添加了一個箭頭和閃爍的指示燈的遊戲精靈。箭頭將指向我們的精靈移動的方向，指示燈將朝這個方向閃爍。如果角色沒有移動，動畫將在所有幀中迴圈。

建立動畫

在為角色設定動畫之前，我們必須先建立動畫。我們已經上傳了精靈表，現在我們要說哪些幀在動畫中。要建立動畫，請將以下程式碼新增到create函式：

this.anims.create({ key: "up", frameRate: 2, frames: this.anims.generateFrameNumbers("gamePiece", {start: 0, end:2}), repeat: -1});

上面是向上方向的動畫。

關鍵字anims是animati***的縮寫。早期版本使用完整的關鍵字動畫，但當前版本使用此快捷方式。
關鍵點是動畫的名稱。您將使用該鍵呼叫動畫。
幀速率控制每秒顯示多少幀。這個例子每秒只有兩幀。
下一行指向動畫中使用的影象和幀。向上動畫使用遊戲件影象，從第0幀開始，到第2幀結束。
如果希望動畫連續迴圈，請將“重複”設定為-1。否則，可以輸入動畫在停止前應重複的次數。

您需要為每個方向和空閒狀態建立動畫。

相關：PowToon使建立動畫影片和幻燈片變得很容易

如何設定角色的動畫

向角色新增動畫非常容易。棘手的部分是動畫之間的轉換。可以在“建立”函式中設定開始動畫。

gamePiece = this.add.sprite(270, 450, 'gamePiece');gamePiece.anims.play("spin");

第一行建立播放器。這和我們以前用一個影象建立一個精靈是一樣的。第二行將動畫設定為旋轉。自旋是一個空閒的動畫，它將在0到11幀的所有幀之間迴圈。

現在，重新載入遊戲時，空閒動畫將開始播放。但是，你會注意到，即使你移動了你的角色，它仍然會繼續播放。基於運動設定動畫有點棘手。

誘惑是改變動畫時，球員按下按鈕，就像我們做了設定運動。這種方法的問題是，我們檢查播放器是否在更新函式中按下了一個鍵。update函式每幀執行一次。如果我們把一個動畫放在那裡，動畫會在播放器按下鍵的每一幀重新開始。

要解決這個問題，我們需要使用不同的方法。我們不想檢查一把鑰匙是否壞了，而是想知道一把鑰匙是否壞了。JustDown只有在第一次按下時才是真的。如果拿著鑰匙，那就不是真的。如果我們用JustDown設定動畫，動畫將不會重置每一幀。

您需要為要在create函式中監視的鍵輸入建立一個變數：

leftKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);rightKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT);upKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP);downKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);

然後，您需要檢查是否在更新功能中按下了該鍵：

if(Phaser.Input.Keyboard.JustDown(upKey)){ gamePiece.anims.play("up");}

現在，遊戲將更改為向上動畫一旦向上鍵是第一次按下。您需要為每個方向鍵編寫一個類似的if語句。

我們還有最後一個修改要做。現在，當播放器停止按鍵時，最後一個動畫繼續播放。我們希望它回到我們的閒置動畫。為此，我們使用JustUp方法。與JustDown類似，它會在玩家釋放一個鍵時觸發。

if(Phaser.Input.Keyboard.JustUp(upKey)){ gamePiece.anims.play("spin");}

一旦播放器停止按向上鍵，它會將動畫設定回我們的空閒旋轉動畫。您需要為每個方向鍵編寫一個類似的語句。

要檢視最終程式碼，請轉到pastebin。