Keolot Phaser Editor 1.4

Keolot Phaser Editor is a free visual development environment for 2D browser games on the open source Phaser engine with integrated Matter JS physics. This is a free and powerful alternative to the paid Phaser Editor 2D. The application has a built-in ability to visually create and edit scenes, game objects, animations, audio and keys, write game logic in Javascript with the ability to connect plugins and global scripts. Thanks to the visual representation, the process of creating a game design is significantly simplified, compared to working directly with the Phaser library without a visual representation.

The scene displayed in the editor will look exactly the same in the finished game. Essentially, the visual editor is a paused game scene.

Keolot Phaser Editor 2D - Free Visual Editor for Phaser JS

In the interactive editor, you can visually create a design, move objects and add new ones. You can navigate the design both with the mouse and with the help of interface elements, including changing the Zoom, and rulers with coordinates help you navigate conveniently. There is the ability to visually add, copy, edit and delete the following Phaser game objects:

Image
Text
Sprite
Particles
Video
Rectangle
TileSprite

In addition to the interactive editor mode, there are also two game preview modes:

Preview of the current scene. In it, you can pause the game and resume playback, as well as interact with objects and change their parameters in the inspector in real time. In the preview mode of a specific scene, you cannot switch between scenes inside the game, this is exactly the viewing of a specific scene. Also, the scene preview mode is launched in the Debug physics mode.
Preview of the game. Launching the game as is, without the ability to inspect objects and pause playback.

Preview modes: Visual editor, scene preview, game mode

There is a console for debugging and viewing errors.

The Object Inspector allows you to set parameters for game objects (e.g. X, Y coordinates, Angle, Opacity, Texture, Depth, etc.), adjust physical parameters, particle parameters and their appearance (e.g. Lifespan, Frequency, Speed, Alpha, etc.) and adjust other properties in panels, such as choosing animation types, audio settings.

Various visual settings of the game in the Keolot Phaser Editor 2D

Image and Sprite objects can be made into physical Matter objects directly in the Object Inspector in one click and specify physical parameters (e.g. Density, Collision Shape, Collision Category, Restitution, Ignore Gravity, etc.). In the Script Editor, you can create and adjust other properties and game objects, as if you were working directly in Phaser, but the visual editor provides everything you need.

The development environment supports visual creation of the following preloaded assets:

Image (bitmap images JPG, PNG, WEBP, AVIF, GIF, SVG)
SVG (vector images)
Audio (MP3, WAV, OGG, M4A)
Font (TTF, OTF)
Video (MP4, WEBM)
Spritesheet
Atlas
Animation
BitmapFont
JSON
TXT
XML
GLSL
TilemapTiledJSON

An example of visual particle customization in the Keolot Phaser Editor 2D

In the scene inspector, you can move scenes up or down, change the local background color of the scene, set standard physical boundaries in one click, and also set scene scripts for the main functions of the Phaser game scene:

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

You can also add a Custom script for the scene, for example, with your own functions, it will be added to the game code before Init. If you write any of the functions Init, Preload, Create, Update in Custom, it will be ignored, since there are specialized sections for this.

Editing JavaScript code in the Keolot Phaser Editor 2D

In the text editor with syntax highlighting, you can edit both scripts (JS, TS) and text files (JSON, TXT). The text editor supports basic functions, it is quite sufficient, but for more convenient work with the code, it is recommended to use your favorite third-party code editor to create and edit script files. When writing scripts, you should be guided by the official documentation of the Phaser 3.90 library.

The code editor also contains code templates for common situations, such as adding an event to an object, tween animations, creating a custom physical object, key events, collision handling, etc.

There is a file manager for basic operations: adding / renaming / deleting a file, unzipping a ZIP archive. It is recommended to use the built-in Windows Explorer tools to create the project directory structure and manage files - the files of the running project will be automatically synchronized.

In the project configuration, you can set parameters such as the size of the game area, Background Color, Antialiasing, Pixel Art, gravity settings, connecting a keyboard, mouse, Touch Input, gamepad and others.

The created project can be saved, exported to ZIP, and the finished game can be exported to ZIP for launching in the browser. The archive contains index.html and other game files.

In addition to the version for Windows and web, there is a version for Android:

It has all the features for creating games:

You can write JavaScript code for your game directly on your phone:

Writing Javascript Code for a Game on an Android Phone

Customize animation...

Setting up animation in the game in Keolot Phaser Editor on an Android phone

... and audio.

Setting up audio in the game in Keolot Phaser Editor on an Android phone

Keolot Phaser Editor is also absolutely free for Android.

Free Phaser Editor 2D by Keolot for Android

You can create a game directly on your phone, and if you connect a keyboard and mouse to your phone or tablet (the device must support USB OTG), it becomes even more convenient.

What's new in version 1.1?

Fixed a bug with selecting game objects with the same name, but located in different scenes. Previously, the first found object in the list was selected. Now the selected object in the current scene is selected, which is the correct behavior
Added the function of displaying the selected file in the application explorer for Windows (Button "Show in Explorer")
Added the Drag Lock function to disable dragging an object in the editor
Added the ability to display the game loading progress without programming, just by selecting the checkbox
Added the ability to create a new clean project for the web version and Android.

Release date: 22.07.2025

What's new in version 1.2?

Collision shape editor for Phaser with physics Matter JS

Added the ability to specify a custom collision shape, in addition to the standard basic shapes (circle, rectangle, polygon, trapezoid). The coordinates of the collision shape are specified in JSON format.
The Windows application comes with a built-in utility for creating collision shapes, for other platforms you can use the online collision shape editor, or other services and tools (for example, Tiled Map Editor)
When exporting a game, the file name was changed from index.htm to index.html
Increased the accuracy of the displayed originX and originY values in the object inspector from 0.1 to 0.001

