这篇翻译不完整。请帮忙从英语翻译这篇文章

这是Gamedev Phaser教程系列的第二课. 在课程完成之后,你可以在Gamedev-Phaser-Content-Kit/demos/lesson01.html找到源码.

缩放是指游戏画布如何在不同的屏幕尺寸上进行缩放。我们可以在预加载阶段自动使游戏规模适合任何屏幕尺寸,因此我们不必再担心。

Phaser中scale对象

scalePhaser中有一个特殊的对象可以使用一些方便的方法和属性。更新您现有的preload()功能如下:

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

scaleMode 有几个不同的选项可用于Canvas如何缩放:

  • NO_SCALE —  没有任何缩放。
  • EXACT_FIT — 缩放画布,以垂直和水平方式填充所有可用空间,而不保留纵横比。
  • SHOW_ALL缩放画布,但保持纵横比不变,所以图像不会像以前的模式一样倾斜。屏幕边缘可能会出现黑色条纹,但是我们可以与之同住。
  • RESIZE创建与可用宽度和高度相同大小的画布,因此您必须将对象动态放置在游戏中; 这更是一种高级模式。
  • USER_SCALE允许您自定义动态缩放,自己计算大小,比例和比例; 再次,这更是一种先进的模式

功能中的其他两行代码preload()负责水平和垂直对齐画布元素,因此它始终以屏幕为中心,无论大小如何。

添加自定义画布背景颜色

我们还可以在画布上添加自定义背景颜色,因此不会保持黑色。stage对象具有backgroundColor此目的属性,我们可以使用CSS颜色定义语法进行设置。在以前添加的其他三个添加以下行:

game.stage.backgroundColor = '#eee';

比较你的代码

您可以在下面的现场演示中查看本课程的完成代码,并使用它来更好地了解它的工作原理:

下一步

现在我们设置了我们游戏的缩放比例,让我们继续第三课,并设计出如何加载资源并将其打印在屏幕上

文档标签和贡献者

 此页面的贡献者: j787701730
 最后编辑者: j787701730,