As video games inch closer and closer to being indistinguishable from real life, accompanying marketing efforts must also up their game. For FIFA 14, EA Sports’ popular soccer title designed for next generation Xbox and PlayStation consoles, the game maker has made leaps over previous incarnations with more intuitive game play and even more lifelike graphics. So it’s fitting that in creating an interactive site to support the game’s release, EA’s agency Wieden+Kennedy Amsterdam would create an experience unlike any we’ve seen.
Where EA boasts that FIFA 14 “Just Got Real”, www.lifesizemessi.com makes the online experience come alive with a full-size, true-to-life, online avatar of star Argentine footballer Lionel Messi. How? With seriously accelerated graphics and some artificial intelligence that causes Avatar LEO–Messi’s alter ego–to react to a user’s behavior. As the site loads, the faint features of a face seem to emerge from a hazy gray veil. Next a nearly life-sized hand reaches out and you’re asked to match its size with your own hand, so that Messi is reaches a real-life stature. Then, his face appears, his eyes pop open and he begins breathing. As you stare face-to-face with a full size version of Messi, who seems to look at your and follow your movements, it’s quite evident this is unlike the litany of other avatars littering the Internet.
“We’re not only saying that the game feels alive, we prove it,” says W+K interactive creative director Edu Pou. “That’s why he’s not simply a reactive character. He learns and evolves his behavior with every click. Avatar LEO literally stands on the other side of the screen. And he’s alive.”
Once alive, Avatar LEO becomes the portal to FIFA 14. By exploring his body, the features of the new game surface in an ever-present content module. Click on his head and find out why the Pro Instincts feature make players think like a human and predict plays in-game; touch his boots and learn about precise movement; admire the intense detail of his kit and discover that FIFA 14 features improves physics of fabric.
Created with digital partners Resn, the scale and detail of Avatar LEO is impressive. “At the beginning of the project we jokingly said that we wanted to push Internet forward, but I think we’ve done it for real,” says Pou. Here, W+K director of interactive production Andrew Allen breaks down how they put a life-sized man inside a computer screen.
Once we had the idea we assumed, given the advances in 3D hardware accelerated graphics we assumed, that would be possible, but we spent a good amount of time in R&D. We started the R&D simply, looking around at what had been done and having many conversations regarding approach. Resn blew out a proof-of-concept that, though extremely limited, had enough of the scale and hyper-realism to both prove to ourselves that we could pull this off and help the final sell-in to EA. They loved the idea initially, but it was this proof-of-concept that made the project real and got us into production.
The main challenges were the life-size scale and the hyper-realism expected. Neither of these things are easy to do on the internet without frying people’s hard drives. The conceptual demands of the project dictated that we utilize a powerful technology. But we needed to balance that with the mass nature of the project and make sure we didn’t build something that was only accessible to a technologically advanced minority. When you need to balance these concerns, and you’re looking to do some really hot 3D, it’s easy to land on Flash as your technology of choice.
We used Maya for modeling, rigging and animation. But getting high quality 3-D models and animations into Flash necessitated that our team create a custom 3-D pipeline. There was a lot of trial and error here, but we ultimately landed on a system that worked, exporting from Maya via an augmented MD5 format into the Away3D graphics engine for playback using Adobe Flash. Resn also created a bespoke IO for saving Flash-native formats for animation and models. This was great and helped to optimize file size and load time considerably, which is crucial for creating a real-time interactive experience.
We started by exploring Avatar LEO’s personality and the rules of his environment. In order to stay realistic and consistent it was necessary to have answers to a variety of questions like, does he breathe, does he sleep, is there gravity in his environment. Once these were established, we began to have a sense of how he would naturally act in his environment and how he might react to a variety of possible user inputs. Understanding his psychology and environment was critical to making him feel much deeper and more alive than a canned animation triggered from a hotspot. LEO may react one way to a single poke in the eye, but respond in a much different way to a fifth poke in the eye, just like you or I might.
The complex responses and lifelike nature of Avatar LEO were created through a series of animations. Rather than animating long action-reaction sequences that could feel stale pretty quickly, we created small animations as different components that could then be blended and combined to produce all of Avatar LEO’s behaviors. The combination of these components is based on algorithms controlling the frequency of occurrence and the amplitude of motion. We trigger the behaviors using a mix of user interaction and Artificial Intelligence. The AI knows what the user is doing, and how often they are doing it, and responds accordingly. The animations are then masked to the region we want to see and blended using priority levels so Leo’s never off-balance or out-of-character and always feels alive.
But not everything is triggered from user interactions. Avatar LEO also has a mind of his own. At times he may choose to ignore you, may look around you, and may even respond to the content you’re watching on the site. Subtleties and idle states are powerfully important for the realism here. He has to seem as alive when you’re reading content or simply staring at him as he does when you’re directly interacting with him. All of this works together, in concert, to hopefully provide an exciting and rewarding intimate experience between you and one of the biggest footballers on the planet.
Avatar LEO’s textures are created from hundreds of high-resolution photos of the real Messi that we carefully composited together. We then baked lighting into the textures using Blender and 3D projection mapping. This allowed us to create hyper-realistic skin, textures and lighting effects with much less processing power than required by completely dynamic lighting. We then added a little dynamic specular lighting (highlights) that move across Avatar LEO’s surface to almost subconsciously help ramp-up the realism.
When initially planning the development we thought we’d be going over-the-top a bit with the animation rig by including some 200 bones. When all was said and done, Avatar LEO includes over 750 bones. They aren’t all always used of course, but we found that the extremely high count was necessary to create the level of realism and detail we wanted.
I’m still a bit amazed that we can load a life-size, interactive man with so much detail into your web browser without it crashing. It’s a huge testament to the work Resn has done. What does a life-size man on the Internet look like? 75+ megapixels of textures, 150,000+ polygons, over 750 bones and 60+ MB of data.
We’re definitely a bit away from being able to have an interactive experience like this on your mobile, but knowing how many people are likely to hit this on their mobile first we did not want to leave them out. We’ve created a tailored experience for smartphone users that functions equally as a teaser for our Avatar LEO and as a quick and easy way to view the product features. On their smartphones and tablets, users will be able to lift their phone to eye-level and use their gyroscope to navigate around a life-sized image of Messi. Even though it isn’t fully interactive, it’s still a lot of fun and super interesting to see the scale of the avatar on your mobile device.