Phaser: WebGL & Canvas

Игры, написанные на Phaser рендерятся либо при помощи WebGL, либо внутри элемента <canvas />, если WebGL не поддерживается браузером.

Мы не можем использовать CSS для стилизации элементов, поэтому мы должны использовать более низкоуровневый и сложный API.

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

Мы инициализируем игру, вызывая статический метод Game для объекта Phaser:

new Phaser.Game();

Мы должны передать этой функции объектный с набором параметров конфигурации:

new Phaser.Game({});

В этом объекте конфигурации мы можем задать различные свойства.

Первое свойство, про которое хочется сказать, это type, варианты значений для этого свойства следующие:

• Phaser.CANVAS - будет использовать <canvas />
• Phaser.WEBGL - будет использовать WebGL если бразуер не поддерживает, то отпадет
• Phaser.AUTO - попробует использовать WebGL, если бразуер не поддерживает, то будет использовать <canvas />

Элемент canvas, который создает Phaser, будет просто добавлен к документу в момент вызова скрипта, но при желании вы также можете указать родительский контейнер в конфигурации игры.

Свойства width и height задают размер элемента canvas. В данном случае 800 x 600 пикселей. Ваш игровой мир может быть любого размера, который вам нравится, но это разрешение, в котором будет отображаться игра.

new Phaser.Game({
  width: 800,
  height: 600
});

Еще одно свойство, которое мы можем передать, - это цвет фона, который принимает шестнадцатеричное значение, например 0x000000 для черного цвета.

Свойство scene объекта конфигурации будет рассмотрено более подробно в следующей статье, чтобы не пропустить подпишись на мой телеграм канал!