College Hoops 2011 by Fantasy Interactive

Share your love

The Project

The Hotpot Challenge by Google

Development

Google asked us to create a Basketball game in HTML5 for their College Basketball 2011 site.

Design

The challenge was to design a game that seamlessly integrates with a more static website.

The Project

Go to top

The power of HTML5

HTML5 brings new capabilities to browsers that can be used to create much more immersive experiences. The experience Fi had gained from previous collaborations with Google, such as 20 Things and Canvas Defense, was a great foundation for this project.

Integration

The site itself uses Google Maps and Google Earth, quite complex interactive components. It was key for us to integrate with these elements without sacrificing performance, interfering with functionality or creating visual clutter.

Canvas all the way

The canvas tag is the key to having pixel-level control over rich graphics and effects. It's functionality is fairly basic, but with some inventiveness it is possible to get great results, like the particle effect that appears when making a basket.

Fun with physics

The most challenging part of coding was to simulate a net that responds in a natural way when the basketball hits it, or when the the ball hits the rim. The final result is a mix of dynamic simulation and animated visual effects that creates a gratifying visual response.

It's all about design

Go to top

Basketballs

The Process

With every project Fi starts creatively, creating sketches, brainstorming, idea mania! Fi considers the client and one another. Here you can see the first sketch ideas for the game. It included a set of 2 additional minigames to play in between shoots. Fi played with the idea of injecting rhythm to keep the pace up.

The Details

Once the scope and ideas were defined, Fi had to think how using HTML5 can a user shoot a ball into a basket. What is the angle? What feels interesting? Fi even made a Google stadium, but it felt too "gamy".

The Components

What's really amazing is how a short project like this can change from one day to another. In the beginning things were pretty complex, such as the score/time component. Good design normally ends up with something that feels good and is easy to use and understand.

It's all about design

Go to top

”This project was a great way to see how far we could push HTML5 with effects like the simulation of the net on a basket in a way that feels responsive and doesn't slow down browsers.”

The Fi Team

Balance is Key

Browsers are still slow compared to Flash or native apps. It takes a very measured approach and close collaboration of design and tech to create an interactive experience that doesn't feel like a regular website.

This is the Beginning

It is still early for HTML5 with many browsers not fully supporting the spec. This is the perfect time to push and experiment to demonstrate the benefits and new possibilities to promote further adoption.