Create a video game in JavaScript – part 1

wow-warlords-of-draenor-screenshot_1920
Since the advent of JavaScript thanks to HTML 5 and ES6, JavaScript is now used to design servers, manage entire web applications. Creating a video game in JavaScript is even now possible, but is it really possible to design one with this language?

In this series of articles dedicated to the design of video games in JavaScript, we are going to see together everything that is possible to do and all the tools that are at our disposal to design complete games. For now, we will take stock of the JavaScript frameworks for creating them and then we will discuss their advantages and disadvantages.

CONTENTS

 

How does it work ?

How is it that today it is possible to create a video game in JavaScript while a few years ago, web browser video games were reserved for Flash only?
It all started with the arrival of HTML5 and one and only one tag: . This tag, at first glance classic, actually embeds a whole native JavaScript API allowing you to use this tag to draw shapes. Indeed, by retrieving the context of the canvas from the DOM like this:

const ctx = document.getElementById("canvas").getContext("2d");

This “context” object can then be used to draw lines, squares, circles, display images, and even display the content of another canvas as an image. Here are some examples of what it is possible to do natively

// Dessiner une simple ligne
ctx.lineWidth = 20; // Epaisseur des formes
ctx.strokeStyle = "red"; // Couleur du contour
ctx.fillStyle = "rgba(50, 230, 100, 0.5)"; // Couleur du contenu
// On démarre un nouveau chemin
ctx.beginPath();
 ctx.moveTo(0, 0); // On déplace le curseur à la position x à 0 et y à 0
 ctx.lineTo(150, 0); // On dessine une ligne qui part du curseur jusqu'à la position x à 10 et y à 0
 ctx.stroke(); // On dessine le contour du chemin que nous avons créé (ici, une ligne)
ctx.closePath();
// Dessiner un rectangle
ctx.strokeRect(50, 50, 100, 100) // on dessine un rectangle partant de la position x à 50 et y à 50, d'une largeur de 100px et une hauteur de 100px
ctx.lineWidth = 2;
ctx.beginPath();
 ctx.rect(20, 20, 150, 150);
 ctx.fill();
 ctx.stroke();
ctx.closePath();

You can see the rendering in Clicking this link (jsfiddle).
Ok, that's all well and good, but how can we create video games from squares and rectangles?
The magic works thanks to two concepts in particular:

  • Image management. Indeed, in a 2D game, almost everything you see on the screen will be neither more nor less than partial or full image overlays.
  • The global loop. The global loop represents the refresh rate of the game because for the game to be fluid, the loop will call on update and image display functions to simulate, for example, a movement. It is moreover thanks to the speed that the loop takes to end that we determine the FPS (Frame Per Seconds / Images Per Seconds): to reach 60 FPS, the loop must not take more than 16ms.

Of course, these two concepts are not the only ones and are not easy to implement. Fortunately, there are already many JavaScript frameworks that take care of all these concepts, allowing us to focus on the gameplay.
 

Frameworks for 2D games

crosscode_shizuka___a_new_perspective_by_bostl-d8tfvmw
What follows is a list of the most popular JavaScript frameworks. The advantages and disadvantages that we are going to discuss come from my feedback on them. I therefore invite you to form your own opinion on these frameworks 🙂
 

Phaser.io

TL;DR: The most well-known JavaScript framework. Free, powerful, with a multitude of features and just as many plugins, and a huge community. It has everything you need to design any type of game. But in my opinion, it leaves a strange feeling of being a "catch-all" framework.

Description: Phaser.io has established itself as the largest and most famous JavaScript gaming framework. With its huge community and its endless list of plugins, it has everything a developer needs to design his game in good conditions. On the other hand, if there is one thing I can fault this framework for, is its “catch-all” side: for the overall management of the canvas, Phaser has its own algorithm, but it also has a light version of PIXI ; for physics, Phaser has 3 types of physics from three different libraries. Of course, it is better to make your choice and avoid integrating all the physics or loop algorithm provided by the API.
What makes <span style="font-family: 'arial black', 'avant garde';">inlingua</span> different

  • Its community and plug-ins
  • Performances

