From Paper to Pixels
All the best ideas start on paper, and these were no exception... Building on the initial big idea from OgilvyOne Singapore, and freed from the constraints of digital parameters, we take a deep dive into what’s possible before reining things back into an actionable concept.
Translating one of the most important literary works of ancient India to the digital realm involved a scene-by-scene retelling – first very rough, then layering in significant levels of detail as the timeline progressed.
At heart, design is a problem-solving discipline, and we use the inherently rough nature of sketches to address and resolve core challenges before refining them in the digital space.
Tell the Story
An epic tale warrants an epic retelling, and storyboards were the keys to the kingdom, in terms of mapping the narrative to a flow and timeline that would fully do it justice.
Google Product IntegrationCleverly integrated Google
products help us to tell the story.
We didn’t have to look far for inspiration. Working closely with OgilvyOne Singapore, we drew from the endless sea of rich textures and vivid colors common throughout Southeast Asia and the Indian subcontinent. From textiles to tapestries, landscapes to literature, it was all good.
The only way to do proper justice to this ancient and beloved tale was to beautifully illustrate the characters and their environments. For this we turned to a seasoned specialist in illustration, and the results are quite obviously awesome.
The Main Characters
Four main characters dominate the narrative, but each one visually manifests differently based on region. The classic Indonesian depictions
are puppet-like, friendly and fairly accessible, while the Thai versions are a bit more fierce, and much more realistic in their visual style.
To create a richly interactive storytelling experience, it was clear we needed a set of interface components that worked separately and together within a common visual theme.
As with any interactive setting, we had to think through and fully design all the various states within each component across the digital experience.
With so many different elements working together, the seamless combination of the full component set was a key challenge. Ensuring all the pieces work together in visual harmony was a primary objective for the design team.
Multiple Chrome Windows
Pop-up windows can only be spawned by, or focused on, a user interaction (e.g. a click), for security reasons. So in order to maintain a smooth story flow, we had to spawn all the windows needed by each of the five chapters at the beginning, when the user clicks ‘Start’, then store them for later on. We ended up hiding the pool of windows behind the main narration window so they wouldn’t crowd or confuse the user experience. A separate narration window ensured that the story didn’t get lost or overpowered by the stunning visuals.
Deer & Demons
Digital physics played a big part in many of the gamification elements, including particle systems for fire, smoke, and forest ambiance. We built some spring-based tail physics for the burning scene, 3D ray casting and collision detection for the shooter in the forest, and inverse kinematics for the arm and bow in the penultimate scene.
How we used CanvasThe fire was built by duplicating a living
particle that would go from fire to smoke.
A stretchy, flexible monkey’s tail was key to the third chapter of the story, and we crunched code until it was perfect. The end result was a fully mobile weapon of destruction, wielded by the user to burn the Kingdom of Giants.
is on Fire
Realistic smoke and fire in the digital space is way easier said than done. This was a unique challenge that our development team tackled with vigor, leveraging all that Canvas has to offer.
Working on the Ramayana project really gave us the freedom to push the boundaries.
We were literally only held back by what we could imagine.
WebGL, With a VengeanceWe created a 3D environment where the
user could aim and shoot the deer.
Rendering 3D graphics without the use of plug-ins is the sweet spot for WebGL, and we were all over it. We put this technology through its paces, and surfaced with a realistic hunting experience sure to delight, despite the murder involved.
Broadway.com tapped Fi to produce a one-stop-shop for the latest Broadway buzz, information, pictures, and a seamless interface for snagging seats to any live performance.
The #1 entertainment brand for kids approached Fi looking for an iOS application for the 25th anniversary of their Kids' Choice Awards, and we jumped at the chance to play with them.
Messages For Japan
Messages for Japan is a site that enables the communication of hope and support from around the globe to the people of Japan.