Solomon Eseme A software developer who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend. Follow me: Twitter, Facebook, LinkedIn, about.me

Top 6 JavaScript and HTML5 game engines

8 min read 2454

Top 6 JavaScript and HTML5 Game Engines

I know what you’re thinking: why on earth would you use JavaScript to develop games? I thought the same thing when I first discovered that you could use JavaScript, as well as HTML5, to develop 3D games.

The truth is, since the introduction of the JavaScript WebGL API, modern browsers have intuitive capabilities that enable them to render more complex and sophisticated 2D and 3D graphics without relying on third-party plugins.

You could start your web game development journey with pure JavaScript, which is probably the best way to learn if you’re a beginner. But why reinvent the wheel when there are so many widely adopted game engines to choose from?

In this guide, we’ll explore the top six JS/HTML5 game engines, ranked by number of GitHub stars, and walk you through how to use them.

1. Three.js

Three.js is one of the most popular JavaScript libraries for creating and animating 3D computer graphics in a web browser using WebGL. It’s also a great tool for creating 3D games for web browsers.

Since Three.js is based on JavaScript, it’s relatively easy to add any interactivity between 3D objects and user interfaces, such as keyboard and mouse. This makes the library perfectly suitable for making 3D games on the web.

Pros

  • Easy to learn: The most important advantage of Three.js — aside from its ability to perform complex rendering very well — is that it’s very easy to get started with
  • Plenty of examples: Due to its popularity, there are countless examples to help you get started
  • Large community: Three.js has plenty of users and, therefore, a sizable community of developers working with and creating various third-party tools
  • Good documentation: Robust documentation is usually a great indicator of a strong library, and Three.js has excellent docs
  • Great performance: Three.js has a performance advantage over other libraries I have used
  • PBR rendering: Three.js has built-in PBR rendering, which makes rendering graphics more accurate

Cons

  • No rendering pipeline: This makes a lot of modern rendering techniques impossible/infeasible to implement with Three.js
  • Not a game engine: If you’re looking for features beyond rendering – you won’t find many here
  • Geared toward novices: Because the API caters to novices, many advanced features are hidden
  • Lack of support: There is no built-in support for spatial indexing, making exact raycasting, or frustum culling, and collision detection is hopelessly inefficient in complex scenarios

Three.js in action

If you’re looking to delve into creating simple or complex 3D objects on the web, Three.js is the go-to library. Its top advantages include a talented and vast community and an abundance of examples and resources.

Three.js is the first 3D animated library I worked with, and I’d recommend it for anyone starting out with game development.

Let’s create a simple rotating geometry to demonstrate what Three.js can do.

import * as THREE from 'js/three.module.js';

var camera, scene, renderer;
var geometry, material, mesh;

animate();

Create an init function to set up everything we need to run our demo animation with Three.js.

We made a custom demo for .
No really. Click here to check it out.

