Behind-the-Scenes: Production of the Night Market Website
The scene is set in a marketplace in downtown Hong Kong: The day is ending and the light from the neon signs shine into the street. The streets are busy with people pushing along on their way – their shoulders brushing as they pass.
As dusk fades and the sky darkens, the people who thrive in the night are left alone in the market.
Sleeping Dogs is an open world video game mixed with crime and a dash of drama. Originally called Black Lotus back in 2009, it was delayed and re-announced as Sleeping Dogs in 2012 by Square Enix.
Working with FutureUS and Square Enix, we were presented with the challenge to immerse users’ into the actual vibe of downtown Hong Kong. While at the same time, we were to tie custom features into the site’s functionality that were pertinent to the game. This was all to be done in one execution.
So we built a plan around a highly interactive HTML5 site & Flash site, where the user gets a first hand look in a Hong Kong street-market through a full-screen experiential website.
Each scene was carefully laid out with small details given that some might not take the time to notice. This is what brings the realism to a scene like this – and what makes the experience fun for a fan to find those extra surprises and uncover hidden easter-eggs as a reward for taking the time to dig through each scene.
The Sleeping Dogs Night Market Website involved careful planning and meticulous production details to create a user experience that encourages exploration of many different elements from the game.
Once we had the scene established we added in the characters and props to bring it to life.
We managed all aspects of production from the casting and auditions of the talent to the live action shoot held at a production studio in Orange County, CA.
We shot the talent and the props on green screen. The talent was all shot live, and the props/booths were all shot as still images.
Compositing the character footage, prop photos into the CG background(modeled from scratch, based on a scene in the game) was a time intensive process. Here’s one of the early early versions we did while on set to make sure everything was going to line up properly.
Special attention was spent on the lighting during the shoot to recreate reflections that can be experienced within the scene on the characters and props. Here’s J and Jordan stuck on the monitor directing the talent’s performances.
Development and Design
From there we moved to keying the characters for the site. The natural movement of the characters upon roll over were carefully planned for by shooting them in neutral to action to neutral poses and then morphing the frames to show a very natural range of motion
The little details are what really bring this site to life. Particle effects and special effects were used to create details like steam from the manhole or sparks from the fuse box.
When it came to the development of the site, we developed a very robust, full screen experience in Flash as well as a robust HTML5 version that gives user’s a similar experience on tablets.
So that’s a look behind-the-scenes, but please take a second to experience the Sleeping Dogs Night Market website and explore all of the different elements yourself. We hope you enjoy the many details and surprises in this immersive experience we thoroughly enjoyed creating.
Check out the site here: