Вместо того, чтобы добавлять дополнительный код в этот пример, давайте перейдем ко второму примеру в этой главе. Пожалуйста, откройте содержимое папки chapter-2/example-2-scene-with-update/
или здесь в вашем любимом редакторе. Содержимое этого нового примера почти такое же, как и в предыдущем, мы меняем только код для сцены. В частности, мы изменим код для create
и добавим код для update
. Начнем с нового кода для create
:
create: function () {
this.helloText = this.add.bitmapText(400, 300, "arcade", "Hello Phaser").setOrigin(0.5);
}
Изменение в этом коде состоит в том, что вместо простого добавления bitmapText
в центр экрана мы присваиваем полученное значение свойству this.helloText
. Поскольку и create
, и update
принадлежат одному и тому же объекту, мы можем использовать this.*
для передачи игровых объектов между различными функциями жизненного цикла.
Как видно на рис. 2-2 функция update
вызывает себя снова и снова и является сердцем вашего игрового цикла. Наша цель в этом примере — заставить наш текст «Hello Phaser» перемещаться в правую часть экрана, исчезать, а затем снова появляться с левой стороны, как на экранах с бегущей лентой.
update: function() {
this.helloText.x += 10
if (this.helloText.x > 1000) {
this.helloText.x = -200
}
}
Мы можем получить доступ к объекту bitmapText
, добавленному на сцену в методе create
, используя ссылку this.helloText
. Игровые объекты имеют множество полезных методов и свойств, которые мы будем в дальнейшем объяснять, но в этом примере нас интересует только координата x
объекта. В каждой итерации цикла update
мы смещаем положение объекта по оси x на 10 пикселей. Если мы больше ничего не сделаем, то текст исчезнет справа и больше не вернется. Чтобы избежать этого и дать эффект бегущей строки, есть условие if
, в котором проверяется не находится ли текст за кадром (помните, что ширина холста составляет всего 800 пикселей, поэтому, если позиция текста по оси X больше 1000, текст находится за правой стороной холста). Если это так, то текст перемещается перед левой стороной экрана, используя отрицательную велисину координаты x.
Загрузка этой демонстрации с использованием веб-сервера из этой папки запустит пример, и вы сможете увидеть эффект тикерной ленты. Рисунок 2-5. Бегущая лента
Этот пример содержит все методы жизненного цикла, которые мы собираемся использовать для реализации игры Nano Dungeon. Тем не менее, если мы внимательно рассмотрим, используя процессы, описанные на рисунке 2-1, то можно увидеть, что мы выполняем только два из трех шагов, показанных там: мы моделируем мир, а затем рисуем следующий кадр, но ни в этом, ни в предыдущем примере нет пользовательского ввода. Прежде чем эта глава закончится, нам нужно добавить пользовательский ввод, чтобы у нас был полный интерактивный игровой цикл.
Откройте в редакторе chapter-2/example-3-interactive-gameloop/
или здесь. Опять же, есть изменения как для метода update
, так и для метода create
.
В create
мы добавляем новое свойство cursors
к объекту, в котором мы могли проверять состояние клавиш в функции update
. Наша цель позволить пользователю перемещать текст с помощью клавиш курсора. Для этого мы воспользуемся функцией createCursorKeys(), удобной функцией, возвращающей объект, который будет отражать состояние четырех клавиш со стрелками на клавиатуре компьютера:
create: function () {
this.helloText = this.add.bitmapText(400, 300, "arcade", "Hello Phaser").setOrigin(0.5);
this.cursors = this.input.keyboard.createCursorKeys();
}
В update
мы собираемся последовательно проверять каждую из клавиш управления курсором и изменить положение текста в зависимости от того, какая клавиша нажата:
update: function () {
if (this.cursors.left.isDown) {
this.helloText.x -= 10;
}
if (this.cursors.right.isDown) {
this.helloText.x += 10;
}
if (this.cursors.up.isDown) {
this.helloText.y -= 10;
}
if (this.cursors.down.isDown) {
this.helloText.y += 10;
}
}
Для каждой нажатой клавиши мы добавляем или вычитаем 10 пикселей из положения текста, чтобы переместить его в направлении нажатой клавиши. Запустите этот пример, и вы сможете контролировать положение текста с помощью клавиш со стрелками на клавиатуре компьютера.
Можете ли вы смешать пример с тикерной лентой и пример с интерактивным игровым циклом, чтобы, если игрок перемещал текст за пределы экрана, он снова появляется с другой стороны?
В этой главе мы рассмотрели много вопросов. Ключевые выводы, которые вам нужно сделать, прежде чем мы продолжим:
preload
, create
и update
.В следующей главе мы начнем кодировать рогалик и к ее окончанию вместо простого «Hello Phaser» на экране у нас будет подземелье и персонаж игрока.