Если вы начинаете с этой статьи и только изучаете Phaser, прочтите мою первую статью о первоначальной настройке вашей программы! В противном случае давайте заставим несколько спрайтов двигаться!
Как уже говорилось ранее, настройка игры - это самая важная вещь, которую нужно сделать с нашей программой, как будто мы не можем, значит, у нас не будет игры (конечно); но что на самом деле делает игру? Что ж, уметь играть! Это включает в себя управление вашим спрайтом, будь то ракетка для понга или Марио, вокруг экрана. Это означает движение!
Давайте посмотрим на некоторые из первых способов, с помощью которых мы можем задействовать движение с помощью Phaser. В этой статье будет рассказано, как мы можем заставить объекты перемещаться внутри сцены (враги, окружение, NPC и т. Д.). Это будет происходить в том же JS-файле, в котором мы создали наш исходный код.
Двигаясь по холсту
Хорошо! Мы узнали, как загружать наши активы, так что давайте переместим их. Теперь мы не будем работать просто с анимацией внутри движения (т. Е. С анимацией ходьбы при движении персонажа), но мы можем заставить спрайт физически перемещаться по холсту, что является отличным началом. Итак, где мы разместим этот код?
Вкратце, сначала мы должны определить глобальную переменную как наш спрайт. Таким образом, мы можем ссылаться на него между нашими различными функциями.
ПОМНИТЕ, что глобальные переменные опасны в больших приложениях. Они могут вызвать у вас множество ошибок и неприятностей в процессе разработки. Мы только объявляем это как глобальную переменную для простоты этого небольшого проекта!
Теперь, когда у нас есть определенный спрайт, давайте создадим функцию, которая заставит эту кучу пикселей перемещаться. Я лично собираюсь использовать изображение Psyduck, но вы можете использовать все, что захотите (просто помните, что правила Psyduck, и все по-прежнему будет работать)!
Для начала нам нужно создать функцию обновления в нашей программе Phaser. Это то, что будет извлекать информацию из ранее объявленных как в нашей функции предварительной загрузки, так и в функции создания. Давайте посмотрим, как выглядит этот код, и посмотрим, как все это сочетается.
Давайте разберем это на простые шаги! Если мы посмотрим на каждую из наших отдельных функций, мы сможем понять, насколько это на самом деле просто.
- Первая функция здесь - preload (). Мы узнали об этом ранее в прошлом блоге; это загружает наши активы. В моем случае здесь импортировано изображение Psyduck. Внутри preload () мы вызываем this.load.image (), который является нашей стандартной настройкой для добавления актива, который принимает два аргумента. Теперь наш Psyduck загрузится скоро при запуске программы, и его можно будет использовать и передавать другим функциям! Первый из двух аргументов - это имя актива, к которому мы обращаемся («psyduck»), а второй аргумент - это ссылка на фактическое изображение, чтобы мы могли использовать его с нашим объявленным вызовом psyduck.
- Затем мы добавляем спрайт в наш метод create (). Подобно изображению в функции preload (), create имеет аналогичный синтаксис с заменой только одного слова. На этот раз мы вызываем спрайт this.load. . Примет три аргумента: (x, y, ссылка). X и y - это пиксели размещения нашего спрайта; сообщая программе, куда их положить. Третий, ссылочный аргумент, извлекается из нашего объявленного имени в нашей функции preload (). В этом случае мы извлекаем актив с пометкой "psyduck". Теперь давайте сохраним это творение в переменной!
- В-третьих, у нас есть функция update (), которая будет вводиться пользователем и сообщать спрайту, что делать. Теперь мы вызываем psyduck.x + = 1. Что это означает? Итак, мы указываем объекту psyduck перемещаться по оси x, отсюда psyduck.x и + = 1. + = 1 - это, как и в JavaScript, способ увеличения суммы на единицу при каждом вызове update ().
Небольшое отступление: метод update () в Phaser имеет два параметра, которые не нужны, если вы хотите, чтобы он оставался по умолчанию, но вы также можете ввести свою собственную информацию, если хотите! Два аргумента, которые может принимать обновление, - это время и дельта. Время - это количество… ну… времени в миллисекундах, которое прошло во время выполнения вашей игры. Дельта - это разница во времени с момента последнего вызова метода update (). Поскольку Phaser пытается приблизиться к вызову метода update () 60 раз за одну секунду, мы можем оставить значение по умолчанию, так как это будет нормально.
Наконец, у нас есть конфиг, о котором мы говорили в предыдущей статье. Поскольку вы знаете, что такое конфигурация, все, что я должен сказать, это добавить в нее функцию update () (как вы можете видеть, она добавляется к вложенному объекту сцены).
Ух ты. Захватывающе. Наш аватар движется.
Но я слышал, вы думаете про себя: «Но, Рутгер, мы не вводили свои собственные данные в спрайт, они просто движутся сами по себе!» Что ж, дальше!
Присоединяйтесь ко мне в нашей следующей статье, чтобы узнать, как пользовательский ввод делает игру ЖИВОЙ !!
