Euge.js Javascript 2D HTML5 Game Engine
Alongside the video game projects we're working on, we're currently developing a brand new 2D HTML5/Javascript cross-platform web game engine. The goal is 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 2D web games that just work across all modern browsers on a huge range of devices (from desktop computers to iOS and Android smartphones and tablets).
What started off as an AS3 project for Flash/Adobe Air games has now been ported (and extensively expanded) to Javascript for developing HTML5 games. We're currently working towards a 1.0 release ready version. At the moment we're using it for all our HTML5 game development projects, although it's still getting some fairly extensive feature changes/additions on a regular basis.
We decided to create our own game engine 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 extensive changes/additions to someone else's code base to get what we want, while still having to somewhat align with their particular way to doing things, 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 of working. We wanted something more flexible and suited to our workflow.
Quite frankly, we knew we could do much better and more to the point, make it much easier to use. All the heavy lifting is done internally, so we don't end up duplicating and having to maintain too much generic code across projects.
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
2D WebGL rendering with 2D canvas fallback
Automatically detects browser capability and uses WebGL or 2D canvas rendering, where WebGL isn't supported. There's also a built-in on-screen error message that's displayed in browsers that don't meet the minimum HTML5 requirements. So you don't just get a blank screen on old browsers.
Written in pure Javascript, lightweight, optimised for speed
All code is written in pure javascript (not relying on cross-browser libraries such as jQuery) to allow optimisation for maximum performance and keeping it as lightweight as possible.
It's designed to give the performance required for games across a wide range of devices and we're constantly testing and optimising code to make it even faster.
Tried and tested
It's currently being used in production of all our HTML5 game projects and is currently powering the live HTML5 games we've produced over the last few years.
It's been thoroughly testing and just works across all the major browsers, including desktop I.E. 9+, MS Edge, Safari, Firefox, Google Chrome, Opera, iOS Safari, Android stock browser & Chrome and Amazon Silk browser on Kindle Fire. So you can be sure your game will work across a huge range of devices.
High-level, easy-to-use, game specific features with minimal code
One of our main objectives is to make creating games as easy as possible. A beginner with basic Javascript programming knowledge could easily put together a complete game in under a thousand lines of code.
Although you're free to write game code at a lower level, there's a vast range of easy-to-use game specific features built in. You don't need to reinvent the wheel.
Many common game specific functions can be written with a single line of code, where most other engines require many. This keeps your game specific code footprint down, making it easier to write and maintain. This allows you to concentrate on what matters, making a great game.
Total flexibility
It's not tied to a specific type of game, in fact we've already used it to make many hugely varied games. It's more than capable of handling games in any genre you can think of, including, card games, grid based puzzle games, point-and-click adventure games, strategy games, side-scrolling platform games, fighting games, top down action games, isometric games, digital board games, RPGs and more.
It also comes with options for upscaling retro 8-bit style pixel art on game setup.
Optional 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.
You can use just standard inheritance, any combination of inheritance and components, or even a full ECS architecture. It's totally flexible and entirely up to the developer how they organise their code.
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, prevents problems like unnecessary garbage collection and helps with keeping logic separate from rendering.
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.
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, circle or polygon hitboxes 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 adventure games. 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
Built-in support for tile maps via the Tiled level editor, including collision layers.
Advanced game camera system
Game camera system allows multiple cameras and includes built-in, easily configurable support for multilayer parallax scrolling.
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.
Built-in support for DOM layers
Add DOM elements directly over your game viewport. Avoid the need for messy HTML pages and CSS files by dynamically creating any game DOM elements in your code.
DOM auto-scaling
DOM layers can auto-scale with your game. This takes all the headaches out of scaling up DOM elements that you overlay onto the HTML5 canvas (such as high score submission forms). All DOM elements seamlessly scale with your game viewport, so you'd be hard pressed to notice they are separate from the HTML5 canvas elements.
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 and configure on game creation. Just set a flag (or flags, if you want to specify which debug windows to display), 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 built-in.
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 using the contact form below:
