Создание визуальной среды разработки браузерных 2D-игр

Логотип Keolot Phaser Editor

editor.keolot.com

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

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

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

Image
Text
Sprite
Particles
Video
Rectangle
TileSprite

Кроме режима интерактивного редактора есть также два режима предпросмотра игры:

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

Режим предпросмотра игры прямо в среде разработки

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

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

Различные панели и свойства для настройки объектов

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

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

Image (растровые изображения JPG, PNG, WEBP, AVIF, GIF, SVG)
SVG (векторные изображения)
Audio (MP3, WAV, OGG, M4A)
Font (TTF, OTF)
Video (MP4, WEBM)
Spritesheet
Atlas
Animation
BitmapFont
JSON
TXT
XML
GLSL
TilemapTiledJSON

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

Init()
Preload()
Create()
Update(time, delta)

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

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

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

Присутствует файловый менеджер для базовых операций: добавление/переименование/удаление файла, разархивирование ZIP-архива. Рекомендуется для создания структуры каталога проекта и управления файлами использовать встроенные средства проводника Windows - файлы запущенного проекта будут автоматически синхронизироваться.

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

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

Также есть версия Keolot Phaser Editor для Android:

В ней есть все возможности, как в версии для ПК или веб-версии:

Создание браузерных 2D игр на телефоне Android

Javascript код можно писать прямо в редакторе на телефоне:

Написание кода браузерной игры на телефоне Android

Версия для Android также абсолютно бесплатна:

Что нового в версии 1.1?

Исправлена ошибка с выделением игровых объектов с одинаковыми именами, но расположенных в разных сценах. Ранее выделялся в списке первый найденный объект. Сейчас выделяется выбранный объект в текущей сцене, что является корректным поведением.
Добавлена функция отображения выбранного файла в проводнике приложений для Windows (кнопка «Show in Explorer»).
Добавлена функция Drag Lock для блокировки перетаскивания объекта в редакторе.
Добавлена возможность отображения прогресса загрузки игры без программирования, только выбрав чекбокс.
Добавлена возможность создания нового чистого проекта для веб-версии и Android.

Дата релиза: 22.07.2025.

Что нового в версии 1.2?

Редактор форм столкновений для Phaser с физикой Matter JS

Добавлена возможность задания произвольной формы коллизий, кроме стандартных основных форм (круг, прямоугольник, полигон, трапеция). Координаты формы коллизий задаются в JSON-виде.
Windows приложение поставляется со встроенной утилитой создания форм коллизий, для остальных платформ можно воспользоваться онлайн-редактором форм коллизий, либо другими сервисами и инструментами (например, Tiled Map Editor).
При экспорте игры изменено имя файла с index.htm на index.html.
Повышена точность отображаемого значения originX и originY в инспекторе объекта с 0.1 до 0.001.

Дата релиза: 29.07.2025.

Небольшое обновление 1.2.1 для Android

Скрыт статус бар для расширения рабочего пространства:

Дата релиза: 09.08.2025.

Большое обновление 1.3. Что нового?

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

Структура игровых объектов, папок и подпапок в редакторе

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

Массовое удаление группы объектов в редакторе и другие массовые операции

А также реализована возможность массового копирования всех объектов со структурой папок в любую сцену, в том числе в текущую
И такие операции с объектами в папке: массовое смещение по X и Y, выравнивание по X и Y, свойства Visible и Drag Lock
Добавлен режим масштабирования EXPAND (в дополнение к имеющимся режимам NONE, FIT, ENVELOP, WIDTH_CONTROLS_HEIGHT, HEIGHT_CONTROLS_WIDTH и RESIZE)
Добавлена возможность дублирования всей сцены со всеми игровыми объектами (полная копия)
Добавлена возможность написания произвольного пользовательского кода на уровне всего проекта, а не только на уровне функций определенной сцены, что позволяет добавлять свои пользовательские классы или например префабы для дальнейшего использования. Такая возможность присутствовала и ранее используя JS-аддоны, но это больше подходит для плагинов или скриптов самого редактора, поскольку аддоны привязаны к самому редактору, а не к отдельному проекту

Настройка пользовательского кода для всего проекта

Добавлено информирование о необходимости перезагрузки редактора после добавления пользовательского аддона (плагина или JS-скрипта)

Дата выпуска: 21.09.2025

Что нового в версии 1.4?

Добавлена возможность задать setScrollFactor в визуальном редакторе без написания кода. Это необходимо для создания, например, эффекта параллакса или, наоборот, неподвижного элемента пользовательского интерфейса.
Добавлена кнопка полноэкранного режима для приложения Windows, аналогичная клавише F11 в браузерной версии. Это позволяет расширить рабочее пространство.

Полноэкранный режим приложения

Добавлена важная функция указания пользовательского HTML-шаблона для экспорта игры. Вы можете продолжать использовать стандартный шаблон или создать свой собственный, указав собственный стиль страницы, теги, заголовок, фавикон, счётчики аналитики и многое другое. Вы можете переключаться между шаблонами в любое время.
Теперь вы можете указать любой родительский контейнер для экспортируемой игры. По умолчанию игра помещается в тег body, но вы можете указать собственный родительский элемент div.

