Tank 3D Game with Babylon.js
| TRAILER | GAMEPLAY |
|---|---|
 Click the image to see the video |
 Click the image to see the video |
The goal of this project was the creation of a 3D Tank Game with Babylon.js in Spring of 2022 for the Game on Web 2022 contest. The theme was "You are unique".
| VENTURELLI Antoine | FISSORE Davide | BERNIGAUD Noé |
|---|---|---|
 |
 |
 |
We are three students at the University of Côte d'Azur in M1 of Computer Science. Together, we form D.N.A. Production, a team formed to develop this project from start to end.
While at the start we decided that everybody would do a little bit of everything, with time we naturaly all grew some affinity for particular domains and made them our speciality:
- VENTURELLI Antoine was our models, particules effects, and textures specialist.
- FISSORE Davide was in charge of the menus and the elemental bricks behind the project's implementations.
- BERNIGAUD Noe was taking care of features' algorithms, and the musics and sound effects.
However, despite our specialization that occured during the project, we always stayed polyvalent and one of the main strenght of our team was our ability to meet very regularly and help each other out in all domains of the development.
We also want to mention BUFFA Michel, who encouraged us to participate to the contest and was our Babylonjs professor.
The concept has been based on Noé Bernigaud's project of a Tank game in 2D written in Javascript on this Github repository, which itself was inspired from the game WiiPlay - Tanks. With Babylonjs, we saw an opportunity to push the game much further and expand the game's feature to make a more complete game out of it.
While the idea was taken from there, nothing from the code is common between both version as we had to remake everything and use the physic engine.
Check the original game's video here or by clicking on the image.
At first, we started by building the engine of the engine, which would later rule all the game's interactions and mechanics.This was the most difficult part of the development, as problems that would seem quite simple could take a lot of time to solve. Moreover, we were beginners in Babylonjs, and bending the physic engine to our needs wasn't always easy.
- At the beginning, the gravity didn't look like it was working correctly. Tanks felt like ballons, as they were falling very slowly. We eventually realized that this was due to the scale of our world being accidentaly gigantic, and therefore re-sized all the object's dimension by dividing them by 40, which corrected the issue.
- We had a lot of trouble implementing the tank's movements, in particular setting up the friction, to create natural movement. Using the Babylonjs engine's friction feature was preventing the tank to move correctly, but setting it to 0 would make the tank glide like if it was on ice. Therefore, we had to create our own mechanism to have a dynamic friction parameter and apply forces that would emulate a natural-looking friction when moving the tank.
- Another major difficulty was the import and usage of our first models. Understanding them and how they work was particularly challenging as we had no prior experience in 3D rendering.
The engine's development is also the period where we created the bricks of the interaction between the player and the game, and made our first animations. The game was rather basic at this point and there was no gameplay, but it had all the fundations to build up the rest of our game. There was still a couple of issues in the engine that we would eventually correct later, but we were quite happy about this first step and ready to start implementing the game's feature.
Check the video of the engine during development here or by clicking on the image.
What marked the transition between the engine's development and the features development was the introduction of the heightmap. This was a game-changer both for graphics and gameplay. After that, we developped menus, different levels, added new models, and changed our empty world into a beautiful island. We also introduced the sounds and music, and build a function to make sound's volumes dynamic depending on the distance of the emitter relative to the player.
A difficulty we encountered during this stage of development was the light. Since the beginning, all our objects had an emissive light (they were all phosphorescent), which wasn't looking natural and also was preventing us to diplay shadows properly. When changing lights, we also had to change our tank model as the previous one wasn't reacting well to that change.
The opponents' AI was then deployed, as well as multiple level objectives. One of the main challenge for the AI was to keep it simple but also make it look natural and interesting, and we are very happy about the current result. Another big part was to make the AI stay in the island and not go into the water, and to make it target the player, which were respectively solved with invisible delimiters and invisible rays.
Later on, we built levels with specific missions, such as timed levels, levels where you would have to find some items, or ennemies that could only be damaged once the player fullfil a condition. This variety in the gameplay and objectives allows the game to be less repetitive, and keep players on their toes.
We also introduced the different biomes (earth, sand, and snow) to make the visual experience more diverse, and give each biome their own identity. A fun thing about the biomes is that they actually all are loaded right at the start of the game - the two that are not currently used are below, invisible and uninteractible. We move the biomes up and down depending on which one we need, and render only the one we're using. It kind of works like a theatre piece, where the different scenes are hidden behind the curtains waiting for their turn to be displayed.
The next part was to improve the controls - up until now, the aim was donne with the keyboard's arrow keys. You can still do it now, but we wanted to also give to the player the possibility to aim with their mouse, as it would feel much more natural, dynamic, and precise. Requesting pointerlock to capture the mouse into the game was tricky as navigators have strict standards regarding this, and we also wanted to give back the mouse to the player in menus, but we were eventually successful in its implementation.
For the tank deplacement, the game uses the classic ZQSD (or WASD on Querty). Firing bullets is done either by pressing Space or by clicking with the mouse. For special bonuses, a key is displayed beside their icon to indicate what to press to use them, among E, R, and F (Azerty).
At this point, the game was starting to look like a complete game. We had gameplay with different levels and ennemies, a good-looking map, a rudimentary menu, and the tank felt pleasant to control. However, it was still lacking some fun gameplay and discovery factor. It was time to implement the bonus feature, which would make our game into a roguelike, very fitting of the theme "You are unique".
Special bonuses were a particularly fun stage of the development, as they made the game a lot more enjoyable. While they took a lot of time to implement, the whole engine we already built was making the whole process a lot easier, giving more space to our imagination and to testing.
With 3 choices among the 9 different "Special" Bonuses, and 11 choices among the 5 generic "Normal" Bonuses and "Special" Bonuses level-up, there are more than 1200000 possible different tanks that can be built through a game. This makes the game a lot more interesting to re-play, and give sense to the theme "you are unique", as the tank you are playing by the end of the game is very likely unique across all games played and all players.
One major concern for the game was performance issue. Quickly after introducing the Heightmap and complex models, we began to experiment large fps drops, to the point where the game was not enjoyable anymore. The game wasn't very CPU-intensive as we wrote our code while being able of its complexity, but it was the rendering that was difficult for computers.
By default, a lot of computers use their integrated GPU by default for web application, which isn't built for 3D-rendering. It is impossible to force from the code the computer to use its dedicated GPU, which is much more powerful, as it has to be done in the computer's system parameters. Therefore, we had to take the performance issue at heart, so the game could run even on integrated GPUs.
Particules, models, and the Heightmap were all re-adjusted to make the game run at a good fps number and make things enjoyable again, even on slow integrated GPU. Furthermore, The AI also had to be re-optimized. One fun thing that had to be corrected was the update of the health bars, which was taking a surprisingly high amount of ressources.
Note: if you think you web browser might be running on your computer's integrated GPU and want to make it run on your dedicated one (if you have one), check out this tutorial (Windows). While the game should run fine even on low-end integrated GPUs, using the dedicated GPU will help make sure you don't experience any fps drop even in the most ressource-intensive situations.
This work is based on:
| Texture | Author | License |
|---|---|---|
| Coast Sand Rocks 02 | Rob Tuytel | CC0 |
| Coast Sand 02 | Rob Tuytel | CC0 |
| Snow 02 | Rob Tuytel | CC0 |
Crush8-Bit.ogg, Explosion2.wav, plop.mp3, Collision8-Bit.ogg, minplace.wav, Human-Applause-LargeCrowd01.mp3