heineken clubhouse

recently i was involved on a interesting project for Heineken which involved building a iPhone app for the 2011 Rugby World Cup. the project was headed by Holler Sydney. myself and Nathan de Vries joined the team to do the iphone build. part of the app was to create a interactive 3d game that allowed user to take live kicks as they were being taken in the actual world cup. in this blog post i wanted to concentrate just on the live kick game and go into some technical detail about the making of.

first of all, please download the app and have a play!
here is a link to the Heineken Clubhouse on the iTunes store.

the live kick game was built using a collection of open source libraries and frameworks, most notably using openframeworks. in the past ive used openframeworks for a couple iphone and ipad releases (horizons and haeckel clock) and the nice thing was that OF sets up a EAGLView for you by default and you just have to worry about drawing your graphics/animations. its great for getting OF apps running quickly on the iphone but for the heineken project i needed to build a native iphone app and somehow get openframeworks working inside and be able to create and destroy instances of the game. this took a bit of hacking and essentially i ended up with a very bare bones version of openframeworks with only its openGL functionality (ofGraphics, ofTexture etc). i even removed ofImage and loaded images using UIImage before converting them to ofTexture to be used inside the game. this meant i had a very light version of openframeworks with minimal dependencies and still have access to the great openGL code that OF abstracts.

the game uses some nice stadium models and baked textured which were created by a 3d designer. it was crucial that the scale and size of the models was exactly the same as used inside of the game. you can imagine the game working with boxes and flat planes to describe the 3d environment and the model is the final decorative layer placed on top to make the whole thing look real. it took a bit of trial and error getting the models to work and eventually i ended up going with the .obj format for the simple reason that it was the only one i could get to work! i converted the .obj models into static arrays of vertices, texture coordinates and normals using this obj2opengl script.

the 3d physics in the game was achieved using bullet physics library. it was my first venture in 3d physics land and it was a little daunting but i managed to get some of the basic examples running and from there it was just a matter of getting familiar with the library. it is very comprehensive and has been used in 3d films like Shrek and Megamind, so initially i associated it with being a chunky and processor intensive library although as i found out, its very modular and handles simple geometry pretty well on the iphone. i ended up using a single infinite plane for the game field, three boxes for the goal posts and the ball was generated as a 3d convex hull shape generated from the vertices of its model (done by some handy functions inside the bullet physics lib). adding these elements into the physics simulation i was able to kick the ball by apply a force to it and bullet handled the ball bouncing and obstacle collision with the goal posts.

the game design required some nice dynamic font rendering using drop shadows and strokes which was beyond the simple font support in OF. these effects had to be done natively and overlaid the 3d game. having semi transparent text over the EAGLView came with no performance penalty which was good despite reading reports that this could slow things down but i assume this has been addressed with newer iphones.

lastly, couple cool opengl tricks ive learnt on this project were mip mapping and multitexturing. mip mapping came in very handy when rendering the grass texture on the field. it basically means that textures further away from the camera are seen as a bit more blurry, removing the flickering and noise you’d otherwise see when using high resolution textures on small models. multitexturing allows for adding multiple textures onto the one plane with the added option of blending the textures in various ways. this can be seen again on the grass field texture where first the grass texture is drawn and then the field lines as another texture on top.

if you have any other questions about the app, please post below and i’ll do my best to answer them.