Keolot Phaser Editor is a free visual development environment for 2D browser games on the open source Phaser engine with integrated Matter JS physics. 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.
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.
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.
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
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.
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.
