В этой статье рассмотрим отличия между Phaser 2 CE и новым Phaser 3, чтобы облегчить переход на новую версию.
Пожалуй это первая часть описания различий между Phaser 2 и 3. Это не исчерпывающее описание по миграции, но должно помочь облегчить переход или, по крайней мере, должны отпасть вопросы типа «А это куда делось?».
1 — Линейная структура игровых объектов (Flat Display List)
Phaser 2 использовал древовидную display структуру. Был основной корневой display объект, а все остальные были дочерними объектами на нём. У групп были дочернии объекты, каждый из которых мог так же иметь свои дочернии объекты и т.д. В Phaser 3 этого нет. Мы имеем совершенно линейную структуру. Игровые объекты теперь не могут содержать другие объекты, а у групп больше нету параметров позиционирования и взаимодействия с миром. Это вводит следующий параметр…
2 — Установка глубины отображения (setDepth)
Теперь вы можете устанавливать глубину (или можно сказать z-координату) для любого игрового объекта на сцене простым вызовом функции setDepth(), или установкой свойства depth. Обратите внимание, что объекты так же имеют свойство z, это свойство зарезервировано для дальнейшего использования 3D и не будет влиять на изменение глубины отображения (depth) на 2D сцене. Таким образом можно менять значение свойства depth, и от этого будет меняться глубина отображения объекта без корректировки его положения внутри самого списка отображения. Очень полезный нативный инструмент для изометрических игр.
3 — Камеры (Cameras)
В Phaser 3 камеры были полностью переписаны с нуля. В версии 2 они были очень ограничены по функционалу и простой вызов масштабирования мог вызвать какие-то непредсказуемые последствия. В версии 3 же они встроены во всё начиная с самого ядра. Вы можете изменить позицию или размер камеры, изменить zoom, прокрутить, вызвать тряску, вспышки и покачивания. Так же камеры могут следовать за игровыми объектами и содержать свои собственные игнор-листы, позволяющие пропускать рендеринг определённых игровых объектов. Что очень важно, так это то что мы можем иметь несколько камер для одной сцены. Эти камеры могут располагаться рядом или вместе (например вторая камера может показывать миникарту).
4 — scrollFactor
В Phaser 2 функция fixedToCamera избавляла игровые объекты от перемещения когда двигалась камера. В Phaser 3 она была заменена на функцию setScrollFactor. Теперь чтобы объект перестал двигаться вместе с камерой нужно вызвать эту функцию с атрибутом 0, а если вызвать с 1, то он будет двигаться вместе с камеройю И так же можно уставить любое другое значение, например, 0.5 будет двигать объект в половину движений камеры. Согласитесь, очень удобный инструмент для лёгкого создания паралакс-эффекта различных фонов и т.п.
5 — Прощай Pixi
Phaser 3 полностью избавился от ядра движка Pixi, на котором был основан Phaser 2. Теперь разработчики обещают совершенствовать свой движок рендеринга с целью повышения производительности согласно всем основным нуждам структуры Phaser 3.
6 — Anchor / Origin
Свойство anchor было унаследовано из Pixi. В Phaser 3 оно переименовано и теперь, чтобы установить точку смещения текстуры относительно позиции объекта используются свойства originX и originY или метод setOrigin(x, y).
7 — Центр по умолчанию
В Phaser 3 объекты теперь имеют точку отсчёта в центре по умолчанию. Это равносильно anchor(0.5) в Phaser 2. Теперь если вы захотите сделать центральную точку объекта в левом верхнем углу, то вызовите setOrigin(0). Хорошее изменение, т.к. центрировать объекты приходилось намного чаще, чем наоборот.
8 — Flip вместо Scale
В Phaser 2 если вы хотели сделать горизонтальный или вертикальный переворот объекта, вам приходилось устанавливать отрицательный scale, например Sprite.scale.x = -1 для отзеркаливания по горизонтале. В Phaser 3 вам больше не придётся так делать. Теперь вы можете использовать свойства flipX и flipY для отзеркаливания объекта без изменения его масштаба. Отзеркаливание всегда происходит относительно центра объекта независимо от его точки origin.
9 — Pixel Art
В версии 3 вы можете добавить свойство в Game Configuration: pixelArt: true. Это будет сигналом WebGL рендеру для автоматического создания gl текстур с применением линейного фильтра, в общем ваши пиксели будут оставаться всегда чёткими. Это глобальная настройка, поэтому это будет применимо к любой текстуре в игре. Если же вы хотите применить это лишь к выборочным текстурам, то можно вызвать Texture.setFilter.
10 — Scenes заменяют States
В Phaser 2 был State Manager и каждая часть вашей игры, которая находилась в отдельном состоянии (наследник класса State) была изолированной. В Phaser 3 теперь нету понятия состояний. Теперь они называются сценами (Scenes), что более точнее отображает их суть и исключает путаницы с понятием «машина состояний» или Конечными Автоматами, что не редко используется в играх. Сцены можно рассматривать как изолированные «миры». У них есть собственная система камер, список отображения, шаг обновления, система событий, физика и многое другое. Сцена может быть настроена на сон и пробуждение другой сценой, и в отличие от State-ов, Сцены могут работать параллельно, порядок рендера Сцен также можно контролировать. Сцены имеют свою собственную конфигурацию, которая позволяет указывать какие системы должны создаваться вместе со Сценой. Они также имеют так называемую Injection Map, что позволяет вам контролировать, какие свойства будут создаваться в локальных объектах Сцены. На самом деле это весьма обширная тема, чтобы описать всё в этом коротком ознакомительном абзаце, для подробностей я бы советовал смотреть новые примеры на сайте, благо они щас будут появляться всё больше и больше.
В дальнейших статьях я безусловно буду плавно переходить на новую версию, делать сравнительные тесты производительности со второй версией и вероятно начну сам писать d.ts файл для 3-й версии, т.к. официального ещё не появилось.