function init() {
  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

Next, create an animate function to animate the object with your desired motion type.

function animate() {
    init();
    requestAnimationFrame( animate );
    mesh.rotation.x += .01;
    mesh.rotation.y += .02;
    renderer.render( scene, camera );
}

The finished result should look like this:

Spinning Cube Demo Built With Three.js

2. PixiJS

If you’re looking for a JS library to create rich and interactive graphics with support for cross-platform applications, look no further than PixiJS. This HTML5 creation engine enables you to develop animations and games without prior knowledge of the WebGL API.

Pros

  • Fast performance: Just like Three.js, PixiJS is very fast
  • Multiplatform support: Also like Three.js, Pixi.js supports multiple platforms
  • Easy API: The API is easy for a beginner to understand
  • Support for WebGL and Canvas fallback: Pixi.js uses a WebGL renderer but also supports a Canvas fallback

Cons

  • Overly complex: In my experience, Three.js is much easier to get started with
  • Not a complete solution: Pixi.js proudly only support renderer

PixiJS in action

Pixi is a strong choice in most scenarios, especially if you’re creating performance-oriented 3D interactive graphics with device compatibility in mind. Pixi’s support for Canvas fallback in cases where WebGL fails is a particularly enticing feature.

Let’s build a simple demo to see PixiJS in action.

  npm install pixi.js
  import * as PIXI from 'pixijs'

  //or CDN
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js" ></script>

Create a script file and paste in the following.

import * as PIXI from 'pixi.js';

const app = new PIXI.Application();
document.body.appendChild(app.view);

app.loader.add('jumper', 'jumper.png').load((loader, resources) => {
    const bunny = new PIXI.Sprite(resources.bunny.texture);
    bunny.x = app.renderer.width / 2;
    bunny.y = app.renderer.height / 2;

    bunny.anchor.x = .5;
    bunny.anchor.y = .5;

    app.stage.addChild(bunny);

    app.ticker.add(() => {
        bunny.rotation += .01;
    });
});

The result should look something like this:

Pixi.js Demo

3. Phaser

Since Phaser is a cross-platform game engine, it enables you to create a single game and compile it to many platforms. For example, you might decide to compile your game to iOS Android and other native apps using third-party tools.

Pros

  • Structurally sound: Phaser is known to have a well-designed structure
  • TypeScript support: The library supports the use of TypeScript for game development
  • Focus on game development: Phaser primarily is a game development engine — and a good one at that
  • Plugins aplenty: Phaser supports a huge list of plugins
  • WebGL and Canvas support: Phaser supports WebGL and has Canvas enabled as a fallback

Cons

  • Build size: The build size of Phaser for desktop is quite massive
  • Poor support for mobile development: Creating native mobile apps requires using Cordova or some other third-party framework
  • State management: It can be somewhat difficult to get started with Phaser’s state manager

Phaser in action

Phaser is good for developing cross-platform game applications. Its support for a wide range of plugins and the large community of developers building games with Phaser makes it very easy to get started with the framework.

Let’s build a basic application with Phaser.

  npm install phaser@3.24.1
  //OR
<script src="//cdn.jsdelivr.net/npm/phaser@3.24.0/dist/phaser.min.js"> >/script>

Next, pass in some default configurations to your Phaser engine.

const config = {
  type: Phaser.Auto,
  width: 900,
  height: 700,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 200 },
    }
  },
  scene: {
    preload: preload,
    create: create
  }
};

const game = new Phaser.Game(config);

Create a preload function to load in your default static files.

function preload() {
  this.load.setBaseURL('http://labs.phaser.io');
  this.load.image('sky', 'assets/skies/space3.png')
  this.load.image('logo', 'assets/sprites/phaser3-logo.png');
  this.load.image('red', 'assets/particles/red.png');
}

Finally, define your create function to display your newly created game.

function create(){
    this.add.image(500, 500, 'sky');
    const particles = this.add.particles('red')
    const emitter = particles.createEmitter({
      speed: 100,
      scale: {start: 1, end: 0},
      blendeMode: 'ADD'
    });
    const logo = this.physics.add.image(400, 100, 'logo');
    logo.setVelocity(100, 200);
    logo.setBounce(1,1);
    logo.setCollideWorldBounds(true);
    emitter.setFollow(logo)
}

4. Babylon.js

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Pros

  • Playground: The Playground is a great tool for testing things out before going into full development — and it has great documentation to boot
  • Strong community support: Babylon developers are very helpful and active
  • Up-to-date codebase: The framework enjoys a frequently updated codebase and third-party tools are in active development
  • PBR rendering: Support for PBR rendering support is excellent
  • Vote of confidence: Babylon is used and supported by large brands such as Adobe, Microsoft, and more
  • Maintenance: Bugs are often ironed out quite quickly

Cons

  • Lack of maturity: Babylon was the first release in 2013, which makes it quite young compared to many of its competitors
  • Documentation: The engine lacks API documentation.
  • Not suitable for smaller projects

Babylon.js in action

Many large brands trust Babylon.js as their game development engine of choice. The Babylon Playground, a thriving hub of code samples, is a great tool to help you get started with the framework.

