Реагирование на нажатие кнопки

  Нажатие кнопки можно рассматривать как  событие, которое происходит для первого кадра, когда игрок нажал на клавишу. Поскольку эти события являются особыми, которые повторяются только когда пользователь запустит их снова, они обычно используются для сути видео игры. Отличные примеры действий в играх, вызванных нажатиям клавиш - это прыжки, различные удары, открывание дверей.

  Объекты клавиш Phaser имеют сигналы, которые будут срабатывать при нажатии клавиш.

function create() {
this.kickKey = game.input.keyboard.
addKey(Phaser.Keyboard.SPACEBAR);
this.kickKey.onDown.add(doKick, this);}
}
function doKick() {
//эта функция будет вызвана, когда будет нажат пробел
}

  Если вы предпочитаете хранить управление всеми вашими событиями клавиш внутри функции обновления, также возможна проверка того, была ли клавиша нажата только что в похожем формате, как и проверка нажатия. Клавиши должны быть заданы в функции создания и затем проверены внутри функции обновления.

function create() {
this.kickKey = game.input.keyboard.
addKey(Phaser.Keyboard.SPACEBAR);
}
function update() {
if (this.kickKey.justPressed(250))
{
//удар!
}
}

   Отпускание клавиши - более редкое используемое состояние, но также используется. Например для выстрела, который можно заряжать или шкала в гольфе, которая будет вынуждать игрока держать клавишу, пока не придет время ее отпустить, все это великолепные примеры события отпускания клавиши. Цена времени придаст этим действиям больше чувства власти игроку и может подчеркнуть важность тайминга и терпения, вместо беспорядочных нажатий клавиши.

Проверка нажатия кнопки в данный момент

  Проверка для обычного нажатия кнопки полезна для игр, в которых постоянные нажатия кнопки жизненно необходимы, например в шутерах, где постоянно летят пули, или гоночная игра, где всегда нажат газ. Код для проверки нажатия кнопки всегда должен быть внутри цикла обновления.

