Phaser

＃Phaser：滑鼠輸入 該文章是Phaser系列的一部分。點擊這裡查看系列文章的第一篇。 任何 GameObject 都可以被設置為可互動。 為了實現這一點，我們必須通過調用setInteractive()方法來設置。 text = this.add.text(100, 100, '測試') text.setInteractive() 一旦一個 GameObject 變成了可互動的，它就可以聽取事件。 我們可以使用on()方法來做到這一點。我們通過傳入事件名和當事件發生時要執行的回調函數來實現： text.on('pointerup', function () {}) pointerup只是我們可以聽取的滑鼠事件之一。我們還有： pointerdown pointerdownoutside pointerup pointerupoutside pointermove pointerover pointerout wheel 這只是一個開始。我們還有很多先進的滑鼠（和觸摸）事件控制可供我們使用。 gameobjectdown是一個更通用的事件，當點擊任何互動元素時觸發，它不在物件上觸發，而是在this.input上觸發： this.input.on('gameobjectdown', () => {})

本文是 Phaser 系列文章的一部分。點擊這裡查看系列文章的第一篇。 在 create 函式內，我們可以將 GameObjects 加到遊戲中。 例如我們可以畫出形狀，像是一個圓形： function create() { const circle = this.add.circle(100, 100, 90, 0xffffff) } 這會在座標 (100, 100) 上加入一個直徑為 90 的白色圓形。這些數字都是以像素為單位。 circle 變數包含了新增的圓形的參考。 this 在函式的上下文中是指場景物件。 另一個例子是 this.add.text()，這會在遊戲中加入文字： const text = this.add.text(130, 100, 'test') 你可以通過傳遞一組選項來自訂文字的外觀： const text = this.add.text(50, 100, 'Test', { font: '20px Arial', fill: '#FFFFFF' }) 任何 GameObject 都有一組屬性。例如，我們可以使用 text.x 和 text.y 來訪問 2D 空間中的 x 和 y 軸位置。

此篇文章是 Pharser 系列的一部分。點選這裡 查看這個系列的第一篇文章。 場景是我們定義遊戲的地方，在配置中將它們作為屬性傳遞給 scene 物件。 特別是，我們可以定義 preload 是我們載入外部資源的函式 create 在遊戲剛剛建立時被呼叫，在這裡我們可以定義遊戲開始時所需的 GameObjects update 是遊戲事件迴圈，用於定義遊戲的運作方式 GameObjects 是 Phaser 物件的一種特殊類型 以下是上述提到的兩個事件的範例： function preload() {} function create() {} new Phaser.Game({ width: 450, height: 600, scene: { preload: preload, create: create } }) 或者，因為在這種情況下每個屬性都與函式具有相同的名稱： new Phaser.Game({ width: 450, height: 600, scene: { preload, create } })

