Жизненный цикл игры

Вместо того, чтобы добавлять дополнительный код в этот пример, давайте перейдем ко второму примеру в этой главе. Пожалуйста, откройте содержимое папки 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 пикселей из положения текста, чтобы переместить его в направлении нажатой клавиши. Запустите этот пример, и вы сможете контролировать положение текста с помощью клавиш со стрелками на клавиатуре компьютера.

Упражнение

Можете ли вы смешать пример с тикерной лентой и пример с интерактивным игровым циклом, чтобы, если игрок перемещал текст за пределы экрана, он снова появляется с другой стороны?

Резюме

В этой главе мы рассмотрели много вопросов. Ключевые выводы, которые вам нужно сделать, прежде чем мы продолжим:

  • Концепция игровых циклов и то, что они являются сердцем игры:
  • Жизненный цикл сцены Phaser с методами preload, create и update.

В следующей главе мы начнем кодировать рогалик и к ее окончанию вместо простого «Hello Phaser» на экране у нас будет подземелье и персонаж игрока.