Пользовательский HTML-шаблон для экспорта игры с собственным родительским элементом div

HTML-файлы оканчивающиеся на *.template.html будут использоваться только как шаблоны при экспорте, сами файлы не добавляются в архив экспортированной игры. Другие HTML-файлы *.html будут помещены в архив как и остальные файлы игры. Аналогично для JS-файлов, оканчивающихся на *.bundled.js: такие файлы включены в общий скрипт игры game.js и не добавляются в архив экспортированной игры. Другие JS-файлы *.js будет помещены в архив как и остальные файлы игры. Это добавляет гибкости и убирает существенные ограничения, присутствовавшие в предыдущих версиях

Дата выхода: 15.10.2025

Вопросы и ответы

Это еще один движок для создания игр?
Нет, Keolot Phaser Editor - вообще не игровой движок в том смысле, что это именно визуальный редактор для движка Phaser.JS со встроенной в нее физикой Matter.js. При экспорте игры получается обычный JS-код для движка Phaser так, как если бы Вы писали код на нем вручную без визуального редактора, никаких отличий и никаких дополнительных зависимостей и библиотек.
А как насчет производительности? Не замедляет ли Keolot Phaser Editor игру в сравнении с написанной на чистом Phaser?
Нет, при экспорте Keolot Phaser Editor не добавляет ни одного лишнего байта к вашему проекту. Игра работает с той же скоростью, как если бы вы писали её вручную на Phaser. Редактор никак не влияет на производительность готовой игры, он только инструмент для создания кода. При экспорте получается чистый код Phaser.
Нужно ли дополнительно устанавливать что-то на компьютер?
Нет, Keolot Phaser Editor содержит в себе все необходимое. Для запуска игры в редакторе даже не нужно устанавливать сервер. Вы можете вообще использовать только онлайн веб-версию или скачать ZIP-архив. Все версии, кроме веб, работают офлайн и не требуют интернета.
Подходит ли Keolot Phaser Editor для коммерческих игр?
Да, Вы можете использовать Keolot Phaser Editor для любых проектов — коммерческих, инди, образовательных и т. д. Сгенерированный код — полностью ваш. Лицензия Keolot Phaser Editor не накладывает ограничений на продажу или публикацию игр.
Я хорошо знаю Phaser.js, поможет ли мне это? Я не хочу изучать еще что-то новое
Весь код игры в Keolot Phaser Editor пишется на Javascript для библиотеки Phaser, поэтому тем, кто изучил ее вообще ничего изучать не придется, кроме пользовательского интерфейса редактора и его функций, которые только упрощают работу, делая ее визуальной и избавляют от рутинных операций.
Можно ли использовать свои ассеты и плагины Phaser?
Разумеется. Keolot Phaser Editor поддерживает импорт любых спрайтов, звуков и пользовательских JS-плагинов для Phaser. Если вы уже используете какой-то Phaser-плагин, вы можете подключить его к проекту, как в обычном коде.
Phaser только для веб-игр? Я могу сделать игру на Android, iOS, ПК?
Вы можете сделать игры для Android и iOS вообще без проблем, используя например WebView в Android Studio или WKWebView в Xcode, достаточно просто переместить файлы с игрой в папку Вашего проекта Android/iOS. Для ПК можно использовать инструменты вроде NW.js, это еще проще.
Почему не Phaser Editor 2D?
Phaser Editor 2D это платный инструмент, а Keolot Phaser Editor абсолютно бесплатный. Другие аспекты имеют как свои преимущества, так и свои недостатки.
А почему тогда не Godot?
Это касается сравнения уже самого Phaser и Godot, у них в целом немного разная область применения. Godot прекрасен и имеет массу преимуществ, но если сравнивать именно создание 2D-игр для браузера есть такие особенности, как большой размер билда при экспорте веб-версии (компиляция в WASM), а также проблемы с работой на некоторых устройствах, например, в браузерах на iOS и даже Android. Godot существенно лучше для ПК-игр, Android и iOS, но для 2D веб-игр все же имеет некоторые недостатки. Phaser же заточен исключительно для веб-игр и идеально нативно интегрируется в веб-страницу, размер билда даже в несжатом виде около 1 Мб (без учета пользовательских ассетов, разумеется). Также очевидно, что Javascript гораздо более известен и широко применяется, чем GDScript (который также легкий и простой). Phaser не имеет проблем с работой в браузерах на iOS и Android.

Скачать

Keolot Phaser Editor 1.4.0 для Windows (ZIP)

Keolot Phaser Editor 1.4.0 для Windows в Microsoft Store

Keolot Phaser Editor 1.4.0 для Android в Google Play

Keolot Phaser Editor 1.4.0 для Android в Rustore

Веб-версия

Keolot Phaser Editor 1.4.0 онлайн

Keolot Phaser Editor 1.4.0 на Itch.io

Демо-проект

Пример демо-игры

Запустить демо-игру