Category Archives: Behind the Scenes


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.

Quick Look at the Design

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:


The project started with a simple idea. We wanted users' to possess magical skills just like the Lord of the Rings characters do. And we thought there was no better technology to help us display this than Augmented Reality.
This was the one sketch in our presentation that stood out to the client. So they asked us to develop the idea further.

From here we came up with a full Aug Reality campaign that got users to record video of themselves using the AR, then share it with their friends through Facebook. And to make a campaign out of it, we built multiple weapons into the AR that could be released in consecutive months.
We made a sword version of the AR for the Aragorn fans.

Here's the 3D tests as we were finishing the sword moves.

Then we made a whip action for the Balrog fans in the game. Excuse these drawings, we made these quick at lunch. Ha. But they got the point across.

Here's the 3D tests of the whip progress.

Also, for the fireball, here's some of the first test animations.


Then as we were building the AR application, we were designing out how we wanted the site to look. Here's some of the first comps we built to show how it would look and work. We really were attached to 2 different styles from the beginning.

Read More »
1 / 2