Our 2D HTML5 Game Engine

Alongside the game projects we’re working on, we’re currently developing a brand new HTML5/Javascript game engine. The goal is to make an easy to use engine that provides many high level game specific features and components (accessible with minimal code), to allow rapid prototyping and fast and efficient full game development that suits our workflow and just works across all modern browsers.

What started off as an AS3 project for Flash/Adobe Air has now been ported to Javascript for web based HTML5 games and is currently in active development, working towards a potential 1.0 release version. At the moment it’s actively being used internally for all our HTML5 game projects, although it’s still undergoing some fairly extensive feature changes/additions on a regular basis.

It’s still undecided 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 the possibility of 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 taking advantage of some of the advanced features listed below for your own HTML5 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 of our HTML5 game engine

Modular, component based architecture

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

Purely logic based game states

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

Use case

This makes it easy to effectively have states within states and split your code up into more manageable chunks. For instance an inventory overlay window could be controlled from an “Inventory” state who’s activate function shows the inventory window (over the game), deactivate function hides the window and logic function provides any functionality (instead of running the main game loop in the game state logic function, so auto-pausing the game). This means that when you re-activate the game 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 and is designed (unlike other systems such as signals) so that listening object(s) never need know about the existence or have a reference to the object(s) firing any given event.

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

Easily configurable assets preloader

Assets loading and visual preloader functionality is built in. Just provide a list of asset files and define your loading screen objects and how you want to represent the progress and you’re done in a few lines of code.

Advanced sprite sheet animation

Including animations configurable 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 game.

Advanced collision detection

Built in, fast, efficient and easy to use collision detection includes multiple hit zones per sprite, configurable on a per frame basis. AABB and circle hit zones are currently supported and you can combine any number to form a single hit zone and apply that to a single frame or range of frames. Plus it’s much faster and completely 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 and check the collision with another single line of code (regardless of what state each character is in at the time).

Advanced interactive GUI elements

Including regular buttons as well as incredibly 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 for easy setup with one line of code.

Advanced input handler

Includes keyboard, gamepad, mouse and touch screen support and binding any number of inputs across multiple input devices to easily checkable named actions. Supports binding digital or analogue inputs and allows returned action values to be unidirectional or bidirectional.

Use case

In practice this makes it super easy to do things like character movements across multiple input devices, just bind a “MoveX” action to positive and negative keyboard keys (including multiple alternatives), 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 configuration menu within your game by just dynamically changing the bindings.

Tween engine

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

Full sound support

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

Touch screen pseudo rollovers

Easily setup finger rollover functionality on a per button/interactive element basis, that mirrors the mouse rollover functionality. Activate this function with just one line of code.

Use case

This is incredibly useful in scenarios such as point and click adventure games, where you want to provide hints/action names/object names on a rollover, but ordinarily have no easy way to mirror a mouse rollover (without a click) on touch screens.

Tile based level map support

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

Advanced, fully customisable viewport

Including pseudo fullscreening and rotation locking on mobile, viewport cropping, multiple scale modes and aspect ratio expanding, built in access to desktop fullscreen mode (add a fullscreen button with a single line of code), easy responsive positioning, and more, all easily configurable 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, all easily activated 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 Facebook games integration for social scoring. Plus use in-built social functionality to easily set up game URL sharing.

Comprehensive device and browser detection

Easily query the users device spec, browser spec and more.

Critical value memory encryption

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

Google Analytics

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

Want to use our game engine?

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

The engine isn’t available publicly yet and we’re currently undecided 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