This is a small guide you can follow to start writing your games and perform common tasks related to the editor's features.

Watch a demo video

Download and install

No need to install Java anymore

Since version 1.1.2, the Java run-time is embedded in Phaser Editor so you can run the editor out of the box, without any pre-install.

For Linux users

You should set execution permission to the java, optipng and ffmpeg programs bundled in Phaser Editor. To do this, run the SetPermissions.sh script:

$ cd "Phaser Editor"
$ ./SetPermissions.sh
$ ./PhaserEditor

Phaser Editor was tested on Ubuntu 14.04 Gnome.

Some users are getting issues at the editor startup. Please check this issue to get a workaround. Basically, the idea is to run the editor in this way:

./PhaserEditor -persistState false -clearPersistedState

Run Phaser Editor

The first time you run Phaser Editor a Workspace Launcher dialog is open. In this dialog you have to set the path to the folder where you want to create the workspace.

A workspace is the conatiner folder of your projects. All your projects will be created inside the workspace, but also, in the workspace are saved your preferences. This means, that if you start Phaser Editor and select a workspace, the editor will get the preferences saved there.

A project is a folder where you add the code of your game. So you can create many projects in the same workspace.

Workspace launcher

Create project

Projects are created via the Phaser Project wizard. Go to the main menu: File > New > Phaser Project. Note in that New menu are listed all the wizards to create the Phaser related files.

If you press CTRL+N , a New dialog is open and shows all the available New wizards. You can expand the Phaser node and select the wizard you want to run. Also you can filter the content with a phaser keyword to find it faster.

In the Phaser Project wizard you have to select one of the templates are shown. These templates are grouped in four main groups:

  1. Main Templates: provided by Phaser Editor. We recommend to start with them. The main difference is that those templates include an asset pack file and the code to load it.
  2. Phaser Coding Tips: contains the issues of the official Phaser tutorials.
  3. Phaser Templates: contains the templates listed in the Phaser github repo.
  4. Phaser Examples: contains the official Phaser examples. These templates are a great resource to learn and test Phaser features, you can create a project, run it and modify it.

Project wizard

After you select the template you can press Finish to create a project with an auto-generated name, or click Next to change it.

The Project Explorer

The Project Explorer is a view with all the projects of the workspace. It is like a filesystem explorer, you can browse your projects and apply actions to the folders or files (open a file, create a folder, optimize the PNG of a folder, etc...).

A nice feature of Phaser Editor is the preview of the assets. In the Project Explorer you have two ways of preview the media files: hover the file with the mouse or select it and press CTRL+ALT+V.

Project Explorer preview image file

By default, Phaser Editor updates the Project Explorer if the workspace is changed by external programs (for example if you modify, delete or add a file in the OS explorer). However, you can update the Project Explorer manually if you select a resource (project, folder or file) and press F5 .

Run the game

To run your game there is a button in the main toolbar, it opens the default OS browser and start a built-in HTTP server to listen in a random free port. First you have to select, in the Project Explorer, the project you want to run, then press the Run Phaser Project button in the main toolbar (or press ALT+F5 ).

Run project

To run your game we said that you have to select the project of your game, but really you can select any file or folder of the project, or the file of the active editor can be used to know what project to run.

Phaser Editor has a built-in HTTP server (Jetty) for static content. The first time you run a project, the server is started and serves all the static content of the workspace. So, in the browser is open an URL like: http://localhost:1982/YourGameName/WebContent/index.html.

Learn Phaser

If you want to learn Phaser or go deeper in it, we recommend the following Zenva Academy courses:

The Complete Mobile Game Development Course – Platinum Edition: Hands-on online course to learn iOS and Android Game Development from total scratch! Learn JavaScript, HTML5, Phaser and Cordova.

Advanced Game Development with Phaser: Become a Black Belt Phaser developer and create advanced games. Multiplayer included!

(The above links are promotional)