Web browsers have come a long way over the last two decades. The introduction of continually improving web standards and developers who implement them in a variety of browsers now allows us to do things directly inside browsers that were either not possible or very hard to achieve earlier.
When combined with all the features and processing power that now come with modern smartphones and computers, it is now possible for us to create games that can run directly inside a user's browser. While browser-based games still can't compete head-on with natively developed games, we can run moderately complex games in a browser without requiring any installation.
Developing a game is a huge task, but luckily there are a lot of JavaScript-based game engines and libraries around to help you cover the basics without needing to implement common features like collision detection yourself. In this tutorial, we will introduce you to some of the best free and open-source JavaScript game engines and libraries that you can use in your own projects.
PixiJS
PixiJS is one of the most popular libraries out there that you can use to create stunning graphics for your games. The library uses WebGL for rendering and automatically falls back to canvas on older platforms, so you don't have to worry about anything. There are enough features in the library to make a compelling argument that you should give it at least one try.
The following CodePen demo by Omar Shehata shows how you can create this smoky effect using PixiJS.
With PixiJS, you have support for sprite sheets with features that include trimming and rotational packing. There is also an asset loader to help you load and manage things like graphics, fonts, and animation data. The multi-touch input and tracking allows you to implement user interactions like panning and pinch-to-scale.
The library also offers a variety of WebGL filters, tinting, and blend modes, as well as advanced text rendering to help you deliver a high-quality visual experience.
One of the easiest ways to learn more about the library and find out what it has to offer is to go through the long list of examples that demonstrate its capabilities.
Phaser
Phaser is yet another library that you can use to quickly create HTML5-based games for mobiles as well as desktop browsers. There are a lot of similarities as well as some differences in terms of the offered features. For example, Phaser also allows you to render graphics using WebGL and canvas.
The following CodePen demo by Aaron Buchanan shows how you can implement the core functionality of the popular Fruit Ninja game in Phaser.
The core framework of the library is free for commercial use, but you can get extra features and functionality using paid plugins. You can develop your own games either in JavaScript or TypeScript.
Phaser has a lot of interesting features, such as advanced multi-camera support. This basically allows you to create extra cameras that can be placed anywhere on the screen. The cameras are scrollable and come with effects like shake, flash, and fade.
Images, sounds, sprite sheets and other assets can be loaded into the game and managed easily with the help of a built-in preloader in the library.
One of the things that you will like about Phaser is that it was created with mobile in mind. This basically means that the developers took extra care that any feature they add to the core library performs well on mobile devices.
Stage.js
The Stage.js library is ideal for people who want to develop simple 2D games that won't need complicated features. The games are rendered using the canvas element in HTML5.
Here is an implementation of a simple Tic-Tac-Toe game by creotip using stage.js. You can find some more advanced examples on the website's homepage.
While the HTML5 canvas element can be used to create graphics and animations, it has some limitations that make game development a little more difficult. The Stage.js library gets around this limitation by implementing its own DOM like structure for the elements that you draw on canvas. It also handles and properly propagates different mouse and touch events across different objects for you.
The library comes with a built-in game loop as well as other features that you need to quickly create basic 2D games. This includes manipulating the size, position and transparency of different elements as well as listening to and handling different mouse and touch events.
MelonJS
MelonJS is a free JavaScript-based game engine that is easy to learn and powerful enough to create simple platformer games. It is a lightweight and dependency-free gaming library, so there is no need to load anything else to make it work. All you need is a capable HTML5 browser.
MelonJS uses a WebGL renderer with canvas fallback just like our first two libraries. It comes with its own lightweight physics implementation to ensure low CPU requirements. It also offers support for sprite sheets and textures along with animation management.
You have access to mouse and touch events as well as system and bitmap fonts. Detection of device motion, orientation, and accelerometer is also supported.
Once you have developed your game, you can use Cordova to turn it into a hybrid mobile app. The game engine also provides native integration for many other third-party plugins.
Babylon.js
The libraries and engines that we have discussed so far are all meant for creating 2D games. What if you are looking for a rendering engine that will help you create 3D games? Babylon.js is going to be a great help in that case.
Here is a simple forest created using the Babylon.js library by Pavel Starý. You can move around in it by pressing the arrow keys.
There are a lot of features in the rendering engine that make it worth a try. There are a lot of editors to help you save time and create basic effects. This includes a particle editor to quickly create and configure particle systems, as well as a node material editor.
The library offers a lot of special effects like fog, depth of field, lens flares, and sharpening. There is also a lot of optimization involving hardware-accelerated instances along with offscreen canvases, etc.
Three.js
The name of the popular Three.js library is bound to come up whenever we are discussing anything related to 3D graphics or visualizations in the browser. It is a very general-purpose 3D rendering library that you can use for a lot of things. This means that it can also be used to render graphics for your 3D games as well.
Here is a CodePen demo by Lisa Kobrazova that creates a Saturn-like planet using Three.js to show what you can do with the library.
The library offers support for scenes, animations, cameras, and objects. You can also add light to a scene while making it appear ambient, directional, or coming from a point. Similarly, you can create a variety of geometrical shapes such as a cube, sphere, torus, and 3D text.
The Three.js library has a huge active community to help you along the way during your learning process. The detailed documentation and this examples page can help you learn and explore what you can do with the library.
Matter.js
Now that we have talked about full-fledged 2D gaming libraries and 3D render engines, it is time to include some physics engines in the discussion as well.
Matter.js is a feature-rich physics engine for 2D rigid bodies that you can incorporate in your games. You can use it to go beyond basic collision detection in any 2D games that you develop. It allows you to specify values for physical properties like mass and density for different objects.
Here is an example I created to show you how Matter.js can be used to apply forces on any rigid body.
There are a lot of things that you can simulate with the library like gravity, friction, and elastic or inelastic collisions. I've also written a series of tutorials on this topic to help you get started with Matter.js.
Cannon.js
The Cannon.js library is a lightweight 3D physics engine for the web. This physics engine comes with a variety of features like collision detection, support for different body shapes, and friction, as well as constraints like hinges.
These capabilities of the physics engine can be combined with a 3D rendering library like Three.js to create some 3D games like the popular stack game shown in the CodePen below, created by Hunor Marton Borbely.
You can also use some other alternative 3D physics engines like Oimo.js, depending on how you would like to develop different features in a game. The Oimo.js library feels similar to Matter.js in some aspects, so learning it might be a bit easier if you already have some experience with Matter.js. It is also relatively new in comparison to Cannon.js.
Final Thoughts
It is exciting to think that we have come so far in terms of web development that it is possible to create and run games inside browsers. However, you should remember that game development is a very demanding task, even with all these advancements and libraries to help you out. This is especially true for 3D games.
My advice for you would be to start small and learn about the different aspects and features of these gaming engines and libraries before diving straight into a big project. This will prevent you from getting overwhelmed and discouraged, while learning new things along the way.
