Keolot Phaser Editor 2D

Визуальная среда разработки 2D-игр на открытом исходном коде Phaser JS

Keolot Phaser Editor — бесплатная среда визуальной разработки браузерных 2D-игр на движке Phaser с открытым исходным кодом и интегрированной физикой Matter JS. Приложение обладает встроенной возможностью визуального создания и редактирования сцен, игровых объектов, анимации, аудио и клавиш, а также написания игровой логики на Javascript с возможностью подключения плагинов и глобальных скриптов. Благодаря визуальному представлению процесс создания игрового дизайна значительно упрощается по сравнению с прямой работой с библиотекой Phaser без визуального представления.

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

- Изображение

- Текст

- Спрайт

- Частицы

- Видео

- Прямоугольник

- TileSprite

Помимо режима интерактивного редактора, доступны также два режима предварительного просмотра игры:

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

2) Предварительный просмотр игры. Запуск игры без возможности осмотра объектов и приостановки воспроизведения.

Предусмотрена консоль для отладки и просмотра ошибок.

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

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

Среда разработки поддерживает визуальное создание следующих предустановленных ресурсов:

- Изображения (растровые изображения JPG, PNG, WEBP, AVIF, GIF, SVG)

- SVG (векторные изображения)

- Аудио (MP3, WAV, OGG, M4A)

- Шрифты (TTF, OTF)

- Видео (MP4, WEBM)

- Спрайт-таблица

- Атлас

- Анимация

- Растровый шрифт

- JSON

- TXT

- XML

- GLSL

- TilemapTiledJSON

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

- Init()

- Preload()

- Create()

- Update(time, delta)

Вы также можете добавить пользовательский скрипт для сцены, например, с вашими собственными функциями. Он будет добавлен в код игры перед Init. Если вы пропишете какую-либо из функций Init, Preload, Create, Update в Custom, она будет проигнорирована, так как для этого есть специализированные разделы.

В текстовом редакторе с подсветкой синтаксиса можно редактировать как скрипты (JS, TS), так и текстовые файлы (JSON, TXT). Текстовый редактор поддерживает базовые функции, этого вполне достаточно, но для более удобной работы с кодом рекомендуется использовать ваш любимый сторонний редактор кода для создания и редактирования файлов скриптов. При написании скриптов следует руководствоваться официальной документацией библиотеки Phaser 3.90.

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

Созданный проект можно сохранить, экспортировать в ZIP-архив, а готовую игру — в ZIP-архив для запуска в браузере.