Разработка игры на phaserjs - 4: загрузка ресурсов⁠⁠

В этом уроке мы сделаем загрузку необходимых ресурсов для нашей игры.

Подготовка к работе

Для начала нам нужно создать отдельную ветку для этой игры в нашем стартовом шаблоне ( если у вас его нет его можно скачать здесь ). Находясь в корне нашего проекта создадим новую ветку:

Загрузка ресурсов

Для загрузки всех необходимых для нашей игры мы будем использовать метод жизненного цикла сцены preload, для этого переходим по пути src/index.ts находим функцию preload:

и заменяем ее содержимое на:

данный код осуществляет загрузку ресурсов необходимых нам для работы: 4 изображения и один спрайт с нашим персонажем. Хотя это может показаться очевидным, я бы хотел обратить ваше внимание на первый аргумент метода this.load.image является ключом ( aliase ) с помощью которого мы можем впоследствии получить доступ к загруженному ресурсу. В качестве ключа можно использовать любую допустимую в JavaScript стоку.

Вывод изображения на холст

Чтобы отобразить одно из загруженных нами изображений, поместите следующий код внутри функции create:

напоминаю что текущий код разрабатывается в ветке platformer-step-1.

Значения 400 и 300 это координаты изображения по оси X и Y. Почему 400 и 300? Так происходит потому что по умолчанию Phaser все объекты размещает по по центру холста. Так как размер нашего изображения 800x600, то если мы разместим его по центру ( координаты 0 x 0 ), мы не увидим нижнего-правого угла. Если в качестве оси X и Y мы укажем 400 и 300 мы сможем увидеть все изображение полностью.

Подсказка: для того чтобы изменить это поведение вы можете воспользоватся setOrigin. Например:

Этот код сделает так что по умолчанию изображение будет выводится в левом-верхнем углу.

Порядок отображения объектов на холсте зависит от того в каком порядке они были объявлены в коде. Таким образом если вам необходимо чтобы звезды отображались поверх фона, вам нужно сначала объявить в коде фон а затем звезды:

если звезда будет объявлена до фона то она будет отображаться под ним.