Release date: 29.07.2025

Minor update 1.2.1 for Android

Hidden status bar to expand workspace

Release date: 09.08.2025

Major update 1.3. What's new?

An important system has been implemented: folders in the game object structure in the scene list. Game objects can now be conveniently organized into a folder hierarchy for better logical and visual presentation. This does not affect the game being created or the grouping of objects within it, but only the presentation of objects in the editor.

The structure of game objects, folders and subfolders in the editor

The implementation of the folder structure allows for bulk deletion of objects within a folder, as well as its nested folders and objects, instead of deleting each object individually.

Bulk deletion of a group of objects in the editor and other bulk operations

The ability to bulk copy all objects from the folder structure to any scene, including the current one, has also been implemented.
The following operations with folder objects are also supported: bulk offset along the X and Y axes, alignment along the X and Y axes, Visible and Drag Lock properties.
The EXPAND scaling mode has been added (in addition to the existing modes NONE, FIT, ENVELOP, WIDTH_CONTROLS_HEIGHT, HEIGHT_CONTROLS_WIDTH, and RESIZE).
Added the ability to duplicate an entire scene with all game objects (full copy).
Added the ability to write custom code for the entire project, not just for individual scene functions. This allows you to add custom classes or, for example, prefabs for future use. Previously, this feature was available when using JS addons, but it is more suitable for plugins or editor-specific scripts, since addons are tied to the editor itself, not a specific project.

Customizing custom code for the entire project

Notification about the need to restart the editor after adding a custom addon (plugin or JS script).

Release date: 21.09.2025

What's new in version 1.4?

Added the ability to set setScrollFactor in the visual editor, without coding. This is necessary for creating, for example, a parallax effect or, conversely, a stationary UI element.
A full-screen mode button has been added for the Windows app, similar to how F11 works for the browser version. This allows you to expand your workspace.

Full screen mode of the application

Added an important feature for specifying a custom HTML template for game export. You can continue to use the standard template, or create your own, specifying your own page style, tags, title, favicon, analytics counters, and more. You can switch between templates at any time.
As a result, you can now specify any parent container for the exported game. By default, the game is placed in the body tag, but you can specify a custom parent div element.

Custom HTML template for exporting a game with a custom parent div element

HTML files ending in *.template.html will be used only as templates during export; the files themselves are not added to the exported game archive. Other *.html files will be archived like other game files. The same applies to JS files ending in *.bundled.js: these files are included in the game.js shared script and are not added to the exported game archive. Other *.js files will be archived like other game files. This adds flexibility and removes significant limitations present in previous versions.

Release date: 15.10.2025

Questions and Answers

Is this another game engine?
No, Keolot Phaser Editor isn't a game engine at all, in the sense that it's a visual editor for the Phaser.JS engine with built-in Matter.js physics. When you export a game, you get regular Phaser JS code, just as if you were writing it manually without a visual editor. There are no differences and no additional dependencies or libraries.
What about performance? Does Keolot Phaser Editor slow down a game compared to one written in pure Phaser?
No, Keolot Phaser Editor doesn't add a single extra byte to your project when exporting. The game runs at the same speed as if you were writing it manually in Phaser. The editor doesn't affect the performance of the finished game in any way; it's just a code creation tool. When you export, you get pure Phaser code.
Do I need to install anything else on my computer?
No, Keolot Phaser Editor includes everything you need. You don't even need to install a server to run a game in the editor. You can use the online web version or download the ZIP archive. All versions, except the web version, work offline and don't require an internet connection.
Is Keolot Phaser Editor suitable for commercial games?
Yes, you can use Keolot Phaser Editor for any project: commercial, indie, educational, etc. The generated code is completely yours. The Keolot Phaser Editor license does not impose any restrictions on selling or publishing games.
I'm familiar with Phaser.js; will this help me? I don't want to learn anything new.
All game code in Keolot Phaser Editor is written in JavaScript for the Phaser library, so those who have mastered it won't need to learn anything other than the editor's user interface and its features, which simplify work, making it visual and eliminating routine operations.
Can I use my own Phaser assets and plugins?
Of course. Keolot Phaser Editor supports importing any sprites, sounds, and custom JS plugins for Phaser. If you're already using a Phaser plugin, you can include it in your project just like in regular code.
Is Phaser only for web games? Can I make a game for Android, iOS, or PC?
You can make games for Android and iOS without any problems at all, using, for example, WebView in Android Studio or WKWebView in Xcode. Simply move the game files to your Android/iOS project folder. For PC, you can use tools like NW.js; it's even easier.
Why not Phaser Editor 2D?
Phaser Editor 2D is a paid tool, while Keolot Phaser Editor is completely free. Other aspects have their advantages and disadvantages.
Why not Godot then?
This applies to comparing Phaser and Godot; their overall scope of application is slightly different. Godot is excellent and has many advantages, but when compared specifically to creating 2D browser games, there are some drawbacks, such as the large build size when exporting the web version (compiling to WASM), as well as issues on some devices, such as iOS and even Android browsers. Godot is significantly better for PC games, Android, and iOS, but still has some drawbacks for 2D web games. Phaser, on the other hand, is designed exclusively for web games and integrates perfectly into web pages, with a build size of about 1 MB even uncompressed (not including user assets, of course). It's also clear that JavaScript is much more well-known and widely used than GDScript (which is also lightweight and simple). Phaser has no issues running in iOS and Android browsers.