Milking the Web

Swedish Web agency North Kingdom has created a Flash 3D board game for the current Got Milk? campaign. We find out how they did it.

Imagine a reality where milk has become a so rare a luxury that it needs to be kept under lock and key. That’s the premise the creatives at advertising agency Goodby, Silverstein & Partners (GSP) took for the California Milk Processor Board’s current Got Milk? campaign.

The TV campaign introduces the Adachis – a family of four on a mission to get the last existing glass of milk. A number of spots see them attempting to break into a maximum security building and steal the glass of milk that is being held in a glass case.

The ads also refer viewers to where they can play an amazing Flash 3D advergame featuring an animated Adachi family making their way to Fort Fridge to get the glass.

Created by Swedish Web agency North Kingdom, Get the Glass looks like a traditional board game set in a 3D space, yet has stunning graphics and animations. As a player, your mission is to help the milk-deprived Adachi family journey through all five regions of the board, break into Fort Fridge and get the glass.

At the same time you have to avoid the Fort Fridge security, who are in hot pursuit of the Adachi’s little van. If they catch up, the Adachis are shipped off to Milkatraz and the game is over. North Kingdom’s involvement in the project came as part of its ongoing relationship with GSP, having created the previous year’s online campaign for Got Milk? which won the Web designers two Gold Cannes Cyber Lions last year.

“This time GSP knew that they wanted to do a board game online, bringing the overall concept with the Adachi family alive, and in an interactive way talk about the positive effects of drinking milk. They explained what they wanted to do and asked us to think about how we could develop the online concept further,” explains David Eriksson, creative director North Kingdom.

“Our initial thought was that this could become something really cool if we would go about the project in the right way. We wanted to create something that had never been seen before online, but also create a game that had a challenging and engaging gameplay… not just amazing visuals,” he explains.

Milking it

Eriksson, along with art director Robert Lindström, decided that the project offered a perfect opportunity to use a real model of the board game where all the game sequences could be shot. Having brainstormed how it could work with North Kingdom’s 3D experts Daniel Wallström and Mathias Lindgren, and local scenographer and director Ted Kjellson, the two then pitched the concept to GSP.

“At first they thought we were nuts but once they got the idea they were all fired up and we had the go-ahead,” recalls Eriksson. North Kingdom worked closely with GSP throughout the project, with Jorge Calleja and Paul Charney from GSP travelling from San Francisco to Sweden mid-way through the game’s development to speed production.

GSP began by developing the game bible with details of the board game, while North Kingdom created a wireframe of the game so gameplay could be decided.

“We created a 2D map of the island which was then built in 3D so we could get a sense of how the model would turn out. In the 3D model we planned all camera movements for the shoot and how the game was going to work while Ted was creating the real model with his team of set designers in a studio,” explains Robert Lindström, art director.

Plenty of R&D was needed to ensure the game would work. North Kingdom’s lead flash developer Klas Kroon built a grey model of the game to allow GSP to work with the content of the game and see how the story would evolve.

Time was spent experimenting with how the cars and the dice could work. The game’s 3D elements were modelled using 3DS Max 9 working from concept art created by Anton Eriksson.

The 3D characters were rigged for animation while still in their rough form, so that animator Lucien Trofin could start work on animation before the models were completely finished.

Glass houses

The Adachi’s van was built based on photo references from the set of the TV spots. The textures for the models were either hand painted or photo manipulated using Photoshop CS2.

After the miniature landscape was filmed, North Kingdom’s 3D artists Daniel Wallstöm and Mathias Lindgren camera matched all shots in SynthEyes in order that the 3D elements followed the camera motion.

“We also took high dynamic range images on set to use as lighting reference so the 3D lighting would match the video footage. We could then seamlessly add elements such as water, smoke, and grass to bring more life into the environment,” says Wallstöm.

The project became much more complex and challenging than anyone had anticipated at the start, says Lindström. “Building a cool world with nice looking characters is maybe not that big a challenge, but building it within a world where you have to keep a high quality in all levels all through the game within the deadline; that was the big challenge,” he says.

“I’m proud of how everybody involved worked together,” he adds. “And I’m proud that we created a Web site that people who usually don’t visit campaign sites can enjoy. Even my mum has spent a lot of time on Get The Glass.”

Heart of glass

The California Got Milk? campaign involved a TV ad campaign that referred viewers to the Get The Glass Web site, where a Flash game awaited them.

Camera moves in 3D were planned using a miniature 3D model.

The game map was sketched out early on in the project to make sure the game levels would all work together in the finished site.

Roll the dice

The idea for the Get The Glass site was to recreate the board game format in a 3D environment. The team needed to model a die to complete the boardgame look.

“The dice was made as a simple 3D engine in Flash, and texturized with the help of the new bitmap API introduced in Flash 8,” explains Klas Kroon, North Kingdom’s lead Flash developer.

“It also has some simple/fake physics to make it somewhat realistic. That way it is totally dynamic and lightweight, as opposed to having a bunch of predefined animation sets.”

In Hot Pursuit

One of the interactive challenges of the game is Hot Pursuit. With Fort Fridge Security hot on your tail, this mini game involves helping Walter Adachi steer clear of vines in the road without damaging the van.

But as time ticks by, Walter’s arm muscles weaken due to lack of milk making it harder to steer the van. You have 30 seconds and three chances to successfully guide the Adachis’ van along the windy roads. If you fail, it’s off to Milkatraz.

“We started the development with some basic grey-mode tests in Adobe Flash,” explains Hans Eklund, North Kingdom’s Flash developer. “In these tests we were just using a box for the car and a huge vector shape for the road. The idea was to get a gameplay that felt fun and challenging before starting to create the graphics.”

The road and the user interface were put together in Adobe Photoshop and then imported into Flash, where all the animation was created using ActionScripts. The exception to this was the rotation animation of the van, which was pre-rendered in 3DS Max.

“The whole car game is stored in one Flash file and then loaded into the main game engine,” says Eklund.


PROJECT: Get The Glass
CLIENT: California Milk Processor Board
STUDIO: North Kingdom +46(0) 8440 1970
SOFTWARE: Andersson Technologies SynthEyes, Autodesk 3DS Max, Adobe Photoshop CS2, Adobe Flash

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...