Today you can make a toy in any language, and JS is no exception. Game development is inherently difficult – we’ll tell you where to start.

Why JavaScript?

A lot of people think that all cool games (God Of War, Assassin’s Creed, Skyrim, add to your liking) are made in C++. This is partly true. Hundreds of specialists from different industries are involved in the project, including developers who use another language – it’s a common practice.

Some cool games are written in “unpopular” programming languages, and that’s okay. If you’re working with JavaScript, you don’t need to rush to learn the pros after this article, stay with JavaScript.

There are Unity, Unreal Engine, CryEngine and other cool solutions for creating toys, and if you’re comfortable having fun with them, you’re welcome. So it doesn’t make any difference what you code on, but in our case we’re going to talk about JS frameworks.

Basics

Before we move on to the consideration of frameworks for creating games, we should study the existing technologies. One of the options is HTML5. Since version 5 of the specification, HTML has introduced the

Not to be forgotten is the creation of the Khronos Group team. WebGL is a web version of the OpenGL ES specification that allows developers to communicate with the graphics card through the browser (trust me, it’s better to not know how it works).

So you can create 2D and 3D scenes on the GPU (which is more efficient than on the CPU). Super! But if you look at the JavaScript code that uses these technologies, you’re going to get sick.

So let’s look at the frameworks that keep us away from canvas and abstract us away from WebGL.

2D Frameworks

PixiJS

This tool can be called a 2D renderer of WebGL. This means that this library includes a lot of functions designed to render 2D scenes and objects efficiently. This makes it easier to focus on creating program code, and leave the hardcore “low-level” stuff to PixiJS developers.

It’s not a full-fledged framework, but it does its job so well that many game JS frameworks use it as a rendering engine.

If you plan to create something more than animation, look for additional libraries for other parts of game development (physics, scaling, tilemaps, etc).

ExcaliburJS

Here we have a full game framework written in Typescript. Full scene and camera system, sprites and animations, sounds, physics, etc. – whatever you want. Many people really like the API provided by ExcaliburJS as it is cozier with it.

This is because the creators of the product are from the web world (some are web developers, others are DevOps), so most of the patterns and approaches are things that are already popular in web development. If you’re close to web development, give this tool a try.

ImpactJS

ImpactJS started its journey with the title of “The First Framework for Web Games.” Most of the frameworks reviewed earlier were just experiments and not a commercial product. This optensource contender is distributed for free and comes with a good level editor.

The framework is not the most well understood or documented, but its reliability has already been proven. For example, the developers at CrossCode have adopted a forked version of Impact for their engine for its performance and ability to scale to a specific task.

CreateJS

CreateJS is a set of modular libraries and HTML5 tools that work asynchronously or in parallel, depending on the situation.

The tool provides everything you need to create a game from scratch with a separate JavaScript module. For example, you can take PixiJS for rendering, and SoundJS for working with sound materials, etc.

PhaserJS

And lastly, the most popular one is PhaserJS. It is a powerful set of tools for creating web and mobile games. This framework has a huge and active community – every week these guys post many new articles, demos and tutorials based on PhaserJS. This provides a great help for people taking their first steps in gamemade and need guidance. Also, as of version 3, it’s one of the most productive game frameworks out there.

3D Frameworks

ThreeJS

ThreeJs is the most popular 3D library. It offers sets of functions to perform common operations that need to happen in a 3D scene. All activities happen at a higher level than raw WebGL, and you don’t have to bother with a mountain of low-level actions.

BabylonJS

This framework is similar to the previous one, but there are differences:

  • The API changes every 3 months, which helps when searching for old solutions on the web;
  • an active and helpful community;
  • The playground is a great tool for quickly “trying out” code, explaining a problem, and providing help.
By Blog