At home in your browser: Resn brings Messi to life

At home in your browser: Resn brings Messi to life

It's not easy squeezing a life-size footballer into a web browser, but Wellington digital agency Resn and creative partner Wiesen and Kennedy Amsterdam have done just that — in avatar form — to push EA Sports FIFA 14.

The avatar of the Argentine player Lionel Messi, ensconsed at lifesizemessi.com, is as realistic as possible: following your movement, responding to touch and meeting your gaze. FIFA14 is launching for the next-generation XBox One and Playstation 4 consoles, out in New Zealand this month.

"We wanted to do something that felt as new and as realistic as FIFA14 on the next generation of consoles,” says Andrew Allen, Wieden+Kennedy Amsterdam's director of interactive production.

“The trends of flat design, sparse content and plenty of white space didn't seem to cut it. We wanted to show, not tell, people how exciting the new game is and the best way we could think to do this was a with hyper-realistic, life-size, 3D version of the new avatar."

It was an assignment that took Resn a month of R&D and two and half months of design and development, says excelsior producer Jonathan Hawke.

"We're doing something very high tech inside very simple technology, to make something that looks life like, at large scale and works in lots of types of websites.

"The process we went through creating all the 3D bit then has to be 'down-res-ed', or dumbed down. to work inside a browser. That's where a lot of the skill is."

The avatar was created using Maya 3D animation software, from hundreds of high-resolution photos of Messi and EA Sports 3D scans. The images were projection mapped over 750 ‘bones’, essentially the parts of the animation than can move. This compares with about 100 typically used in 3D models, the companies say.

More subtle animations were controlled with artificial intelligence and the avatar is played back in Flash. Because Flash isn't supported on iOS devices and on newer Android devices, that meant creating an HTML site for mobile, using swipe gesture, the gyroscope and accelerometer to explore a static life size version of the avatar.

The desktop version has detail in animation, texture and lighting not normally seen in a browser, says Hawke.