An add-on to the Phaser HTML5 game framework
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.


current version: 0.3.0

author: Josh Shepard (jcs)

date: Feb. 12, 2014

uses: Phaser 1.1.5

Nadion is an add-on to the Phaser HTML5 game framework, by Rich Davey (Photon Storm). It was originally pulled out of an in-progress platformer/scroller game as reusable and extensible elements became obvious. As more work went into these elements I thought that others might benefit from them as well.

(Yes, the name 'Nadion' is a Star Trek joke - "Phasers" in the Star Trek universe emit "Nadions").

NOTE: Please do not use the artwork or music in an actual product. They do not belong to me. The artwork used in the sample is all owned by Photon Storm Ltd, borrowed from the Phaser examples and used with their kind permission. The music used in the sample is owned by "Bodenstaendig 2000", an Atari scene composer. It is from the Fading Twilight Atari collection (Fading Twilight). (I borrowed it from the Phaser examples as well).

What does Nadion Get Me?

Primarily Nadion is a framework for creating game levels in the Tiled map editor. To this end, Nadion provides Trigger, Area, Alarm and Emitter entities which can be added and tweaked in Tiled, setting up game logic without needing to write code to do it. (Adding some of these to the sample is planned). It supports multiple layers, which can scroll at different rates (“parallax” scrolling), as well as Tiled image layers and object layers (which map to Groups in Phaser and which contain all your sprites and objects).

Nadion also provides some simple game objects such as a state machine, for handling sprite logic, and on-screen controls for touch-screen devices. It also provides some helper functions that I have found useful; things such as finding a named item in a group or array (see the docs on the Nadion namespace for a complete list).

Plus are some development-time helpers. You can use a browser query string ('render=canvas') to force canvas rendering. There is a "developer mode" toggle you can set that will set some hotkeys: 'f' will display the frame-rate, 'd' will show some debug info (currently just sprite bounds), 'p' will toggle on/off Particles and the '1' - '5' keys will toggle on/off the drawing of first five tile layers. The sample also shows how to use a query string to enter "developer mode" and start at a particular level (overriding what's saved in local storage).

Getting Started

A working example is provided of a simple platformer game. You may use it as a template to get you started. Documentation is also provided in the docs directory.

When in doubt, remember that Nadion is just an add-on to Phaser, which provides many (many) examples and documentation of its own.

And as always, "Use the source, Luke"! It's open source for a reason!

Building Nadion

A fully "compiled" version of Nadion is provided in the dist directory, in both plain and minified formats.

Nadion is built using grunt, a Node.js utility for running tasks. You'll need Node.js installed, which you can use to install Grunt (npm install -g grunt-cli) and to install the prerequisite modules for building (npm install in your Nadion directory).

Once you have Node.js and Grunt installed you can run grunt in the Nadion directory to build.


Nadion is an add-on to Phaser; it builds on the great work that Rich and team have put into Phaser and does nothing without having the Phaser library available.

A copy of the version of Phaser that Nadion was currently tested against in the lib directory. Hopefully this will always be the latest released version of Phaser (though I can't guarantee it).


Please add them to the Issue Tracker with as much info as possible, especially source code demonstrating the issue.


Nadion is released under the MIT License. (Please note that I personally don't consider a minified javascript file to be a "source release" and I do NOT care if you put the license into such a file. In other words - don't feel like you need to include the license text in your release javascript file!)