В этом уроке мы сделаем загрузку необходимых ресурсов для нашей игры.
Подготовка к работе
Для начала нам нужно создать отдельную ветку для этой игры в нашем стартовом шаблоне ( если у вас его нет его можно скачать здесь ). Находясь в корне нашего проекта создадим новую ветку:
Загрузка ресурсов
Для загрузки всех необходимых для нашей игры мы будем использовать метод жизненного цикла сцены 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. Например:
Этот код сделает так что по умолчанию изображение будет выводится в левом-верхнем углу.
Порядок отображения объектов на холсте зависит от того в каком порядке они были объявлены в коде. Таким образом если вам необходимо чтобы звезды отображались поверх фона, вам нужно сначала объявить в коде фон а затем звезды:
если звезда будет объявлена до фона то она будет отображаться под ним.