本文章為 Phaser 系列文章的一部分。點此查看該系列文章的第一篇。 在先前的例子中，我們看到了如何通過將包含函數引用的物件傳遞給 Phaser.Game() 選項物件的 scene 屬性來創建場景： function preload() {} function create() {} new Phaser.Game({ width: 450, height: 600, scene: { preload, create } }) 這是一個簡單的情境。 一個遊戲通常有多個場景。您可以在不同的檔案中創建每個場景，並將它們作為陣列傳遞給 scene 屬性。 在這種情況下，場景是通過擴展 Phaser.Scene 物件來創建的。 我們在一個獨立的 Welcome.js 檔案中創建了一個歡迎場景： export default class Scene1 extends Phaser.Scene { constructor() { super('welcome') } create() { this.add.text(20, 20, 'Loading..') setTimeout(() => { this.scene.start('game') }, 2000) } } 並在 Game.js 中創建了一個遊戲場景： export default class Scene2 extends Phaser.Scene { constructor() { super('game') } create() { this....

本篇文章是 Phaser 系列的一部分。點擊這裡查看系列文章的第一篇。 你可以將圖片添加為 GameObjects，但在遊戲開始時顯示圖片時，需要在 preload() 函數中將它們預加載。我們要為它們分配一個標識符，然後在 create() 函數中使用該資源添加圖片： function preload() { this.load.image('apple', 'apple.png') } function create() { this.add.image(200, 200, 'apple') } 注意，200, 200 是我們要放置圖片的位置。它指的是圖片的中心點。 如果要將其設置為左上角位置（較易於理解），可以在圖片上調用 setOrigin() 方法： const image = this.add.image(200, 200, 'apple') image.setOrigin(0, 0) 一旦圖片被創建並添加，我們可以對其進行多種操作，包括縮放： image.setScale(2) 翻轉： image.flipY = true image.flipX = true 等等。

本篇文章是 Phaser 系列的一部分。點擊這裡查看系列的第一篇文章。 Phaser 提供了三種不同的內建物理引擎: Arcade 物理引擎 Matter.js Impact (相容 Impact.js) Arcade 物理引擎是其中最簡單的一種，現在我們就來介紹它。 在 Phaser.Game 初始化配置物件中，通過添加 physics 屬性來啟用 Arcade 物理引擎: const config = { //... physics: { default: 'arcade', arcade: { debug: false } } } 你可以將物理引擎添加到一個單獨的遊戲對象中，如下所示: const dog = this.physics.add.sprite(20, 20, 'dog') 你也可以創建一個物理組。 組對於設置一組物件的共同規則非常有用。 我們有兩種類型的組: 靜態組和動態組。靜態組包含不會移動的元素，例如平台遊戲中的地面: //在 preload() 方法中 this.load.image('ground', 'assets/platform.png') //在 create() 方法中 const platforms = this.physics.add.staticGroup() const ground = this.add.sprite(200, 200, 'ground') platforms.add(ground) 注意: 可以從 https://github.com/photonstorm/phaser3-examples/tree/master/public/assets 下載該資源。...

本文是《Phaser 系列》的一部分。点击这里查看系列的第一篇文章。 你可以检测到物理启用的物体之间的碰撞。 Phaser 为我们提供了两个方便的方法来开始。 我们有 collider 和 overlap。两者都可以让我们检测对象是否接近彼此，但有一个区别：collider 在物体相遇时会自动使其反弹，而 overlap 允许物体彼此重叠。 以下是如何添加一个 collider： const collisionHappened = (dog, cat) => { projectile.destroy() } this.physics.add.collider(dogs, cats, collisionHappened, null, this) 以下是如何添加一个 overlap： const overlapHappened = (dog, cat) => { projectile.destroy() } this.physics.add.overlap(dogs, cats, collisionHappened, null, this) 您还可以设置屏幕边界，使得物理对象在到达屏幕边缘时不消失。 调用物体的 setCollideWorldBounds() 方法，并传递 true 值： const dog = this.physics.add.sprite(20, 20, 'dog') dog.setCollideWorldBounds(true) 如果您还想在物体到达屏幕边界时使其反弹，调用： dog.setBounce(1) 您传递的数字将确定其反弹速度。试试设置为 0.5 或 1.5，您将看到物体以较小或较大的能量反弹。

本篇文章是 Phaser 系列的一部分。點擊這裡 查看系列的第一篇文章。 Phaser 遊戲是在 HTML 的 <canvas> 元素中渲染的。 如果你對 Canvas 還不熟悉，我在 Canvas API 教程 中詳細介紹了它。 我們創建一個帶有特定寬度和高度的畫布，並在其中繪製內容。 我們無法使用 CSS 來對元素進行排版，而是需要使用更底層且較困難的 API。 幸運的是，Phaser（以及其他使用底層 Canvas 的庫）抽象了所有細節，所以我們可以專注於應用程式代碼。 我們可以通過在 Phaser 物件上調用 Game 靜態方法來初始化一個 Phaser 遊戲： new Phaser.Game() 我們必須將一個對象字面量傳遞給此函數，其中包含一組配置選項： new Phaser.Game({}) 在這個配置對象中，我們可以設置多個屬性。 首先，我們可以設置畫布的寬度和高度： new Phaser.Game({ width: 450, height: 600 }) 另一個我們可以傳遞的屬性是 backgroundColor，它接受一個十六進制值，例如 0x000000 表示黑色。 顏色類似於 CSS 顏色，但你需要在前面加上 0x 以便 JavaScript 知道這是一個十六進制數字。

本文章是 Phaser 系列文章的一部分。點擊這裡查看系列文章的第一篇。 在 Phaser 中，除了 preload() 和 create() 這兩個場景外，我們還有第三個場景，被稱為 update()。 在這裡，一切事情都會發生。 preload() 和 create() 只會執行一次。 update() 會一直被呼叫，成為一個無窮迴圈，直到遊戲結束。 在這個例子中，我們創建了一個文字，它慢慢地移動到畫布的右下角： let text function create() { text = this.add.text(100, 100, 'test') } function update() { text.x += 1 text.y += 1 } const game = new Phaser.Game({ width: 400, height: 400, scene: { create, update } }) 注意我在頂部添加了 let text，這樣我們可以在 create() 和 update() 中引用它。 在 update() 中，我修改了 x 和 y 屬性。您還可以修改其他屬性，例如可以修改 angle 以旋轉物體：...

本文是Phaser系列文章的一部分。點擊這裡查看該系列文章的第一篇。 與顯示圖像類似，要播放音頻文件，您必須預加載它並將其賦予一個標籤： function preload() { this.load.audio('sound', 'sound.mp3') } 對於圖像，我們使用了this.load.image()，這裡我們使用了this.load.audio()。 完成這一步後，我們可以將音頻用於我們的create()或update()函數中： this.sound.add('sound') 這將返回一個對象。重要的是將它賦值給一個變量： const sound = this.sound.add('sound') 因為稍後，當我們需要時，我們將在其上調用play()方法： sound.play() 例如，您可以將其與鼠標事件結合使用，當單擊或懸停在項目上時播放聲音。