JavaScript in Game Development
Tags: javascript, gamedev, canvas, webgl
Published: 2021-06-14 07:22:51

When I meet someone and they ask what I do for job I tell them, that I'm a **game developer**. And here what happens. Either they think that I'm using *C#* and *Unity* <a href="#sup1"><sup>[1]</sup></a> or they ask which technology/language I use. And when I tell them I'm using **JavaScript** for game development, they get confused, because lots of people think that JavaScript is used only for **Front-end** *(React, Vue, Angular, ...)* and **Back-end** *(Node.js)*. 

That's what pushed me into writing this article.

(Before you go ahead, I would like to inform you, that there will be nothing connected with code.)

Let's start with the definition of Game Development. 

**Game Development** is the *art* of creating games and describes the design, development, and release of a game (We can call ourselves artists, isn't it interesting?).

Many game developers choose to develop games using different game engines, such as *Unity, Unreal Engine, Gamemaker studio, Godot*, etc. And the common languages for game development are *C#, C++, Java, Python, Lua*.

But only a few people know that you can make games using JS.

There are 2 main ways of making games with JS. 
You can manipulate with DOM elements or you can use Canvas or WebGL. 

As for me, making games with DOM elements is more of **Web Development**, and making games with Canvas/WebGL is more of **Game Development**.

Some of you may have heard of **Canvas** as an HTML5 element, but not about WebGL.

Let's go ahead and see what they are and what are their main differences.

![canvas vs webgl wallpaper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p58xgikatnh42hit32h6.png)

The **canvas** element is part of **HTML5** and allows for dynamic, scriptable rendering of 2D and 3D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph. It provides an empty graphic zone on which specific JavaScript APIs can draw.

**Canvas API** provides a means for drawing graphics using JS and the **HTML canvas** element. It can be used for animation, game graphics, data visualization, etc. Mainly focuses on *2D graphics*.

**WebGL** is a JS API for rendering high-performance interactive *3D and 2D graphics* within any compatible browser, without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 *(cross-language, cross-platform Application Programming Interface)* that can be used in **HTML5 canvas** elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device.

![canvas vs webgl comparison table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ev9sxdo47hq3n8oy45d3.png)


Since both are JavaScript API’s, there will be similarities to some extent, especially if we talk about bindings and framework development.

WebGL and Canvas are HTML5 goodies. If a device supports WebGL, then it will automatically support Canvas, but nor Vice Versa<a href="#sup2"><sup>[2]</sup></a>. The native 3D API for WebGL is faster and has more capabilities like rendering pipelines, code accessibility, and faster execution. 

Now you know what we need to use to make JS games. Let's go ahead and talk about what will help us to make games.

We can use either **Game Engine** or **Game Framework** to make games. *(You can read about their differences <a href="https://dev.to/birdman/game-engines-vs-game-frameworks-1icc">in this article</a>)*

Some of the famous JavaScript Game Frameworks  are 
<a href="https://phaser.io/">Phaser</a>, <a href="https://www.pixijs.com/">Pixi.js</a>, <a href="https://threejs.org/">Three.js</a><a href="#sup3"><sup>[3]</sup></a>, <a href="https://www.babylonjs.com/">BabylonJS</a>. But these are not the only ones.

These frameworks have lots of integrated tools, which will help you with your work but they also give you enough freedom, to create something on your own, to make it work the way you want. But you need to do more coding with that.

They all have their communities and there are many ways to join them, where you can ask your questions, get your answers, etc. 

And last, but not least, they all have their tutorials, examples, and documentations very well organized, and using them you can start your journey in **GameDev**.

<hr style="width:100%" />
<sup id="sup1">[1]</sup> Unity supported JavaScript as a scripting language until 2017. It's not being supported since then.
<sup id="sup2">[2]</sup> Definition of vice versa - the other way around. With the order changed.
<sup id="sup3">[3]</sup> Three.js is often defined as 3D library because it doesn't provide some features that are needed to make games. But it doesn't mean you can't implement them.