Babylon and its modules are published on npm.

  npm install babylonjs --save

  // TO USE

  import * as BABYLON from 'babylonjs'

  // OR

  import { Scene, Engine } from 'babylonjs'

Create an index.html file and paste the following.

  <script src="https://cdn.babylonjs.com/babylon.js"></script>
  <canvas id="renderCanvas"></canvas>
  <script src="script.js"></script>

Next, create a script.js file and include the following code.

  const { createScene } = require('scene.js')

  window.addEventListener('DOMContentLoaded', function(){
      const canvas = document.getElementById('renderCanvas');
      const engine = new BABYLON.Engine(canvas, true);
      const scene = createScene();
      engine.runRenderLoop(function(){
          scene.render();
      });
      window.addEventListener('resize', function(){
          engine.resize();
      });
  });

Create a scene.js file and paste in:

export function(){
    const scene = new BABYLON.Scene(engine);
    const camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 5,-10), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, false);
    const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0,1,0), scene);
    const sphere = BABYLON.Mesh.CreateSphere('sphere', 16, 2, scene);
    sphere.position.y = 1;
    const ground = BABYLON.Mesh.CreateGround('ground', 6, 6, 2, scene);
    return scene;
}

Below is a preview of what your animation should look like.

Babylon.js Demo

5. Matter.js

Matter.js is a JavaScript 2D, rigid-body physics engine for the web. Even though it’s a JavaScript physics engine, you can combine it with various packages and plugin to create interesting web games.

Pros

  • Exciting features: Matter.js offers numerous features, such as rigid, compound, and composite bodies; stable stacking and resting; conservation of motion; and many more

Cons

  • No CCD: Matter.js’s lack of continuous collision detection (CCD) causes an issue where fast-moving objects pass through other objects

Matter.js in action

In my opinion, Matter.js is the best library for creating simple, moving animation objects. Matter.js is a physics library and focuses more on 2D objects. However, you can combine it with third-party solutions to create dynamic games.

Install Matter.js with npm or yarn.

npm install matter-js
//OR
yarn add matter-js

The following is a minimal example using the built-in renderer and runner to get you started.

// module aliases
const Engine = Matter.Engine;
const Render = Matter.Render;
const World = Matter.World;
const Bodies = Matter.Bodies;

// create an engine
const engine = Engine.create();

// create a renderer
const render = Render.create({
    element: document.body,
    engine: engine
});

// create two boxes and a ground
const boxA = Bodies.rectangle(300, 300, 70, 70);
const boxB = Bodies.rectangle(400, 10, 60, 60);
const ground = Bodies.rectangle(300, 510, 910, 40, { isStatic: true });

// add all of the bodies to the world
World.add(engine.world, [boxA, boxB, ground]);

// run the engine
Engine.run(engine);

// run the renderer
Render.run(render);

Include the above script in a page that has Matter.js installed and then open the page in your browser. Make sure the script is at the bottom of the page (or called on the window load event, or after DOM is ready).

You should see two rectangular bodies fall and then hit each other as they land on the ground. If you don’t, check the browser console to see if there are any errors.

6. PlayCanvas WebGL Game Engine

PlayCanvas uses HTML5 and WebGL to run games and other interactive 3D content in any mobile or desktop browser. Though it’s free and open-sourced, PlayCanvas focuses more on the game engine instead of the rendering engine. Therefore, it’s more suitable for creating 3D games that use WebGL and HTML5 Canvas.

Pros

  • Game engine: The primary focus of PlayCanvas is its game development engine
  • Open-source: PlayCanvas is an open-source tool for powerful game development
  • Mobile-optimized: The game development platform is mobile-first
  • Zero compile time: The engine’s zero compiled time naturally makes the process faster
  • Asset pipeline: PlayCanvas uses best practices to allow you to decide how your content is delivered and in what form
  • Integrated physics engine: You can integrate physics into your game rather easily using the powerful bullet physics engine ammo.js
  • Hot reloading: You don’t have to reload your browser each time you make changes
  • Rendering engines only on browsers: PlayCanvas has advanced WebGL features that run only on browsers

