缩放
这是 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
这是您到目前为止应该看到的效果，实时运行。要查看其源代码，请单击“播放”按钮。
后续步骤
现在我们已经设置好了游戏的缩放，让我们继续学习第三课，学习如何 加载资源并在屏幕上显示它们。