Speed up Phaser game development with Phaser Editor

If you are looking for a way to speed up Phaser game development, easily handle and manage your projects and have a dedicated IDE, then you should look at Phaser Editor.

It’s a new editor to develop HTML5 2D games using the Phaser framework. This editor brings powerful features like:

* A visual game level builder.

* Smart code completion of the Phaser, ECMA5 and Browser APIs.

* A great Phaser documentation search tool (Chains) plus offline Phaser and Editor documentation.

* A long list of project templates based on the Phaser examples, Phaser Coding Tips the Game Mechanic Explorer and others.

* A great Asset Pack Manager and inline preview, sprite-sheets editor, friendly and complete texture atlas packer, audio sprites builder and much more.

Once you open the editor you can open one of the several buit in projects including the official phaser examples – it’s a great value if you want to start playing and experimenting with them, or create a more basic project starting from a template, like the blank template I used:

Then you are ready to code your next game using all these features:

Project Wizards. The project wizard help you to start the programming of your game. You can start with a built-in template or you can select any of the Phaser examples or Phaser Coding Tips. So you can test the example but also you can modify it and test your modifications. This is a good resource to learn Phaser.

Phaser Source File Wizard. There are also wizards to create common source files like custom states, sprites and groups.

Built-in HTTP Server. Test your game is very easy, with a click you can open your game in the default browser and host it in a built-in HTTP server (Jetty).

Improved JavaScript Editor. The JavaScript editor of the JSDT was extended, cutomized and modified to improve the Phaser coding experience:
* Code completion of the Phaser API.
* Code completion of the easing literals (like “Bounce.easeInOut”)
* Code completion of the asset keys defined in an asset pack (JSON) file.
* Code completion of the file names (images, sounds, etc..)
* Phaser code snippets (the same of the official Phaser sandbox)
* Hover extension to show the Phaser documentation of the pointed class, method or property.
* Hover extension to preview the pointed asset key (sprite-sheets, atlas, …) and media file (images, sounds).
* And all the JSDT JavaScript editor features…

Visual Game Level Editor. The Scene Editor is a great tool to create and layout Phaser objects in a scene. It supports:
* Sprites, buttons, tiles sprites and groups.
* Texture atlas, spritesheets and images.
* Sprite animations.
* Objects alignment and order.
* Properties editing and help tooltips (based on Phaser API).
* Common editing operations like move, cut-copy-paste, undo-redo, zoom, pan.
* Phaser code generator.
It compiles the scenes into a readable Phaser code that you can add to the game as a Phaser.Group, even you can reuse it outside Phaser Editor since it is a beatiful plain Phaser code.

Integrated Phaser Chains. Phaser Chains is a great new way to search and discover the Phaser documentation. We improved and integrated it into Phaser Editor.

Asset Pack Editor and Explorer. The Asset Pack is a JSON file used by Phaser to load the assets entries. We encourage to use this format and we provide an editor for this file to integrate it with the other components of Phaser Editor, like the JavaScript editor and the Asset Explorer.

Texture Atlas Editor. Packing your game images in a texture atlas improves the loading and performance of your game. In Phaser Editor we provide an atlas editor to make the job more easy. It uses as the well known Lib GDX Texture Packer tool.

PNG Optimization. With a click you can optimize the PNG images of a file, folder or project. This tool uses the OptiPNG program.

Audio Sprites Editor. An editor to create and modify audio sprites. It is based on FFMpeg. The files are transcoded automatically to OGG, MP3 and WAV. This is an experimental feature.

You should definitively give a try to Phaser Editor to increase your productivity.

Phaser Editor is developed and mantained by Arian Fornaris, a game developer from Cuba. You can check for his latest works at its personal page.

  • Awesome! Hadn’t seen this IDE before, I’ll definitely check it out and see if it improves workflow! :D