Cons

  • Private projects paywalled: The free tier does not support private projects, so all code and assets are hosted publicly
  • Collision offset: There is no collision offset
  • Lack of examples: Tutorials for PlayCanvas are few and far between

PlayCanvas in action

PlayCanvas is great for creating small public projects or school projects — at least, that’s what I’ve used it for. If you need more features and more control over your game development, you might want to consider subscribing for premium features.

<script src='https://code.playcanvas.com/playcanvas-stable.min.js'>

Create an index.html file and add the following code.

    <canvas id='canvas'></canvas>
    <script src='/script.js'>

Next, create a script.js file and paste in the following.

  const canvas = document.getElementById('canvas');
  const app = new pc.Application(canvas);

  window.addEventListener('resize', () => app.resizeCanvas());

  const box = new pc.Entity('cube');
  box.addComponent('model', {
      type: 'box'
  });
  app.root.addChild(box);

To create the camera and light for the object:

  const camera = new pc.Entity('camera');
  camera.addComponent('camera', {
      clearColor: new pc.Color(.1, .1, .1)
  });
  app.root.addChild(camera);
  camera.setPosition(0, 0, 3);

  const light = new pc.Entity('light');
  light.addComponent('light');
  app.root.addChild(light);
  light.setEulerAngles(46, 0, 0);

  app.on('update', dt => box.rotate(10 * dt, 20 * dt, 30 * dt));

  app.start();

The code above should produce the following result.

Spinning Cube Demo Built With PlayCanvas

Final thoughts

By breaking down the pros, cons, and use cases associated with each JS/HTML5 game engine listed above, I hope you gained some insight into which one is best suited to the type of game or animation you’re looking to create.

In most cases, I would recommend using Three.js, especially if you’re looking for more or a rendering engine than a game engine. Due to its popularity in the developer ecosystem, it’ll be easy to find ample resources to help get you up and running.

If your focus is more on game development, I would suggest Babylon.js because of its simplicity. Babylon also has an updated codebase and active third-party development, and the playground feature is a great tool for testing. PlayCanvas is a solid backup option — it’s primarily a game engine and you can use it to build complex 3D games.

What game engine do you use in your game development projects? Let us know in the comments!

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

    Which of these topics are you most interested in?
    ReactVueAngularNew frameworks
    Do you spend a lot of time reproducing errors in your apps?
    YesNo
    Which, if any, do you think would help you reproduce errors more effectively?
    A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
    Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

    : Debug JavaScript errors easier by understanding the context

    Debugging code is always a tedious task. But the more you understand your errors the easier it is to fix them.

    LogRocket allows you to understand these errors in new and unique ways. Our frontend monitoring solution tracks user engagement with your JavaScript frontends to give you the ability to find out exactly what the user did that led to an error.

    LogRocket records console logs, page load times, stacktraces, slow network requests/responses with headers + bodies, browser metadata, and custom logs. Understanding the impact of your JavaScript code will never be easier!

    .
    Solomon Eseme A software developer who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend. Follow me: Twitter, Facebook, LinkedIn, about.me

    5 Replies to “Top 6 JavaScript and HTML5 game engines”

    1. Nice!

      Check out the lib I made. It combines Phaser and Three.js and adds 3D physics to it.

      (I plan to support PixiJS as well in the future.)

      It is called enable3d.io 🙂

    2. I’ve used Isogenic Game Engine (IGE) a few times.
      It’s a 2.5d engine with scenegraph-based rendering pipeline and a ton of other features.
      Free and open source irrelon/ige on github

    3. First you say
      “Since Three.js is based on JavaScript, it’s relatively easy to add any interactivity between 3D objects and user interfaces, such as keyboard and mouse. This makes the library perfectly suitable for making 3D games on the web.”

      Then you say
      “Cons – Not a game engine: If you’re looking for features beyond rendering – you won’t find many here”

      Which is it then lol

    Leave a Reply