New Wazana Planet Design 🌍

Still with a lot of colours and cool effects of course!

pichou
Wazana.io
3 min readJan 12, 2019

--

For those who don’t know the game wazana.io yet (You fools! Go try it here), one of the first steps is to choose a city anywhere in the world which will be used to set your base. So you need to navigate the planet from continent to continent, country to country in order to find your dream city or your hometown. We made a big update this week on this wazana.io lobby by switching it from 2D to 3D!

How was it before?

Until now we were using a simple map library called Leaflet in order to render the world on your screen. This was convenient as Leaflet already deals with a lot of stuff like latitude-longitude coordinates, marker position and world navigation. But unfortunately, Leaflet is only working in a flat 2D world 🗺️ like almost all the map library by the way. And in order to offer you different map colours, we had to load a lot of different images (63 per colour actually to render the entire world 😲). So not very the most efficient solution for a not very great experience. But wazana.io game part already switched to 3D a year ago now and it had to change in the lobby too!

How did we make it?

“Well simple, just put a sphere and draw the planet.” Hum not that easy but yes let’s start with a sphere! Then my approach was to use a geojson which contains all the worldwide border coordinates 🛰️. Thus I had one and only one file to load, better compare with the 63 images seen before. As said, most of the time when you work with planetary coordinates you have to deal with latitude-longitude, so I first translated those geographic coordinates in 3D points to obtain the lines drawing the world you see around the sphere. Then as all the cities coordinates are also in latitude-longitude, I just had to use the same logic to show and draw city points. Same thing for lines which link players fighting as in the previous design version. Finally, as 3D allows us to make more cool stuff, we added some particles effects and space background.

See! A lot of colours

How is it right now?

Judge by yourself but we are very happy with the result! You can drag and drop the planet which makes it very easy to navigate ⛵ while picking a sector to choose your city is as easy as it was. But in the meantime, the look and feel of this important step in wazana.io are so much improved. Seeing the planet in 3D with a space background and all those colours to display players and current games is really nice. We hope you will enjoy it as much as we do!

And now what?

We had a lot of feedback recently coming from all our players and this is thanks to these types of feedbacks that we know exactly what to improve in order to offer you the best game experience possible. This is how for instance we completely redesigned the mouse in order to make it faster.
So please really continue guys 😍! Because this game will never stop getting better and better.

--

--

pichou
Wazana.io

2015 🏙️ Founder @BonDeVisite => 2016 🕹️ Creator @Wazana_io => 2018 💎 Founder/CEO Naker