Our 2D HTML5 Javascript Game Engine

Alongside the game projects we’re working on, we’re currently developing a brand new HTML5/Javascript game engine. The goal was to provide an easy to use framework that includes many high level game specific features and components (accessible with minimal code). It allows us to rapidly prototype and efficiently build mobile web games that just work across all modern browsers.

What started off as an AS3 project for Flash/Adobe Air games has now been ported to Javascript for HTML5 projects. We’re currently working towards a 1.0 release ready version. At the moment we’re using it for all our HTML5 game projects, although it’s still getting some fairly extensive feature changes/additions on a regular basis.

We decided to create our own because most existing Javascript/HTML5 game frameworks are:

  • Bloated with features we’ll never use, whilst missing a load of features we do want/need. Making massive changes/additions to someone else’s code base to get what we want just didn’t seem that appealing.
  • Do things in a way we know is sub-optimal or inefficient.
  • Put together in a way that you’re forced to follow someone else’s way to work. We wanted something more suited to our workflow.

Quite frankly, we knew we could do much better.

We’re still unsure what we’re going to do with it in future. At the moment it’s purely for internal use on our own projects. But we haven’t ruled out allowing other developers to use it, or even open sourcing it at a later date. This is all dependent on how much interest we get. So if you think you might be interested in using some of the advanced features listed below for your own games, we’d love to hear from you. Please send us a message using the contact form at the bottom of the page.

Just some of the features built into the current version

Modular, component based architecture

The built in component system allows adding just the features you need to game objects via built-in components, such as game object states, collision detection and more. It’s easy to plug-in new components to either an object type (to affect all new game objects of that type), or individual game objects, with a single line of code. You can also easily write your own new components, to provide any extra features you need and plug those into your game objects in the same way.

Purely logic based game states

Allows setup of truly flexible state code (with easy to setup “activate”, “deactivate” and “logic” functions). States aren’t directly attached to on screen “scenes”, objects or assets. So this gives you full control over how you manage objects and prevents problems like unnecessary garbage collection.

Use case

This makes it easy to have states within states and split your code up into more manageable chunks. For instance, you could control an inventory overlay window from an “Inventory” state. The activate function displays the inventory window. The deactivate function hides the window. The logic function includes any loop code (instead of running the main loop in the gameplay state logic function, so auto-pausing). This also means that when you re-activate the main gameplay state, everything is still there and continues running where you left off.

Fast, lightweight publish/subscribe events system

The built in events system allows for easy decoupling of code. It’s designed (unlike other systems such as signals) so that listening object(s) never need know about, or have a reference to the object(s) firing any given event.

Also includes a whole raft of built-in auto-fired, system events. E.g. viewport changes, input events (including key/button presses and bound input actions), and a whole lot more.

Easy to set up asset preloader

Built in asset loading includes a visual preloader. Just provide a list of asset files and define your loading screen objects. Then define how you want to show the progress in just a few lines of code.

Advanced sprite sheet animation

Including animations defined and playable by string IDs. Allows using tools such as Adobe Animate to setup and preview animations. Then quickly and easily export directly into your project. Use fast WebGL rendering supported in most modern browsers.

Advanced collision detection

Built in, fast, efficient and easy to use collision detection. Includes multiple hit zones per sprite, which you can specify on a per frame basis. You can combine any number of AABB or circle hit zones to form a single collider, then apply that to a single frame or range of frames. It’s also much faster and eliminates the need for pixel perfect collision detection.

Use case

This makes it super easy to solve problems like “How do I check if this character’s fist hits this other character’s head in the last two frames of his punch animation, whilst also not allowing a hit while the second character is blocking?” Set it up, in two lines of code, forget about it, then check the collision with another single line of code (regardless of what state each character is in at the time).

Advanced GUI elements

Including regular buttons as well as easy to set up function specific elements, such as toggle, continuous repeat button, sound mute button, pause button, fullscreen button and invisible click area. All built in GUI elements can be setup easily with one line of code.

Advanced input handler

Includes keyboard, gamepad, mouse and touch screen support. You can bind any number of inputs across multiple input devices to named actions, then check those actions. It also supports binding digital or analogue inputs and returned action values can be unidirectional or bidirectional.

Use case

In practice this makes it super easy to do things like moving a character, with multiple input devices. Just bind a “MoveX” action to positive and negative keyboard keys, gamepad analogue stick and mouse/touchscreen or virtual D-Pad GUI buttons. Then add the “MoveX” value to the player character x coordinate in a single line of code. It also makes it super simple to create a control setup menu within your game, just change the bindings at run-time.

Tween engine

Easy to use, flexible tween engine built in, for transitions and animations.

Full sound support

Advanced sound support across all devices via the Web Audio API.

Touch screen pseudo rollovers

Easily setup finger rollovers on a per button basis, that mirror the mouse rollover. Just activate this feature with one line of code.

Use case

This is useful in games such as point and click adventures. If you want to give hints/action names/object names on a rollover, you have no easy way to mirror a mouse rollover (without a click) on touch screens. Pseudo rollovers make this easy.

Tile based level map support

The engine supports tile maps via Tiled editor, including collision layers.

Advanced, easy to customise viewport

Includes pseudo full screen mode and rotation locking on mobile, viewport cropping, multiple scale modes and aspect ratio expanding. Access to desktop full screen mode is also built in. Add a full screen button with a single line of code. Easily do responsive positioning of elements. Plus everything is easy to set up on a per device/platform basis.

Visual debug overlay

Includes actual frame rate, detailed mouse and touch screen pointer readout, GUI click areas and collision zones. It’s super easy to activate on game creation. Just set a flag, no more code required.

Server-side scoreboards and Facebook games integration

Easily and quickly set-up server side scoreboards and the Facebook games API for social scoring. You can also use in-built social features to easily set up URL sharing.

Comprehensive device and browser detection

Easily query the user’s device spec, browser spec and more.

Critical value memory encryption

Easily encrypt values such as scores and time limits in memory. Helps prevent cheating with programs such as Cheat Engine.

Google Analytics

Easy to setup Google Analytics game state and custom event tracking.

Want to Use It?

We’re currently using it in all our current HTML5 game projects.

Our engine isn’t available to the public yet and we’re currently unsure as to whether that will happen in future, but please feel free to register your interest by using the contact form below:

Your Name (required)

Your Email (required)

Please leave this field empty.

Your Message