縮放
這是 Phaser 遊戲開發教程 16 個步驟中的第 2 步。我們將學習如何進行縮放，縮放是指遊戲畫布在不同螢幕尺寸下如何適應。我們可以在初始化時配置 scale，讓遊戲適應任何螢幕尺寸，這樣以後就不必擔心了。
Phaser 縮放物件
config 物件中的 scale 屬性允許我們設定遊戲畫布的縮放方式。按如下方式更新您的 config 物件：
js
const config = {
// ...
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
},
};
scale 中的 mode 屬性提供了幾種不同的畫布縮放方式選項：
NO_SCALE—不進行任何縮放（預設值）。ENVELOP—自動調整寬度和高度以覆蓋整個目標區域，同時保持縱橫比。它可能會超出目標尺寸。FIT—將畫布縮放到適應可用空間，同時保持縱橫比不變。根據縱橫比，可能無法覆蓋整個空間。HEIGHT_CONTROLS_WIDTH—根據高度調整畫布的寬度。WIDTH_CONTROLS_HEIGHT—根據寬度調整畫布的高度。RESIZE—調整畫布的可見區域，使其適應所有可用的父容器空間，而不考慮縱橫比。EXPAND—調整畫布的可見區域，使其適應所有可用的父容器空間，類似於 RESIZE 模式，並像 FIT 模式一樣縮放畫布尺寸以適應可見區域。
另一個屬性 autoCenter 負責水平和垂直對齊畫布元素，因此無論尺寸如何，它始終將畫布居中顯示在螢幕上。
為畫布新增自定義背景色
我們還可以為畫布新增自定義背景色，這樣它就不會一直是黑色的。配置物件有一個 backgroundColor 屬性來實現此目的，我們可以使用 CSS 顏色定義語法進行設定。將以下行新增到您的 config 物件中：
js
const config = {
// ...
backgroundColor: "#eeeeee",
};
Compare your code
這是您到目前為止應該看到的效果，即時執行。要檢視其原始碼，請單擊“播放”按鈕。
後續步驟
現在我們已經設定好了遊戲的縮放，讓我們繼續學習第三課，學習如何 載入資源並在螢幕上顯示它們。