First of all, we drew rough sketches of all the metaphors to submit to the Single team. We wanted to remove all doubt as to their simplicity and show just how recognizable they truly are.
The starting point for the distortions
It was necessary to create scalable pictures: for this purpose we accurately transformed the sketches into a vector path.
Creating the chaos
Then, in 3D editor we distorted the paths simply by allowing for random offsets in the coordinates of the Z-axis.
We ended up with a cartoon
Originally we made a video in which the camera flew smoothly round our distorted metaphors. But here our objective was an interactive game, not a cartoon. So, using a 3D rendering tool, we arrived at a set of raster frames for a camera fly-round cartoon.
That’s the size of the game’s five-level storyboard, so downloading it into a browser simply wasn’t an option. We had to alter the storyboard by using huge resolution frames, which we fed into an automated script to be traced as vector paths.
Developers need material to work with
To do their job, developers have to have vector files, so our curves on the screen wouldn’t have been of much good. But everything worked out just fine once we put it all into SVG.
The storyboard for each image consisted of more than of 500 files. So we combined all the files into one.
But that was still far too many
The resources we ended up with for five levels of the game still took up an inordinate amount of memory, so we rid the files of all the excess baggage remaining from the export process and compressed the data with as high a ratio as possible.
All it took was just a bit of magic