How WAZANA.IO has gone from 2D to 3D in 3 months only?
An important milestone has been passed in the history of Wazana.io.
The graphic interface of the game has became really realistic with a new 3D rendering. It offers a much better game experience and game immersion so that our players can challenge each other in the best environment. But how have we managed to do that? Let me tell you a story…
The first main step was to find an engine. Indeed, WAZANA is not a traditional io game (playable online, based on real maps, several designs available, etc) and thus the choice of the engine was critical for the next phase of the plan. I did a benchmark to see which one was suiting the best our need. Unreal Engine, Unity, etc I went through all functionalities, tools, flexibilities, limits and of course the portability on browsers. After a couple of days, it became apparent that the winner of these researches was BABYLONJS, a 3D engine based on WebGL/Web Audio and JavaScript . It was obviously the best engine to develop this new version in no time. What I liked about BABYLONJS is that it is extremely flexible and for instance as WAZANA.io lands are based on real worldwide maps, I needed that flexibility in my Engine. Then BABYLONJS has been backuped by a very active community which is so important when you plan to code a game with zero knowledge on an Engine like me.
Once I had my Engine, I started to test what could be done and what could not be done to have a general idea of what would be the main challenge. The main one was the building and unit shapes. In the previous version, only the icon was moving on a 2D map, but now I wanted every detailed shapes in the scene. I quickly realized that I couldn’t take care of that part. I contacted several designers for this project and I ended up working with William who is based in Australia. Together we imagined what would be the shapes of the three WAZANA.io factions and William explained me many concepts concerning game Engine and scene parameters. Thus, while I was working on the main WAZANA.io scene, William was designing the shapes of buildings and units that you can see today in the game.
When finalizing, I encountered a new difficulty. WAZANA.io is based on the worldwide map and in the previous version I used the Mapbox library to create the borders of the different countries anywhere in the world. Now as the ground must be in 3D, this is totally new and much more difficult. In that case the data source is so important: I had to find a worldwide base of all coasts to define where there is ground and where there is water. Once I found that base (huge database), I had to find a way to easily import it in the game. The trick I used for this is that I simply sliced the world in longitudes so that coast data will be not too heavy to load. Then with the proper data link to the coordinates of the city selected by the user, I adapt the ground height in the player scene. For now, this is very basic but I plan to add more and more data in further improvements like the rivers, the roads, etc.
Eventually I put everything together, adapted it to the original game, worked on some debugging tasks that you didn’t plan of course and you finally have a new 3D version!
Valentin, founder of wazana.io
Article initially posted on Wazana.io blog
