Загрузка ресурсов
Давайте загрузим необходимые для нашей игры ресурсы. Для этого размещаем методы загрузки ресурсов внутри функции сцены preload. Phaser будет автоматически искать эту функцию при запуске и загружать все, что в ней определено.
В настоящее время функция preload пуста. Перепишем ее:
function preload ()
{
this.load.image('sky', 'assets/sky.png');
this.load.image('ground', 'assets/platform.png');
this.load.image('star', 'assets/star.png');
this.load.image('bomb', 'assets/bomb.png');
this.load.spritesheet('dude',
'assets/dude.png',
{ frameWidth: 32, frameHeight: 48 }
);
}Вот как мы загружаем 5 ресурсов: четыре изображения и один спрайт. Обратите внимание на первый параметр («sky», «bomb») - это ключ ресурса. Эта строка является ссылкой на загруженный ресурс и используется в коде при создании игровых объектов. Выбор имени для ключа зависит от вас, вы можете использовать любую допустимую строку JavaScript.
Отображение фона
Для отображения одного из загруженных нами изображений поместите в функцию create следующий код:
this.add.image(400, 300, 'sky');Результат можно увидеть в файле part3.html. Если вы загрузите его в браузер, вы увидите игровой экран с фоном голубого неба:
Значения 400 и 300 являются координатами x и y изображения. Но откуда взялись числа 400 и 300? Это потому, что по умолчанию в Phaser 3 координаты всех игровых объектов задаются их центром. Фоновое изображение имеет размер 800 x 600 пикселей, поэтому если бы мы отображали его по координатам ( 0 ; 0 ), то мы бы увидели только правый нижний угол. Однако, если вы поместите центр фона по координатам ( 400 ; 300 ) мы увидим его целиком.
Совет. Если этот способ размещения вам не подходит, измените его с помощью метода setOrigin. Например, код: this.add.image(0, 0, 'sky').setOrigin(0, 0) устанавливает положение рендеринга изображения в его верхнем левом углу. В Phaser 2 это было достигнуто с помощью свойства anchor , но Phaser 3 использует свойства originX и originY.
Порядок отображения игровых объектов совпадает с порядком их создания. Поэтому, если вы, например, захотите разместить спрайт со звездой над фоном, вам нужно убедиться, что он был добавлен в качестве второго изображения после изображения неба:
function create ()
{
this.add.image(400, 300, 'sky');
this.add.image(400, 300, 'star');
}Если вы добавите вначале изображение star, то небо перекроет звезду.