[#THREAD — 1/11]
In 2015, we created a game around an animated 3D map.
A little exclusive #MakingOf of how we built it.
#3dart #HTML5 #casestudy #sotd
-
If you like this kind of #thread, please like & share the love !
🧵👇
[#THREAD — 2/11]
The concept is inspired by the game "🔎 Where’s Waldo".
We wanted to push it a bit further by creating a fully animated 3D map 🗺️, with a profusion of 2Dcharacters 🧍♀️🧍🧍♂️.
This mix of 3D and 2D gives a unique look to the game and saves a lot of production time
[#THREAD — 3/11]
To create this illustration, we made a first 3D topography, based on first ugly sketches 😅.
(It's not the latest version, it's from 7 years ago...)
[#THREAD — 4/11]
Then we drew over it, to give a sense of how we wanted to populate the environment.
[#THREAD — 5/11]
At this stage, we also worked on colorboards.
[#THREAD — 6/11]
The map is articulated to illustrate the beer making process, from the hop field to the bottling.
It was something that we wanted to put forward in the site (interactive directional panels). But, for a quicker consultation, we placed it on the 2nd reading level
[#THREAD — 7/11]
To optimize the 3D rendering of the scene, we rendered the interiors in other scenes and integrated them into the main scene in compositing.
[#THREAD — 8/11]
We created a lot of pixel-art characters in different positions to make the map come alive.
In France, the law does not allow to represent consumers drinking alcohol. We had to show professional workers, so we made farmers, brewers, waiters, etc.
[#THREAD — 9/11]
To bring the map to life, we added 50 animations. We optimized these animations to limit their weight. Some are reused several times, others are very short loops but give the impression of being long.
We made an article at the time : mercimichel.medium.com/la-plus-grande…
[#THREAD — 10/11]
Some of these animations are just a few frames long (here 8 frames but I had to triple it for it to work in twitter) and by starting and stopping them at regular intervals we give the feeling that they are much longer.
[#THREAD — 11/11]
To get to this completely animated map 🗺️.
-
If you liked this little #Thread, please subscribe and share the love! Then we’ll do more of that.
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.