Creating an immersive, interactive Web site that gives gamers an authentic taste of hit sci-fi game BioShock saw digital studio Rokkan pushing Web boundaries.
2K Games’ best-selling sci-fi console game BioShock is a first-person shooter (FPS) with a difference – it offers a different gameplay every time. Players navigate a mysterious underwater Art Deco-style utopia called Rapture, which has been destroyed by civil war.
As players explore this underwater world, they’re hunted by genetically-modified creatures called Splicers and faced with deadly security systems.
Available initially on Xbox 360 and PC platforms, the eagerly-awaited PS3 version launched in October to great acclaim. An advanced Web site supports the latest platform launch, bringing Rapture to full interactive life.
Created by US digital studio Rokkan, the site features a full-screen 3D environment that’s played out in a Web browser. It follows on from Rokkan’s previous work with games developer 2K Games, with whom the studio has chalked up several years of projects.
Rokkan also won a raft of awards for its promotional site for the initial launch of BioShock on the Xbox 360 and Windows platforms, making it the logical choice for the latest BioShock site.
Rokkan’s PS3 BioShock site pushes the boundaries of FPS sites: users are immersed in the gameplay. As in the game itself, site visitors can explore the world of Rapture, moving from room to room using the arrow keys on the keyboard. The visitor’s experience is heightened by the ambient sound – from the sounds of footsteps to the eerie voices of the Little Sisters, genetically mutated mutants who resemble little girls.
Spotlights, moving objects, and other visual cues draw the user toward different rooms. Transitions between rooms show animated video clips and in-game videos. The user can pick up real game elements in context, such as audio logs, journals, gene-altering tonics, and a complex arsenal of weapons.
Splicers add unexpected menace by appearing abruptly onto the screen. In-game video and audio also appear at key trigger points to dominate the screen, keeping the tension high. This level of immersion and interactivity was a key requirement of the brief given to Rokkan by 2K Games.
“The goal of the site was to showcase the PlayStation 3 version of BioShock in a more immersive and visceral way – less factual and more experiential,” explains John Noe, CEO and creative director of Rokkan.
“The site had to feel like a sunken underwater world,” he continues. “We wanted every aspect to feel as if it were pulled from the underwater wreckage of Rapture. In particular, our presentation of content such as news, movies, downloads, and game features had to be consistent with the BioShock theme.”
Rokkan received an in-depth brief from 2K Games, outlining the site content, desired tone and creative concepts. This was followed by a company-wide brainstorming session – the agency’s standard way to kick-start creative projects.
Once the overall concept and direction was approved, Noe’s team wrote scripts and storyboards to map the progression of the online 3D experience. The use of in-game assets is key to representing the experience of the game online as accurately as possible.
The fixed path, 3D environment was created primarily from actual in-game video footage. “We wanted to use in-game footage to give people a chance to truly experience the inner workings of the game,” says Noe.
“Most game sites will show trailers or screenshots and possibly some of the 3D assets, but we wanted to give users the ability to control the in-game experience from a first-person perspective.”
Based on the script, in-game walkthrough footage was captured and then brought into After Effects, where it was treated and mixed with in-game action footage. Noise and static were either added directly to the final video assets before they were brought into Flash, or placed into Flash as a layer above the video assets.
2K Games supplied 3DS Max models of the required game assets, which were treated by the Rokkan team in Photoshop, before being rendered and placed into the final Flash build.
Rokkan also modelled and rendered water scenes between footage sequences, to ensure that transitions between different sections of content would be seamless. Sound was a key part of recreating the scary ambience of the game.
“Audio is an essential element of BioShock,” says Noe. “The game itself is best played in a large empty living room at night – in the dark. The sounds echo through the spaces of Rapture, wet, dark, cold and ominous.”
In order to immerse the site visitor in the environment, Rokkan provided ambient sound points in the scenes footage. As the visitor moves towards this point in the movie the sound grows louder; if they move away, it becomes quieter.
“It was important to keep this piece of audio separate from the video files since the user could stop at points and these ambient sound effects should, continue even though the video is stopped,” says Russell Savage, senior developer at Rokkan and technical lead on the project.
The team used a mix of in-game audio and new recordings. The former was cut into smaller segments and rearranged in Flash to match on-screen objects such as closing doors or dripping water.
The most important aspect of recreating the game experience online, however, was giving visitors the ability to control the camera and move about in a 3D space.
To achieve this, Rokkan created reversed and forward versions of each video segment, so the user is essentially flipping back and forth between the two as they click the Up and Down arrows to navigate the experience.
At certain points in the video footage, objects appear that the user can interact with. These stop points were encoded in an XML file, explains Savage, and either a higher resolution JPEG or a looping movie would replace the in-game walk-through video.
Framing the action
The site features a stunning Heads Up Display (HUD) interface framing the video, which delivers cool animated transitions when the user clicks on various objects.
“As with most of our 3D visualizations, the HUD interface started out as sketches,” says Matthew Burniston, 3D artist at Rokkan. “After sourcing reference images online, each item was first modelled in Modo and then textures added in Photoshop using flattened out mesh guides from the 3D object.”
The HUD’s black water was made from a flat plane with a displacement map applied to it, explains Burniston. This displacement map uses black, white and shades of grey within the texture to deform the surface.
“The water has a reflective and transparent surface, with a green tint to add that murky feel,” he says. Once the HUD scene was built, camera animations were set up.
“This was as easy as setting keyframes and letting the computer fill in the gaps,” says Burniston. “We created play blasts, which are simple render outputs to gauge the speed and timing of the animations.
“Once everyone was happy with the animation, we created several render passes, including beauty, shadow, occlusion, specular and reflection passes,” he continues. Each pass was then imported into After Effects and layered using blending modes, before being rendered for the final output.
“It was quite a challenge getting the animation pieces to line up correctly and merge seamlessly,” adds Savage. “The site itself has a dynamic navigation that will expand to the size of the browser, but the navigation in the transition videos always needed to be at the same point.
"So before any of the transition videos could start, the dynamic navigation would have to animate to the correct position to line up with the transition video.”
Bandwidth was a significant challenge. Highly interactive sites are becoming more commonplace, but Rokkan’s pushes the limits of even broadband connections.
“Originally, the file size for the experience portion of the site – walking around the BioShock environments – came to around 100MB. And that’s per room,” says Savage.
“This was obviously an unacceptable file size, even for an experimental Flash site.” File sizes were inflated massively by the sheer number of keyframes that had been added to the video. Yet this level of keyframing was necessary to avoid jarring jumps in the video when the user changed direction in the 3D environment.
The team achieved an acceptable balance by trading off between file size, smoothness, video detail and tweaking compression settings. “Developing for interactive sites, you’re always limited by the user with a low-end computer,” says Savage.
“Usually I aim to have the site run at an acceptable level on these computers without it compromising the experience of the high-end users too much.
“The Flash-driven interactive movie shrinks down based on the height and width of the user’s browser – which is closely tied to a user’s monitor size,” he continues. “This shrinking of the experience also helps increase the performance of the piece, and since often a smaller resolution monitor means a slower computer, this works in our favour for optimizing the site for the users with slower computers.”
A final layer of polish was needed to further cement the immersive experience. “There were some effects, such as the edges fading to black, that I had to insist were applied within the movie itself, instead of adding these pieces dynamically on top of the movie within Flash,” Savage explains.
“Any pieces in Flash that have alpha transparencies greatly slow down a Flash piece, particularly when it’s running on top heavily animated piece such as a movie.”
With BioShock being hailed as the game of the year for 2008, its deep storytelling and carefully crafted environment meant that Rokkan needed to pull off something special to do the title justice.
It appears to have done just that, with the Web site gathering huge amount praise on both the games and design industries’ Web sites and blogs.
“While the site doesn’t do justice to playing the BioShock game – which was never the brief – it hopefully builds curiosity and anticipation for the real thing,” says Noe. “We’re probably most proud of how we were able to seamlessly integrate video game footage and our own original 3D assets to create a truly immersive in-game experience.
"Giving the user the ability to wander through the amazing spaces of Rapture was a huge feat for us, but we’re incredibly pleased with how the experience really expresses the dark, ominous feel of the game,” he adds.
In the game, lighting and rendering are highly stylized. Throughout the whole gameplay, architectural elements, objects and spaces are dimly lit in a foggy haze. Recreating the game’s atmosphere was a challenge for John Noe and his team.
“The softness of the lighting and rendering had to be matched perfectly to ensure that original 3D assets and in-game assets fit together,” he explains. “And as we continued to add content, motion, audio and interactivity, ensuring that everything came together became increasingly more difficult. Assets had to be treated in After Effects and Photoshop before going into the ultimate Flash build.”
A lost world
To create the groundbreaking site, the team deployed an arsenal of software. The ultimate build was achieved in Flash, but the use of After Effects, 3DS Max, Photoshop, Illustrator, Maya and Modo was essential to the success of the project. Game assets were supplied by 2K Games as 3DS Max models.
“After Effects and Photoshop were integral to adding texture and effects in order to create the ‘once beautiful – now destroyed’ look that BioShock required,” says Noe. These images show how items were developed from Modo models through to fully-rendered objects with Photoshop textures.
The site’s HUD interface grounds the site’s visitors in the game by playing animated transitions when the user clicks on the screen. The HUD unit was sketched out by hand, then modelled in Modo before textures were added in Photoshop.
Objects that users can interact with are scattered among the ruins and debris of the lost world
Standard gameplay elements are skilfully woven into the site, making use of objects that initially appear to be part of the rubble.
Project: BioShock PS3 Web site
Client: 2K Games
Studio: Rokkan. www.rokkan.com
Software: Autodesk 3DS Max, Autodesk Maya, Adobe After Effects, Adobe Illustrator, Adobe Photoshop, Luxology Modo