Today you can make a toy in any programming language, and JS is no exception. Game development is inherently challenging – we’ll tell you where to start how to make an incremental game in javascript.
Why JavaScript?
A lot of people think that all cool games (God Of War, Assassin’s Creed, Skyrim, add to taste) are created in C++. That’s partly true. There are hundreds of people from different disciplines involved, including developers who use a different language – it’s common practice.
Some cool games are written in “unpopular” programming languages, and that’s fine. If you work with JavaScript, you don’t need to rush after this article to learn the “pluses”, stay with JavaScript.
There’s Unity, Unreal Engine, CryEngine and other cool solutions for making toys, and if you’re comfortable having fun with them, be my guest. So it doesn’t make any difference what you’ll use for coding, but in our case we’ll talk about JS frameworks.
Basics
Before we move on to looking at frameworks for creating games, we should look at existing technologies. One option is HTML5. Since version 5 of the specification, HTML has introduced the <canvas> tag which allows you to create a context for drawing on a web page.
We shouldn’t forget about the Khronos Group team’s creation. WebGL is the web version of the OpenGL ES specification, allowing developers to communicate with the graphics card through the browser (trust me, it’s better not to know how it works).
This way, you can create 2D and 3D scenes on the GPU (which is more efficient than on the CPU). Great! But if you look at the JavaScript code that uses these technologies, you’ll feel bad.
So let’s deal with frameworks that protect us from canvas and abstract from WebGL.
2D Frameworks
Game development in JavaScript: Realistic and painless
PixiJS
This tool is what you might call a 2D WebGL renderer. That means that it contains a lot of features designed for efficient rendering of 2D scenes and objects. This makes it easier to focus on creating program code, and leave the hardcore “low-level” stuff to PixiJS developers.
It’s not a complete framework, but it does the job so well that a lot of JS game frameworks use it for rendering.
If you’re planning on doing 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’s cozier.
This is because the creators of the product are from the web world (some are web developers, others are DevOps), so most of the templates and approaches are things that are already popular in web development. If you’re close to web development, try this tool.
ImpactJS
ImpactJS began its journey with the title “The First Web Development Framework.” Most of the frameworks reviewed earlier were just experiments, not a commercial product. This open-source contender is distributed for free and comes with a good level editor.
The framework is not the clearest or most documented, but its reliability has already been proven. For example, the folks at CrossCode have used a forked version of Impact for their engine because of its performance and ability to scale to the task.
CreateJS
CreateJS is a suite 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 use PixiJS for rendering, or SoundJS for sound, etc.
PhaserJS
And finally, the most popular – PhaserJS. This is a powerful toolkit for web and mobile game development. This framework has huge and active community – every week these guys post a lot of new articles, demos and tutorials based on PhaserJS. This provides a great resource for people taking their first steps in gamemaking and need guidance. It’s also one of the most productive game frameworks since version 3.
3D Frameworks
ThreeJS
ThreeJs is the most popular 3D library. It offers feature sets for common operations that need to happen in a 3D scene. All the 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 with finding old solutions online;
- An active and helpful community;
- productive and responsive developers (Three.js has the oldest bug on GitHub dating back to 2013, Babylon.js noted two days ago);
- The playground is a great tool for quickly “trying out” code, explaining a problem, and providing help.
Developing toys? Share your experiences in the comments