if(game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
{
//газ, стрельба, и все остальное, что требует постоянного нажатия
}

  Phaser абстрагируется от событий клавиатуры браузера, поэтому разработчикам не нужно обрабатывать скорость повторения клавиши, встроенную в операционную систему. По умолчанию, когда клавиша будет нажата в первый раз, браузер определит, что клавиша была нажата, а затем отпущена на некоторое время, прежде чем она будет снова быстро нажатой, до тех пор пока палец окончательно не будет поднят. Вы можете протестировать скорость повторения вашей клавиатуры, откройте текстовый документ и зажмите клавишу. Обратите внимание, что есть момент когда ваш палец жмет клавишу, новые символы не добавляются. Этот кратковременный "подъем" - это задержка, встроенная в операционную систему, и нет возможности отключить ее с помощью API JavaScript. Вместо этого игровой движок создает систему, которая прослушивает только физические нажатия отпускания, храня состояние клавиши для разработчика, чтобы использовать его в игре без паузы повторения.

Ввод

  Без ввода в игру не было бы так весело играть. Игрок не смог бы повлиять на то, что происходит в игре, и это бы потеряло ключевую особенность интерактивности, что делает игры такими увлекательными. Phaser поддерживает широкий список различных видов ввода, и если вам нужно больше, есть хорошие JavaScript библиотеки, которые могут помочь. Три типа ввода ввода, которые поддерживает Phaser: клавиатура, указатели (щелчки мышью и касания экрана) и геймпад (например контроллер XBOX).

Клавиатура

  Клавиатура - это наиболее простой тип ввода, который может иметь игра на HTML5. Его легко осуществить и каждый, кто пользуется обычным веб браузером настольного или портативного компьютера, имеет доступ к клавиатуре. Использование клавиатуры не позволит играть в вашу игру на мобильных устройствах, потому то в этом случае доступ к клавиатуре почти невозможен.

  Клавиша на клавиатуре может быть нажата и опущена, однако многие разработчики игр также хотят знать момент, в который клавиша была нажата или отпущена.

Спрайты тайлов

  Спрайтами сложно управлять, если вам нужен бесконечно движущийся и повторяющийся задний фон. Обычно решением проблемы будет создать ряд спрайтов и двигать их всех с одинаковой скоростью, якобы задний фон "движется". Как только один из этих спрайтов выходит за экран и больше не виден игроку, он перемещается на другую строну экрана (вне поля зрения), готовый двигаться внутрь экрана и появиться опять. Движение этих частей заднего фона от одного края экрана к другому дает иллюзию бесконечной прокрутки.

  Спрайты тайлов - это встроенные объекты, которые управляют созданием всех меньших спрайтов и их перестановкой. При создании спрайта тайла, первые два аргумента это позиция, а последний аргумент - ключ ресурса изображений, так же как в случае обычного листа спрайтов. Средние два аргумента это ширина и высота спрайта, которые составляют площадь, которую займет спрайт и внутри которой он будет двигаться.

game.add.tileSprite(0, 0, 500, 500, ‘wasteland’);

  Из-за того, что спрайт тайла это все еще спрайт, свойства x и y будут менять позицию спрайта в мировом пространстве. Для того, чтобы двигать позицию заднего фона спрайта тайла, нужно изменить значения x и y его свойства tilePosition. Например, этот кусок кода, помещенный в состояние Phaser, заставит задний фон спрайта тайла двигаться бесконечно влево.

function update() {
gameBackground.tilePosition.x − = 5;
}

Загрузка атласов

  Для загрузки атласа, нужно указать Phaser на изображение и файл данных, описывающий кадры внутри изображения. Есть несколько различных форматов данных атласа, которые поддерживает Phaser, но мы будем иметь дело только с JSON вариантом хеша. Для справки, вот текущие поддерживаемые варианты хешей, которые использует Phaser. Примите к сведению, что имена функций разные, но формат вызова функций всегда одинаковый. Каждая загрузка атласа требует ключ для атласа, путь к изображению и путь к данным атласа.

  Первый формат - это атлас Старлинг, обычно используемый в связке с  платформой Adobe Flash и экспортируется из Flash Professional, инструмента для анимации. 

game.load.atlasXML(‘penguins’,
‘assets/sprites/penguins.png’,
‘assets/sprites/penguins.xml’
);

  Более частый формат экспорта для последних игр - это JSON, отчасти потому что этот формат используется в JavaScript по всему миру. Phaser может загружать JSON атласы как массивы или как хэши. Массив атласа будет содержать разные кадры, перечисленные через номера массива (0, 1, 2, 3, и так далее). Вариант хеша атласа будет содержать кадры, перечисленные именами строк разных изображений из хеша ("красное_яблоко", "голубой_кенгуру", "буйвол"). В целом, если есть выбор, лучше экспортировать и загружать атлас как массив, если вы планируете использовать его для анимации, и загружать атлас как хэш, если вы собираетесь использовать его для отдельных изображений.
  Для загрузки как JSON массив, используйте метод atlasJSONArray.

game.load. atlasJSONArray(‘penguins’,
‘assets/sprites/penguins.png’,
‘assets/sprites/penguins.json’
);

  В другом случае, если атлас должен быть сохранен как хэш, используйте метод atlasJSONHash.

game.load.atlasJSONHash(‘penguins’,
‘assets/sprites/penguins.png’,
‘assets/sprites/penguins.json’
);

Атласы текстур

  Атласы текстур - это еще один подход к расположению нескольких разных кадров анимации (или даже разных изображений вместе) в одно большое изображение. Главное различие от листов спрайтов - это то, что эти изображения могут быть разной ширины и высоты и могут быть выложены таким образом, чтобы сэкономить пространство между изображениями.

  Из-за того, что размеры изображений в атласе не стандартной ширины и высоты, размер содержится во втором файле данных, описывающий кадры, которые присутствуют на изображении и как извлечь данные кадра из изображения. Кадры обычно описываются через верхний левый угол и его ширины и высоты. После загрузки возможно использовать атласы текстур и как кадры анимации, и как статичные изображения. Любой из этих подходов помогает уменьшить размер и число изображений, необходимых для загрузки в конечную игру.

Прикрепление к камере

  По умолчанию, когда спрайт добавляется в игру, он добавляется в игровой мир сам по себе. Если движется игровая камера, спрайт будет двигаться так как если он помещен внутрь мира. Это значит что достаточно большое передвижение камеры повлечет за собой то, что спрайт больше не будет виден на экране. Это замечательно для большинства объектов, но это не совсем предпочтительно для объектов пользовательского интерфейса, которые не должны прокручиваться, когда движется камера.

  В случае таких объектов интерфейса, как полоска здоровья, текст, счетчик энергии, решением будет крепление их к движению камеры.

someSprite.fixedToCamera = true;

Воспроизведение анимации

  После того, как анимация была добавлена к спрайту, появляется возможность проиграть анимацию через метод проигрывания. При вызове метода нужно указать имя анимации, частоту кадров и определить, будет ли анимация цикличной (возвращаться к началу и проигрываться снова после завершения) или одноразовой (проиграться раз и затем остановиться). Частота кадров указывается в кадрах в секунду, так что чем больше число, тем быстрее скорость анимации.

  Эта строка проиграет анимацию с именем idle на скорости 10 кадров в секунду (что довольно быстро для анимации). Аргумент true в конце заставит ее зацикливаться, предполагая что эта анимация бездействия персонажа является небольшим отрывком того, как он дышит, и спрайт будет дышать вечно, до тех пор, пока не запустится другая анимация.

spriteName.animations.play(‘idle’, 10, true);

Указание кадров анимации спрайта

  Добавление анимации выполняется через свойство анимации спрайта. Можно добавить анимацию как с участием всех кадров, так и с участием только указанных. При каждой из следующих строк кода, новая анимация будет добавлена к спрайту под именем, указанным в первом аргументе ("idle" и "jump"). Также, как в случае ключей, используемых в кэше ресурсов, эти имена будут важны позже для воспроизведения анимации.

  Для того, чтобы добавить анимацию, которая содержит каждый кадр загружаемого листа спрайта, добавьте анимацию только с именем и без других аргументов.

spriteName.animations.add(‘idle’);

  Чаще всего, добавляются указанные кадры для анимации. Это осуществляется с помощью передачи массива кадров, которые составляют анимацию в качестве второго аргумента:

spriteName.animations.add(‘jump’, [0,2,4,5]);

Загрузка листа спрайта

  Как только у вас есть лист спрайта, выложенный в нужном формате, команде загрузки Phaser нужно знать знать ширину и высоту кадра спрайта. Если изображение содержит больше пробелов, чем у фактического содержимого спрайта, последний аргумент может указать, сколько кадров нужно загрузить в сумме.

  Эта загрузка создаст спрайт с именем Marella, каждый кадр анимации которого задан иметь размер 16 x 32 пикселей, с 12 кадрами анимации.

game.load.spritesheet(‘Marella’, ‘assets/sprites/Marella.png’, 16, 32, 12);

Макет листа спрайта

  Спрайты в Phaser имеют параметры ширины и высоты. По умолчанию Phaser создаст кадры из каждого прямоугольника, чьи ширина и высота могут поместиться в изображение, начиная с левого верхнего угла, и добавляя столько спрайтов по горизонтали, сколько получится. Если происходит касание правого края листа спрайта и внизу есть достаточно места для добавления еще одного ряда кадров, произойдет возврат к левой границе и начнется новый ряд кадров, пока не останется места как по вертикали, так и по горизонтали.

Листы спрайтов

  Листы спрайтов - это способ для анимирования спрайта. Каждый кадр анимации должен быть выложен в изображение а затем загружен. Затем эти кадры анимации будут использованы в раскадровке анимации, которую вам нужно будет сделать для каждого спрайта. Phaser предполагает, что различные кадры анимации спрайта выложены в горизонтальном формате, и каждый кадр имеет одинаковые высоту и ширину. Такие традиционные листы спрайтов  можно запросто найти в интернете или довольно легко сделать самому.

Загрузка и использование статичных спрайтов

  Процесс загрузки статичного неанимировнанного спрайта такой же, как и для изображения.

game.load.image(‘ducky’, ‘assets/sprites/ducky.png’);

  Однако при добавлении картинки в игру, надо добавить ее как спрайт. Это добавит спрайт с указанными координатами, но в отличие от изображения, спрайты могут быть добавлены к физической системе.

var sprite = game.add.sprite(20, 10, “ducky”);

Спрайты

  Спрайты - это основной способ засунуть "картинки" в "видео игру" с помощью добавления (обычно анимированой) графики в игровой мир. Она может быть статичным изображением, как раннее упомянутый тип графики, но также она может быть дополнительно анимирована и добавлена к физической системе. Возможно загрузить ресурсы графики в Phaser в качестве статичных изображений, листов спрайтов или атласов спрайтов. Каждый из них имеет свои виды использования и лучшие практики.

  При сохранении спрайтов для использования в Phaser, важно сохранять их как png или gif изображения. Оба этих формата называются форматом без потерь, что означает что при сохранении изображений не теряются ни какие данные. Потеря данных изображения часто ведет за собой размытые картинки или пиксели, которые не совсем соответствуют оригинальному изображению.

  Также важно, что оба этих формата имеют альфа (или прозрачный) канал, который позволяет спрайтам не быть полностью квадратными. При сохранении изображения, всегда убедитесь что также экспортируется прозрачность. Дополнительным преимуществом сохранения в формате png является то, то пиксели спрайта могут иметь частичную прозрачность, что может быть использовано для эффекта тонированных окон или очков.

Изображения

  Графика - это основа большинства игр, и наиболее простой способ использовать графику в игре - способ через изображение. В Phaser изображения - это статичные визуальные данные, которые не могут иметь кадры анимации, но их можно двигать на экране и вращать.

Загрузка изображения

  Загрузка изображения не может быть проще. Все, то нужно - это предоставить путь к файлу изображения (предпочтительно к одному из основных файлов в веб: GIF, PNG или JPG) и указать ключ  изображения для доступа к нему позднее. Эта часть кода загружается изображение утки, которую можно создать помощью ключа "ducky" через game.add.sprite или game.add.image.

game.load.image(‘ducky’, ‘assets/sprites/ducky.png’);

Добавление изображения в игру

  Первый способ добавить изображение в игру - это способ через тип изображения Phaser. Это голый файл изображения. Хотя оно может делать все, что ожидается от изображения, как например преобразование его размера и получения ввода, оно не может быть анимировано или быть физическим телом. Это просто изображение. Когда добавляется изображение, в начале указывается его позиция на экране, затем его ключ ресурса для отображения его как спрайта.

game.add.image(20, 10, “ducky”);

Фаза предварительной загрузки

  Обратите внимание, что в ранее упомянутом примере кода загрузка изображения начиналась в функции с именем "preload". Вся загрузка ресурсов должна находиться внутри этой функции, и будет хорошей практикой держать код загрузки блоком близко друг к другу, чтобы вы могли легко ссылаться на разные ключи ваших игровых ресурсов, когда позже будете их загружать из кеша.

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

Отображение прогресса загрузки

  Из-за того, что ресурсы для игры часто могут быть довольно большими и может потребоваться немного времени для их загрузки, важно дать игроку обратную связь о статусе времени загрузки, пока они ждут. Не смотря на то, то это не будет держать каждого рядом, но если игрок знает, что система все еще работает и загрузка скоро завершится, скорее всего он будет ждать в подготовительное время. Обратная связь обычно осуществляется с помощью графика, который увеличивается от невидимых 0% до 100%, показывая  проценты загруженной графики (чаще называется "полоса загрузки", потому что обычно длинная фигура в виде полоски).

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

this.load.setPreloadSprite(someBarlikeImage);

  При работе этим способом, нужно знать одно: когда все ресурсы загружены в игру, полоса загрузки может быть удалена из перечня отображения или можно переключить текущее состояние на состояние игры. Класс загрузчика имеет набор сигналов (будут обсуждены позже), которые будут посылаться  во время различных этапов загрузки, включая начало загрузки, каждый момент когда еще загружены данные и завершение загрузки. Следующий код использует сигнал onLoadComplete чтобы запустить функцию с названием "onLoadComplete", когда загрузка завершена. Функция "onLoadComplete" сможет сделать все что необходимо для настройки игры, обычно с помощью переключения в новое состояние игры, которое будет использовать все ресурсы, которые к тому моменту будут готовы для использования.

this.load.onLoadComplete.addOnce(this.onLoadComplete, this);
this.load.start();

  Последняя строка load.start() должна быть включена, если вы планируете использовать события загрузки. Эта строка говорит фреймворку Phaser, что загрузка началась и дальше будут передаваться другие сигналы по мере загрузки.

Кэш ресурсов

  Во время загрузки, важно заметить, что первый аргумент является строковым именем. Этот аргумент - ключ ресурса и должен быть уникальным. Когда Phaser заканчивает загрузку ресурса, он поместит его в кэш ресурсов с той строкой в качестве ключа для доступа к нему. Кэш ресурсов будет хранить все объекты, загруженные в Phaser на протяжении всей жизни игры и будет сохраняться на протяжении всей игровой сессии, так то изменение состояний или сброс игры не удалит все ресурсы из кэша. Позже, когда понадобится какой-то ресурс, указанный ключ нужно будет предоставить методу создания игрового объекта (технически фабрике объектов), чтобы он мог корректно найден. В следующем примере кода, обратите внимание, что ключ (в данном случае "cat") для загруженного изображения и имя отображаемого спрайта одинаковы.

function preload() {
game.load.image(‘cat’, ‘img/cat.png’);
}
function create() {
game.add.sprite( 0, 0, “cat”);
}

Загрузка и кэш ресурсов

  Когда Phaser запускается из веб-страницы, он не имеет никаких ресурсов, которые нужны для запуска игры. Все изображения, звуки, файлы карт, описание физики или другие разные файлы, необходимые для игры должны быть загружены в движок до того, как геймплей сможет начаться. У Phaser есть мощный движок загрузки, который позволяет разработчику загрузить несколько разных ресурсов и дать игре доступ к этим ресурсам позже через кэш ресурсов.

  Технически ресурсы могут быть загружены в любой момент во время игры, хотя имеет больший смысл загружать их во время фазы предварительной загрузки, до того как начнется сама игра. Есть несколько примеров когда может быть приемлемо нарушить загрузку для всей игры, особенно если в игре есть ряд тяжелых ресурсов для уровней и когда приемлемо небольшое время загрузки между каждым уровнем (когда сами уровни обеспечивают приличное время геймплея).

Камера

  Если игровой мир больше чем окно, смотрящее в него, Phaser должен знать с какой позиции мира ему нужно отрисовывать объекты в текущий момент. Этот объект называется камера (термин, заимствованный из 3D игровых движков, где камера была умела делать вещи, более свойственные настоящей). Камера в Phaser имеет x и y позиции в мировом пространстве, которые можно сдвинуть вручную чтобы посмотреть на графику на уровне.

  Вместо изменения позиции камеры вручную, часто камере дается объект игрового мира, за которым она следит автоматически, используя следящий метод камеры. По умолчанию, камера, следящая за объектом, отражает изменения x и y этого объекта. Сдвиг на 5 пикселей влево целевого объекта будет означать сдвиг на 5 пикслей влево для камеры, что позволит игроку увидеть больше мира в левую сторону.

  Коэффициент перемещения один-к-одному может стать довольно скачущим, двигая все вокруг на экране, даже если игрок сделал крошечное движение. Шанс на небольшую морскую болезнь, которая будет для игрока пинком, может быть очень высоким из-за всех этих маленьких движений. Чтобы уменьшить количество времени, которое камера будет проводить в движении (и сделать сами движения менее дерганными) есть другой вид слежения, который сделает камеру немного менее резкой и работает более натурально. Имеются три стиля слежения (сверху вниз, сверху вниз тесный и платформер), и они работают с помощью определения "мертвой зоны" или части экрана, движение внутри которой не вызовет движение камеры, пока игрок не пересечет границу мертвой зоны. Из-за того, что движение внутри мертвой зоны не двигает камеру, это сохраняет вид мира устойчивым на более долгий период и дает игроку некоторое пространство где он может обследовать без того, чтобы камера следила за его каждым маленьким шагом.

Мир

  Игровой мир - это пространство, где обитают все игровые объекты. Объекты существуют в мире, который имеет ширину и высоту. которые изначально заданы чтобы отразить видимую часть окна в игру. Если игровые объекты выйдут за границы размера мира, игра перестанет обрабатывать их и могут произойти некоторые довольно странные баги, так что лучше убедиться в том, что мир имеет размер, достаточно большой для вашей игры. Если размер игры установлен как 800 на 600 пикселей, тогда и мир будет размером 800 на 600 единиц, и объекты смогу свободно перемещаться в этом пространстве.

  Мир не должен быть просто размером экрана. Представьте игру про Марио, в которой весь уровень был бы виден в тот момент, как он загрузился. Помимо обычной реакции "но это просто Донки Конг", это так же была бы довольно скучная игра про Марио. Вместо этого, уровень в Марио ("мир") простирается далеко вправо. Для многих игр, размер уровня нужно изменить, чтобы он соответствовал фактическому миру вашей игры, только некоторый из которых будет виден игроку в любой заданный момент игры. 

  Если потребуется мир побольше. нужно вызвать два метода для изменения размеров пространства игрового мира. Эти два метода - setBounds и resize. Resize увеличит ширину и высоту игры, но не в отрицательном направлении (вверх и влево). Команда setBounds похожа: однако, она позволит игре (камере, физике, и таким образом игровым объектам) продвинуться в обратном  направлении.

Перечень отображения

  Когда дело доходит до любого игрового движка, отличным началом будет понимание того, как графика отрисовывается на экран. Phaser (и большинство 2D графический систем) подходит к решению проблемы рисования графики на экран используя метод, который называют "перечень отображения". В сущности, перечень отображения - это массив объектов, которые должны быть отрисованы на экране. Для того, чтобы показать обновленные местоположения и графику, экран очищается каждый кадр (обычно около 30 раз в секунду) и графика в перечне отображения рисуется в видимую часть экрана после очистки данных кадра.

  Порядок, в котором рисуется графика в перечне отображения, основывается на ее позиции в массиве перечня отображения. Графика около начала массива рисуется первой (так, графика с индексом 0 будет расположена дальше всего, что прекрасно для задних фонов) и последняя графика в массиве будет отрисована сверху остальной. Если два объекта в перечне отображения визуально пересекут друг друга, тот, что будет находиться выше в перечне появится "сверху" другого объекта. Phaser имеет основной перечень отображения, встроенный в основу игры.

  Порядок, в котором графика будет добавлена в перечень отображения, влияет на ее позицию в опорном массиве. Каждый раз, когда вы видите вызов методов game.add.sprite или game.add.group, это добавляет новый объект в конец перечня отображения, располагая его сверху остальной графики в перечне. Если что-то должно располагаться около задней части игры (как задний фон игры), тогда это должно добавляться первым пунктом в вашу игру перед всей остальной графикой.

  Для того, чтобы сделать вещи более сложными, многие из объектов в Phaser могут иметь их собственный перечень отображения. Когда Phaser сталкивает группу объектов или объект со вспомогательным перечнем отображения, он отрисует все объекты в том вспомогательном перечне отображения в том же же порядке (от первого к последнему). Перечень отображения отрисует все объекты в этой группе до того, как перейдет к следующей графике. Результатом будет своего рода структура ветвления для перечня с множеством объектов, хранящих составную графику, и перечень их собственной, которая отрисовывается для их части алгоритма перечня отбражения.

Поток состояния Phaser

  Когда создано новое состояние Phaser, либо при переходе от одного к другому, либо в качестве первого и единственного состояния в игре (как в простом примере ниже), состояние выполнит инициализацию, предварительную загрузку и создаст методы перед тем как цикл обновления начнет работать. В случае обновления или предварительной загрузки, состояние по сути выполняет две функции чтобы завершить те части потока состояния.

  

  Для начала, состояние запустит его метод инициализации. Этот метод может пригодиться если нужно выполнить некую настройку до того, как начнутся обрабатываться другие части состояния. Следующая функция, предварительная загрузка, используется для загрузки ресурсов, которые могут будут нужны этому и следующему состоянию. Из за того, что предварительная загрузка может занять некоторое время, Phaser запускает простой игровой цикл пока загружаются ресурсы, давая разработчику доступ к функциям обновления загрузки и отрисовки загрузки для того, чтобы обновлять прогресс загрузки (обычно через использование полосы загрузки или отображения процента загруженных ресурсов). Как только завершена загрузка, выполняется метод создания, давая разработчику возможность инициализировать и настроить сцену игры для геймплея.
  Суть состояния Phaser входит в его реализацию игрового цикла. Есть два метода, которые вызываются во время работы  игрового цикла: обновление и отрисовка. Метод обновления запускается первым и это метод где реализуется большая часть геймплея. Метод отрисовки, вопреки смыслу названия, фактически запускается после того, как игра отрисовала все видимые объекты. Это может быть использовано для любых эффектов постобработки, например размытие или цветовая коррекция.
  Последняя часть потока состояния Phaser - это метод завершения. Он вызывается до того, как текущий объект состояния уничтожается и новый занимает его место в переходе состояния. Метод завершения полезен для сохранения данных, которые должны передаваться от одного состояния к другому или для обработка любых сложных уничтожений, которые должны произойти до того, как состояние может быть успешно забыто.