The -

  • Its “catch-all” side
  • The game, once minified, remains quite heavy

The website: http://phaser.io/

ImpactJS

TL;DR: Impact JS is, in my opinion, the best JavaScript game framework. Everything is incredibly simple and efficient. Unfortunately, since it hasn't been updated for almost two years, it can no longer compete with the market leaders.

Description: Oh dear, what about this framework? That it was made by a single person during his thesis in Computer Science or that it is extremely easy to learn and allows you to discover the joys of video game mechanics? With its own level editor in WYSIWYG (What You See Is What You Get) and its very large active community with very interesting plugins, this library was perfect for beginner developers as well as for experts. Of course, all is not so rosy. When we see that it costs 1$00 while it hasn't been up to date for a few years now, that the community hardly exists anymore and that the plug-ins are no longer available on the Internet, we can only be sad. Despite everything, very very good games have been released thanks to this framework, which we will see at the end of this article.
What makes <span style="font-family: 'arial black', 'avant garde';">inlingua</span> different

  • The easiest framework to learn
  • A very effective level editor
  • Very interesting plug-ins and good tutorials

The -

  • His price (100 $)
  • Not up to date for 2 years
  • Community disappeared and plug-ins almost impossible to find (the site that hosted them has closed)
  • In terms of performance, this framework is suitable for mini-games

Website: http://impactjs.com/
 

PandaJS

TL;DR: Panda JS is a framework heavily inspired, initially, by Impact JS, and then by the various features offered by Phaser.io . PandaJS could almost be considered a free version of ImpactJS , but like ImpactJS, it hasn't been updated since 2015.

Description: It could have been the worthy successor to ImpactJS. Indeed, greatly inspired by ImpactJS, PandaJS has been given very interesting features that ImpactJS lacked such as the management of the WebGL and particle management and above all, it's free! Unfortunately, due to its lack of visibility, the community struggled to build itself and today the project seems dead.
What makes <span style="font-family: 'arial black', 'avant garde';">inlingua</span> different

  • More efficient thanImpactJS
  • Advanced particle management

The -

  • dead project
  • Little community, no plugins

Website: http://www.pandajs.net/
 

Pixi

TL;DR: PIXI , unlike the other frameworks mentioned previously, isn't actually a game framework. This library is in fact an HTML5 canvas engine . It's the most optimized and fastest framework for managing HTML5 canvas and allows you to create games, graphics, animations, and more. All JavaScript game frameworks use it.

Description: PIXI is THE canvas engine par excellence. Ultra fast, easy to learn, it is also intended to be neutral in terms of architecture, allowing developers to design games but also graphics, animations and many others. PandaJS et Phaser.io use PIXI to manage the management of objects displayed on the canvas. Its real added value is that we no longer have to worry about performance and refresh rate because this library is the most advanced in terms of performance.
What makes <span style="font-family: 'arial black', 'avant garde';">inlingua</span> different

  • Neutral architecture, allowing you to do something other than video games
  • Ultra fast and easy to use
  • It has a function to manage the entire main loop of a game, which is a very good point

The -

  • Its architecture being neutral, there are no features specific to video games (such as management of levels, menus, etc.)

Website: http://www.pixijs.com/
 

Rpg Maker MV

TL;DR: This isn't actually a JavaScript game framework, but rather a ready-made software package. It's designed specifically for creating role-playing games. Its graphical interface simplifies most development tasks (such as creating animations, levels, the game database, etc.). Furthermore, the reason this software is mentioned in this article is because it allows for editing and adding new features using JavaScript.

