Phaser Editor - Eclipse-based IDE for HTML5 games creation

Today, web browsers are everywhere: phones, TVs, laptops, PC, video game consoles. Browsers are getting so sophisticated and powerful that users can do video conferences, play videos, access social networks, browse realistic maps, create content offline, and play games!

This latest browser revolution has a name: HTML5, the last standard that is implemented by major browsers on all the platforms. HTML5 is a browser API that allows developers to create apps that provide a richer experience to the users.

One of the exciting things you can do with HTML5 is create video games. Traditionally, playing rich games in a browser was only possible by installing third-party plugins like the Flash Player, Java Applets, or the Unity Web Player, however, these technologies are being deprecated in all major browsers and replaced by HTML5.

New standards like Progressive Web App (from Google and recently adopted by Firefox) are going to remove the boundaries between the browser apps and native apps, and web games will get more of the space that is filled by native games in desktop and mobile devices today.

HTML5 games are getting special attention on traditional online games portals, but also in social networks giants like Facebook (see Facebook Instant Games) are revolutionizing the way games are played and distributed, therefore giving more relevance to the social component.

In this article, we present Phaser Editor, a tool to create HTML5 video games.

Phaser Editor

Phaser Editor is an Eclipse-based IDE to create HTML5/JavaScript video games. The games use the popular Phaser game development framework, a third-party project of Richard Davey at PhotonStorm.

Phaser provides a powerful set of functions that cover the main areas of game development: assets loading, physics, animations, particles, camera, tilemaps, input handling, sound. In few lines of code the user can develop an idea, which makes Phaser a great option for game dev starters. Bigger games can be implemented by larger teams following Object Oriented Programming patterns.

A Phaser game that shows an image

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', 
{ preload: preload, create: create });

function preload() {
game.load.image('einstein', 'assets/pics/einstein.png');
}

function create() {
game.add.sprite(0, 0, 'einstein');
}

Phaser Editor provides code editors and visual tools that accelerate the development of Phaser games: texture packer, assets manager, previewers, scenes and prefabs maker, animations editor, JavaScript editors, documentation navigators, and others. These tools use the Phaser formats or generate plain Phaser code, so no limits are set to what the user can do directly in code, by calling the Phaser API.

Because the editor is based on Eclipse technology, many features are available by default, like multiple platforms support, Git tooling, flexible (layout) and customizable (perspectives) workbench, projects and workspace, preferences UI, key bindings, automatic updates, plugins marketplace, UI themes, offline help, embedded browser, refactorings, search, just to name a few.

The editor can be downloaded from the Phaser Editor Downloads page. Follow these steps:

1. Pick the one of your operating system,
2. download it,
3. unpack it,
4. run the Phaser Editor executable (it does not require any special installation).

Start by creating a project

To start a game it is very simple, there are two project wizards to create a game: the Phaser Project and the Phaser Example Project wizards. Phaser beginners should start with the Phaser Example Project wizard, it shows a list of more than 600 official examples, and some others created to showcase Phaser Editor features. The user can select one example and create a project with it.

The Phaser Project wizard (File → New → Phaser Project) shows a couple of parameters like the language (JavaScript or TypeScript), the size of the game, the inclusion of demo assets, the game structure: simple, with one or with multiple scenes.

For the first time keep all parameters by default, but check the Include demo asset, to get an already working scene.

Wizard to create a game project

Press Finish, it will create a new project and open the scene Level.canvas:

Scene created by default

Learn more in the First Steps section of the Phaser Editor docs.

Texture packing

Texture packing is an essential task in game development. It is the process of merging different images into one big image together with a description file that includes the information of the original image positions and names. This is named the texture atlas or texture map.

In Phaser Editor, there is a texture packer that support different algorithms, specially the MAX_RECTS algorithms, that allows an efficient packing.

The Texture Atlas Generator editor

Learn more in the Texture Packing Editor section of the Phaser Editor docs.

Assets management

