Пробуем физику в Phaser

В этой статье мы познакомимся с физическими движками доступными в Phaser-е по умолчанию. Это Arcade, P2JS и Ninja.

Так же в Phaser-е доступен и Box2d, но он доступен только как платное дополнение.

Arcade

Физика Arcade весьма элементарна, в ней возможны только простейшие геометрические фигуры: прямоугольник и окружность. При этом тела не могу вращаться. Поэтому эта физика подходит только для каких-нибудь элементарных физических игр. Достаточно посмотреть пример на оф. сайте.

Ninja

Физика Ninja, была создана во Flash компанией Metanet Software и портирована на js Ричардом (создателем Фейзера).

Как говорит сам Ричи (написано в документации), «библиотека работает хорошо, но она нуждается в серьёзной доработке и оптимизации». Таким образом эту физику не используют, т.к., можно сказать, она технически устарела. Да и скудное кол-во примеров на сайте тоже об этом говорит.

P2JS

А вот физика P2 — то что надо. Можно создавать сложные объекты, настраивать и вращать их и т.д. как в полноценном физическом движке.

Для начала сделаем простейший пример использование этой физики — создание и удаление геометрических примитивов.

Для всех своих проектов я буду брать свой шаблон для HTML5 проекта на Phaser+TypeScript который описан в этой статье. Создаём новый проект на TS, подключаем фейзер или просто берём мой шаблон.

И делам создание объектов по тапу на пустом месте и уничтожение объекта если тапнули на сам объект:

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

Полный код примера вы найдёте на гитхабе.

Основной код находится в классе состояния Game:

Из интересных моментов стоит обратить как надо отображать FPS counter в Phaser-е, для начала надо поставить свойство game.time.advancedTiming в true а затем отображать переменную this.game.time.fps в процедуре render(), т.к. в отличии от update() она вызывается через фиксированные промежутки времени.

Использование Physics Editor для P2

Physics Editor — это очень простая и удобная программа разработанная командой CodeAndWeb (создатели TexturePacker) для создания физики для 2D объектов.

Программа не бесплатная, но стоит не дорого и она того стоит.

Существует готовый экспорт данных для Phaser-а и для многих других движков и фреймворков. Вот официальная документация для Phaser-а: ссылка.

Принцип использования такой — загружаешь текстуры, которые будут использоваться в игре в программу и прям по ним создаёшь физический объект. Далее экспорт и использование в программе.

Вот как загружаются данные:

А вот как применяются на объект:

Легко, просто и удобно. Я приобрёл редактор как раз перед проектом, в котором надо было делать физику не стандартной формы, теперь я не знаю лучшей альтернативы и доволен как слон)

В следующих статьях сделаем какую-нибудь простую игру с физикой)

В комментариях можете писать какую бы вам хотелось.