Merci-Michel ® Profile picture
Sep 9, 2022 11 tweets 9 min read Read on X
[#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.

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Merci-Michel ®

Merci-Michel ® Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(