缩放

这是 Phaser 游戏开发教程 的 16 步中的**第 2 步**。您可以在 Gamedev-Phaser-Content-Kit/demos/lesson02.html 找到完成本课后代码应有的样子。

缩放是指游戏画布在不同屏幕尺寸上的缩放方式。我们可以在预加载阶段自动使游戏适应任何屏幕尺寸，这样我们就不必在以后担心它。

Phaser 缩放对象

Phaser 中有一个特殊的 scale 对象，它提供了一些方便的方法和属性。更新现有的 preload() 函数，如下所示

js
function preload() {
  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
}

scaleMode 有几个不同的选项可用于缩放画布

  • NO_SCALE - 不缩放。
  • EXACT_FIT - 缩放画布以填充垂直和水平方向的所有可用空间，不保持纵横比。
  • SHOW_ALL - 缩放画布，但保持纵横比不变，因此图像不会像在之前模式中那样变形。屏幕边缘可能会出现黑色条纹，但我们可以忍受它。
  • RESIZE - 创建与可用宽度和高度相同的画布，因此您必须在游戏中动态放置对象；这是一种更高级的模式。
  • USER_SCALE - 允许您自定义动态缩放，自行计算大小、比例和比率；同样，这是一种更高级的模式

preload() 函数中的另外两行代码负责将画布元素水平和垂直对齐，使其始终居中显示，无论大小如何。

添加自定义画布背景颜色

我们也可以为画布添加自定义背景颜色，使其不再是黑色。stage 对象有一个 backgroundColor 属性，我们可以使用 CSS 颜色定义语法来设置它。在前面添加的另外三行代码下面添加以下代码

js
game.stage.backgroundColor = "#eee";

比较你的代码

您可以在下面的实时演示中查看本课的完整代码，并与之交互以更好地了解其工作原理

下一步

现在我们已经设置了游戏的缩放，让我们继续进行第三课，了解如何 加载资源并在屏幕上打印它们。