物理

這是 Gamedev Phaser 教程 的 16 個步驟中的第 5 步。為了在我們的遊戲中實現物件之間的正確碰撞檢測,我們需要引入物理引擎;本文將向您介紹 Phaser 中可用的物理引擎,並演示一個典型的簡單設定。

新增物理

Phaser 內建了三種不同的物理引擎——Arcade Physics、Impact Physics 和 Matter.js Physics——還有第四種選擇 Box2D,它是一個商業外掛。對於我們這樣的簡單遊戲,可以使用 Arcade Physics 引擎。我們不需要任何複雜的幾何計算——畢竟,這只是一顆在牆壁和磚塊之間反彈的球。

首先,讓我們在遊戲中配置 Arcade Physics 引擎。將 physics 屬性新增到 config 物件中,如下所示:

js
const config = {
  // ...
  physics: {
    default: "arcade",
  },
};

接下來,我們需要為我們的球啟用物理系統——Phaser 物件物理預設情況下是停用的。在 create() 方法的底部新增以下行:

js
this.physics.add.existing(this.ball);

接下來,如果我們想在螢幕上移動我們的球,我們可以設定其 body 上的 velocity。再次將以下行新增到 create() 的底部:

js
this.ball.body.setVelocity(150, 150);

移除我們之前的 update 指令

請記住從 update() 方法中移除我們之前新增值的 xy 的舊方法,即將其恢復為空狀態:

js
class ExampleScene extends Phaser.Scene {
  // ...
  update() {}
}

現在我們已經透過物理引擎正確處理了這個問題。

再次嘗試重新載入 index.html。目前,物理引擎沒有重力或摩擦力,因此球將以恆定速度沿給定方向運動。

物理的樂趣

您可以透過物理引擎做更多的事情,例如,在 create() 中新增 this.ball.body.gravity.y = 500;,這將設定球的垂直重力。嘗試將速度更改為 this.ball.body.setVelocity(150, -150);,您會看到球向上發射,但隨後由於重力將其拉向下方而下落。

這類功能只是冰山一角——有各種函式和變數可以幫助您操縱物理物件。請檢視官方 物理文件,並參閱使用 Arcade 和 Matter.js 物理系統的大量 示例集合

Compare your code

這是您到目前為止應該看到的效果,即時執行。要檢視其原始碼,請單擊“播放”按鈕。

後續步驟

現在我們可以進入下一課,看看如何讓球 反彈牆壁