Масштабирование

Это 2-й урок из 16, которые входят в руководство 2D игра на Phaser. Вы можете найти исходный код этого урока на Gamedev-Phaser-Content-Kit/demos/lesson02.html.

Масштабирование отвечает за то, как ваша игра будет выглядеть на экранах разных размеров. Мы можем заставить игру масштабироваться под каждый экран автоматически во время стадии предзагрузки (preload), чтобы нам не пришлось волноваться об этом в будущем.

Масштабирование

В Phaser есть специальный объект scale, которые имеет несколько полезных методов и свойств. Измените вашу функцию preload() так, как показано ниже:

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

scaleMode имеет несколько опций, которые определяют, как <canvas> будет масштабироваться:

  • NO_SCALE — ничего не масштабировать.
  • EXACT_FIT — масштабировать с полным заполнением пустого места вертикально и горизонтально, не соблюдая соотношение (aspect ratio).
  • SHOW_ALL — масштабирует игру, но сохраняет соотношение так, что картинки не будут искажаться, как и при предыдущем значении. Возможно наличие чёрных полос по краям экрана, но мы можем жить с этим.
  • RESIZE — создаёт <canvas> с доступными шириной и высотой так, что вы можете помещать объекты в игру динамически; это расширенный режим (advanced mode).
  • USER_SCALE — позволяет вам делать динамическое масштабирование, подсчёт размеров, масштаб и соотношение самостоятельно; опять же это расширенный режим.

Две другие строчки кода в функции preload() отвечают за вертикальное и горизонтальное выравнивание элемента <canvas>, так что он всегда будет находиться по центру независимо от размера экрана.

Изменение цвета фона

Мы также можем сделать фон нашего элемента <canvas> таким, каким захотим, чтобы он не оставался постоянно чёрным. Объект stage имеет свойство backgroundColor для этого. Мы можем изменить значение, используя синтаксис CSS для цветов. Добавьте эту строку после трёх, недавно добавленных:

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

Сравните свой код

Вы можете сравнить весь код из этого урока со своим и поиграть с ним, чтобы понять, как он работает:

Следующее

Мы научились масштабировать нашу игру, так что давайте перейдём к третьему уроку и узнаем, как загружать ресурсы игры и выводить их.