Description: rpg maker is a turnkey software for developing top-down RPGs. For a long time, software rpg maker used the ruby as the design language but the latest version, Rpg Maker MV, switched to JavaScript and that's a good thing! The software has a complete and optimized graphic interface to reduce development time: the creation of levels, animations, events present in the levels. In addition, it is extremely easy to convert the game to several formats (Android/iOs mobile, web and windows desktop).
What makes <span style="font-family: 'arial black', 'avant garde';">inlingua</span> different

  • The level editor, animation and the database (characters, objects, monsters, fights, etc.)
  • The ability to change all of the game's default features with JavaScript
  • Export in several formats quickly

The -

  • Paid (80 $)
  • Can only be used for role playing
  • Very weak documentation
  • Restricted community on the latest version

Website: http://www.rpgmakerweb.com/
 

What about 3D games?

There are still plenty of other JavaScript frameworks for creating 2D games that I haven't mentioned, but what about 3D games? Is it even possible? Well to answer you: Yes. This is possible thanks to the API WebGL which allows you to tap into the resources of your computer's graphics card. This technology being recent, it is preferable to have your browser up to date.
Currently, two major frameworks exist for 3D creation including BabylonJS which is positioned as the benchmark for 3D game development. ThreeJS, meanwhile, is equivalent to PIXI for 3D, that is to say that it is neutral and allows you to do something other than video games.
 

Export your game to mobile

wall-pigeons
We have seen the different frameworks for developing games in JavaScript but today most games are not played on a browser… Is it possible to export them to mobile devices for example?
 

Eject

Ejecta, developed by the creator ofImpactJS is a small nugget. Only reserved for iOs applications, it allows the canvas to be displayed in Full-screen on the mobile terminal. We can obviously use some tags HTML allowing, for example, to display menus and pop-ups on the screen. Ejecta also embeds an additional API allowing to manage the phone's local storage, the accelerometer, etc. The performance is on par with that ofImpactJS.
What makes <span style="font-family: 'arial black', 'avant garde';">inlingua</span> different

  • Natural
  • Fairly light
  • Free, unlike ImpactJS
  • Allows you to easily use the various features of the phone

The -

  • Only reserved for iOS

Website: http://impactjs.com/ejecta
 

Intel XDK

Not very well known, and yet extremely efficient, Intel XDK allows you to build a JavaScript game developed from any JS framework (Phaser, Impact JS, etc.) on all existing media (Android, iPhone, Windows App / Desktop , Mac, XBOX ONE, PS4, and many more)
What makes <span style="font-family: 'arial black', 'avant garde';">inlingua</span> different

  • Not very greedy and very light
  • Takes into account the functionalities of the desired medium
  • Take HTML tags
  • Allows to build on all existing supports

The -

  • The management of sound and music does not yet seem to be developed (drop in performance, sound bug)

Website: https://software.intel.com/en-us/intel-xdk
 

PhoneGAP

I deliberately did not mention PhoneGAP, which is the best known software for building your application on mobile. I'm not a big fan for the simple and good reason that in addition to creating quite heavy Apps, they are not efficient and not optimized for video games.
Website: http://phonegap.com/
 

Conclusion

We now know that games in JavaScript have nothing to envy to other competitors. With its panoply of frameworks, JavaScript developers can only find what they are looking for.
Also, and to conclude, I propose a game developed with ImpactJS which caught my attention: Cross Code. A huge amount of work has been provided by the development team and the result is quite impressive! It has nothing to envy to other independent games in its category. Enjoy 🙂
 

What will be in the next article

In the next article, we will take a closer look at the development of a 2D video game using two libraries:

  • PIXI. Together we will see how it works PIXI by developing a mini-game from A to Z
  • Sideral JS. This library, still under development within JS Republic, will make it possible to develop video games using an approach similar to ImpactJS et rpg maker: give developers a panel of simple and configurable functionalities in order to facilitate the full/complex game development.

 
Christophe, JS-Republican @JSRepublic
[actionbox color=”default” title=”” description=”JS-REPUBLIC is a service company specializing in JavaScript development. We are an approved training center. Find all our technical training on our partner site dedicated to Training” btn_label=”Our training” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]