In Phaser there are two ways to load the assets, one by one or by loading an asset pack. The asset pack is a manifest file (with a JSON format) where all assets are declared. Each asset pack entry is grouped in a section and contains all the parameters of the asset. Phaser Editor provides an editor for this asset pack file, so the user can load the assets quickly and use them in other parts of Phaser Editor, like the scenes maker and the Preview window.

The Assets Pack editor

Phaser supports many asset types: image, texture atlas, sprite-sheet, audio, video, tile-maps, and others. The asset pack editor supports all of them and provides the documentation for all the parameters of the assets. This documentation is extracted automatically from the Phaser docs, so it helps the user to learn the Phaser API.

A great featured provided by the Phaser Editor is the refactoring of assets. It uses the Eclipse Refactoring feature to replace textures of the assets or move the assets to different sections. These refactoring operations allow the user to start the game with demo assets and replace them with the final art, at any moment.

Refactoring dialog to remove an asset

The asset packs with the assets, the scenes, and prefabs, are shown in the Assets view. This view is very important because the user can browse the assets, preview them, delete them, rename them, replace their textures or drop them into scenes, or search all the scenes (using the Eclipse Search feature) that references a particular asset.

Asset navigator

Learn more about the Assets Pack editor and the Assets view in Phaser Editor docs.

The assets can be previewed by hovering the mouse over it in the Assets view or the Asset Pack editor. However there is a Preview view where the user can drop an asset for a detailed preview. The common is to drop there the sprite-sheet and atlas assets. The user can drag and drop the texture frames from the Preview window to the scenes. In the case of the sprite-sheet preview, the user can select some frames and animate them.

In a sprite-sheet preview, the frames can be animated

Learn more about the Preview window in the Phaser Editor docs.

Scenes creation

The scenes are the most important feature of Phaser Editor. The scene editor (or Canvas Editor) allow the user to create levels with visual tools. The objects of the scene are created by dropping the assets on it, and can be edited in the Property Grid editors.

The scenes are compiled into a readable JavaScript code (or TypeScript code), so it does not require any special or third-party plugin to load the scenes into the game. The editor stage is made with JavaFX, technology that is provided to Eclipse by the e(fx)clipse project. In a future we are going to evaluate a stage made with the JavaFX WebView, so more complex objects can be created like particles, by running a Phaser game instance inside the editor.

There are three type of scenes: State, Sprite and Group. The Sprite and Group scenes are prefabs and can be used in other scenes, which makes easier to reuse objects and create complex games. In addition, the Sprite prefab can be set to different types: Sprite, Button, TileSprite, and Text.

Different parts of the scene editor

The Property Grid contains some advanced editors, like the animations editor. The animations are edited in a dedicated dialog where the user can create new animations, select the animation's frames and play it.

Animations dialog

Learn more about the Scene Editor in the Phaser Editor docs.

JavaScript programming

Phaser is a JavaScript framework, and the games are coded in this language. In addition are provided the TypeScript definitions of the API, so users can use this language too. Phaser Editor provides code generators for JavaScript 5, JavaScript 6 and TypeScript, however, only JavaScript 5 is supported by the JavaScript editor, that is provided by the JSDT project of the Eclipse Web Tools. JavaScript 6 and TypeScript can be edited by installing third party plugins, specially the TypeScript IDE from Angelo Zerr. In future versions of Phaser Editor we are going to include TypeScript IDE as the built-in solution, to replace the current JSDT editor.

The JavaScript editor provides some nice features dedicated to Phaser development:

• Phaser API autocompletion
• Assets key autocompletion and previsualization
• Assets filename autocompletion and previsualization
• Animations constants autocompletion and previsualization
• Code templates

Assets keys proposals

Conclusion

If you want to start in the game development world, as a hobby or as a career, HTML5 games are simple to start with and have a promising future. Phaser is one of the most popular HTML5 game dev frameworks and Phaser Editor is a tool just made for Phaser, and is growing and maturing. The fact that is made with Eclipse technology allow us to reuse many powerful features and third-party plugins, and enter into the Eclipse community as a serious game development alternative.

For more information on the editor features, take a look to the online documentation. In this tutorial on the Zenva Academy you can learn how to create a Mario-like game (play the demo).