/

Phaser: 處理畫布

Phaser: 處理畫布

本篇文章是 Phaser 系列的一部分。點擊這裡 查看系列的第一篇文章。

Phaser 遊戲是在 HTML 的 <canvas> 元素中渲染的。

如果你對 Canvas 還不熟悉，我在 Canvas API 教程 中詳細介紹了它。

我們創建一個帶有特定寬度和高度的畫布，並在其中繪製內容。

我們無法使用 CSS 來對元素進行排版，而是需要使用更底層且較困難的 API。

幸運的是，Phaser（以及其他使用底層 Canvas 的庫）抽象了所有細節，所以我們可以專注於應用程式代碼。

我們可以通過在 Phaser 物件上調用 Game 靜態方法來初始化一個 Phaser 遊戲：

1
new Phaser.Game()

我們必須將一個對象字面量傳遞給此函數，其中包含一組配置選項：

1
new Phaser.Game({})

在這個配置對象中，我們可以設置多個屬性。

首先，我們可以設置畫布的寬度和高度：

1
2
3
4
new Phaser.Game({
 width: 450,
 height: 600
})

另一個我們可以傳遞的屬性是 backgroundColor，它接受一個十六進制值，例如 0x000000 表示黑色。

顏色類似於 CSS 顏色，但你需要在前面加上 0x 以便 JavaScript 知道這是一個十六進制數字。

tags: [“Phaser”, “Canvas”, “HTML”, “渲染”, “API”]