Fast water simulation developed with CreateJS and TypeScript

Fast Water Simulation

Recently I have wanted to get back into developing interactive content for the web. While the web used to be my primary target platform with Adobe Flash, the lack of support on mobile devices and the shift to HTML5 has forced me to adapt.

Fortunately there are a couple of technologies that can really assist developers to create HTML5 content and in my opinion drastically improve coding efficiency, bug reduction, as well as provide robust APIs.

The first of these is CreateJS, a collection of JavaScript libraries that provide APIs that cover tweening, preloading, drawing and sound. For Flash developers, some of these APIs should look familiar.

The second technology that I find very useful is TypeScript which is an extension of JavaScript. Personally, I think JavaScript is awful and painful when developing sizeable web applications. Everything about it seems extremely dated and the resulting code ugly and obfuscated. TypeScript on the other hand is based on the ECMAScript 6 proposal and should be more familiar to those with Java, C# and AS3 backgrounds. The best part is that TypeScript compiles down into nice, readable JavaScript that you can then continue to use on it’s own if you want.

Using these two technologies in tandem makes it an enjoyable experience to develop HTML5 content. As a fun example I have implemented Matthias Müller-Fischer’s Fast Water Simulation algorithm.

FizzX – Box2D level editor 0.1

After finding a bit of time I have fixed some glaring bugs and have now uploaded the first alpha version of my Box2D level editor called FizzX.

It’s an alpha so there are plenty of features missing and bugs, but I think it is at stage that you can build levels without too much drama :)


  • PanningArrow keys to pan in addition to holding down alt and dragging.
  • Rotating - Hold the left mouse button on a fixture edge, press and hold Q, and then drag to rotate.
  • Scale –  Hold the left mouse button down, press and hold T, and then drag to scale. (a bit buggy)
When incorporating images, it can be useful to pin them to prevent accidentally moving them once placed. Additionally, as images can block the selection of fixtures, a global lock images button will prevent all images from being selectable.


  • Add the remaining joint types.
  • Implement a preview window that can be scrolled.
  • Add zooming capabilities.
  • Select multiple fixtures to mass rotate and scale.
  • Add support for category bit masks.
  • Add support for Nape physics engine.
  • Release importers for Apple SpriteKit, LibGDX, OpenFL and more.
  • Improve GUI. May include porting over to LibGDX’s SceneUI.

Get FizzX 0.1

Box2D Visual Editor Preview #2

Thought I would give you all an update on the Box2D Visual Editor’s status.

What’s new:
• Import images for arranging and syncing with the level. This includes tools for rotating and scaling along the axis.
• Edge tool for creating edges instead of polygons. Existing polygons can easily be switched to edges as well.
• Added an option for exporting to JSON.
• Created an importer for Apple’s SpriteKit.
• Created a meta data tool for assisting when creating spawn points, triggers etc.
• Fixed the GUI so it is now fluid.
• Bug fixes and other general improvements.

Not too far off an alpha release either :)

Box2D Visual Editor Preview

So I have been getting back into some more Box2D development for a game I am building. To increase my efficiency I needed an editor to visually create the Box2D world by drawing the shapes and joints. I found a few editors already built but none met my needs of being free, allowing the creation of joints and other Box2D items , as well as being intuitive and easy to use. As such I set about creating a prototype for my own editor.

My goal was to get something up and running as quickly as possible and to implement features as I needed them. After a week of development I have created an editor that can already do a lot of lifting. Features working so far:

  • Create circle and rectangle fixtures
  • Draw custom polygons and edit the vertex positions
  • Drag and drop  fixtures to move them
  • Rotate and scale fixtures
  • Create revolute joints with all parameters able to be set
  • Export to XML
  • AS3 Importer

The GUI also features panning and a preview window.  The next goal will probably be to use the editor in assisting creating levels for Apple’s SpriteKit for iOS7.

If there is enough interest I may release the tool (only after a lot of things have been added and fixed).