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 [1] 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.
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.
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[2]. 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 in this article)
Some of the famous JavaScript Game Frameworks are
Phaser, Pixi.js, Three.js[3], BabylonJS. 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.
[1] Unity supported JavaScript as a scripting language until 2017. It's not being supported since then.
[2] Definition of vice versa - the other way around. With the order changed.
[3] 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.
Latest comments (1)
Very interesting!
Thanks!