.net Awards 2011: top 10 online games

This new category in the .net Awards recognises the year's best online games, where timewasting is positively encouraged. Here we profile our shortlist compiled of your nominations. Let the game play begin!

This year we've asked you to nominate your favourite online games for the first time in the .net Awards. So, as developers continue to push the limits of gaming on the web, this category recognises the year's best online games, where timewasting is positively encouraged.

The results were surprising. Our shortlist includes games built on Flash, Unity, HTML5, Java and JavaScript, Box2D: pretty much every technology is represented here.

So, we hope your productivity won't go out of the window now but have fun playing these games and don't forget to cast a vote for your favourite.

The public voting stage is open until 30 September. Then, during October, our judging panel will choose a winner from the public's top three in each category. The Awards are then presented at a VIP ceremony in November.

And here they are, in alphabetical order:

1. Agent 008 Ball

Robby Ingebretsen

URL: agent8ball.com
Created by: Pixel Lab
Team size: Three
Length of project: About one month

.net: How did the project come about?
Robby Ingebretsen, principal of Pixel Lab:
We were commissioned by Microsoft to come up with a concept that showed the power of HTML5. I had watched my son try to install Flash (and fail) so he could play a pool game on our family computer and I thought, wouldn't it be great if he could have a rich gaming experience inside of the browser without installing a plug-in?

.net: What tools and technologies did you use?
The game is completely written in JavaScript and almost all of the game rendering is done in a canvas element. We used a port of the Box2D physics library for all of the physics and we used Google's Closure Compiler to keep our JavaScript clean and compact. For more, check out thinkpixellab.com/casestudy/agent-008-ball/ and nerdplusart.com/creating-an-html5-game.

.net: How has the game gone down since launch?
RI: Great. There's been a ton of interest in the game. We've had about 7.5million page views as of this morning. If only we had thought to run ads! One of the most surprising things is the number of requests we get for the game on iPad/iPhone/mobile. We haven't invested much time there yet, but a little poking around makes us think it would be hard to get the performance we need for the physics engine to work smoothly on those devices.

2. Angry Birds Chrome

Serdar Soganci

URL: chrome.angrybirds.com
Created by: Rovio
Team size: We had two employees full-time and three employees who provided support on a part-time basis. We also received technical consultation from Google/Chrome engineers, mostly on using their tool-chain.
Length of project: Three months

.net: How did the project come about?
Serdar Soganci, web games manager at Rovio: This was the first web game project that Rovio released so we had to tackle some new issues in terms of both design and tech.

Design: Angry Birds was originally designed for touchscreen mobile devices, so moving it to the computer screen required some different thinking.

Tech: We needed to make sure we could provide a good user experience to as many users as possible. As Angry Birds relies on high FPS values to provide a smooth sensation, we spent most of our time improving the performance.

.net: What tools and technologies did you use?
"Angry Birds Chrome" is an HTML5 game developed by using GoogleWebToolkit and AppEngine. We also used Box2D and Forplay-PlayN open source libraries. Forplay allowed us to utilise WebGL as well.

.net: How has the game gone down since launch?
Considering it was our first web game — in other words it is just the beginning of Angry Birds introduction to web platforms — we were satisfied with the numbers and user reaction. The feedback we got from this product convinced us that there is a demand for more Angry Birds on the web and Rovio is moving accordingly.

3. Boccia

Dan Seamans

Dan Seamans

URL: paralympics.channel4.com/boccia/
Created by: Preloaded
Team size: Our core team was three (designer, coder, producer) rising to five.
Length of project: Three months

.net: How did the project come about?
Dan Seamans, senior producer at Preloaded:
Channel 4 won the bid to broadcast the Paralympics in 2012, with an ambition of making its Paralympics coverage the biggest event in Channel 4’s history. In addition to the TV and online coverage of the games and their build-up, Channel 4 wanted to commission additional content to raise awareness of Paralympic sports, help create household names of our Paralympic hopefuls, build excitement and anticipation of the games, and establish Channel 4 as the official broadcast partner of the 2012 Paralympics.

Out of the 20 sports that make up the Summer Paralympic Games, Boccia was the one that we felt summed up the games for us. It isn’t an Olympic sport and so helps represent the difference of the games and the importance of the different sports involved. It is also a really exciting sport which we felt would work brilliantly as a game. Thus we pitched Boccia, incorporating a number of game modes, some faithful to the sport, some with a more 'arcade' feel that would help develop key skills and add a different kind of fun to the overall package.

.net: What tools and technologies did you use?
Our main development tool was Unity, and in fact this was the first Unity game Preloaded has made. Using Unity we were able to get a prototype running and playable very early in development, helping us establish the look and feel of the game, test a few ideas, and ensure Channel 4 was on board with our direction.

The prototype was thrown away before we started the full and final build, still in Unity. The biggest challenge with Unity was arguably the menu system and GUI elements. Unity didn't offer a great way of doing this at the time so we built it from scratch in order to ensure full keyboard accessibility.

A vital resource in developing the game was Boccia GB, the federation that selects and develops players for Great Britain. They provided expert advice to confirm the rules were correct, and ensure our AI players did the right thing at the right time. And by having actual Boccia players play-testing the game, we received valuable feedback not only on gameplay but also on the overall accessibility.

.net: How has the game gone down since launch?
We're delighted with the reception so far. The average play-time for Boccia is around 20 minutes, which is a great for a web game of this type. Even more surprisingly that time has almost doubled for players in the United States over the last month. It's Spain and Argentina where the game has developed the biggest fanbase.

We've recently rebuilt the client to run at various resolutions and also in a full screen mode. This has allowed us to capture a hi-definition trailer, which featured on the Unity site. Off the back of this we're evaluating completing this new build to release standard so our players can have even more fun with Boccia, and also the possibility of porting the game to different platforms. That would be awesome as we can see how the game would be a great fit, and hopefully a huge hit with some re-worked controls for iPad.

4. Canvas Rider


URL: canvasrider.com
Created by: Maxime
Team size: It's just me, a 21-year-old French freelance web developer, and an infinity of worldwide track designers!
Length of project: The concept was initiated four years ago but Canvas Rider was developed last summer and released in September 2010. I'm still currently working on it.

.net: How did the project come about?
M: It all started four years ago with Line Rider and Free Rider (Canvas Rider's Flash ancestors): you could already ride on the tracks you drew, but sharing them wasn't easy, so I created social tracks databases. With constant updates, they grew really big, and so did the tracks’ quality. Although after a while the biggest tracks were getting really laggy... As I was quitting school and becoming a freelancer in need of a big project, I reused Pete's excellent physics engine and decided to create Canvas Rider. Switching to HTML5 was a big challenge but with enough optimisations and a new rendering engine, it allowed me to reduce lag and add new features such as the fullscreen mode and ghost runs. Finally I made track-sharing part of the game and launched the dedicated website; I'm glad the community loves it!

.net: What tools and technologies did you use?
M: The only technologies I used are the HTML5 canvas element, JavaScript and some SQL. I'm now making Canvas Rider mobile-friendly, so I'm also using hardware-accelerated CSS3 in order to get a decent frame-rate on iOS, which is another big challenge... The tools I used for all this were Notepad++, WinSCP and Firefox B4 with Firebug, which have all been replaced by Coda and Chrome lately.

.net: How has the game gone down since launch?
M: Canvas Rider is doing really good! So good, indeed, that I had to switch to a brand new server in June. Now it's a big hit on the Chrome Web Store (300,000 users) and I reached 100,000 daily visits for the first time last week!!! Next steps are an upcoming contest and the millionth track to be drawn later this year...

5. Chuckville

Bob eicha

Bob eicha

URL: www.chuckville.com
Created by: SYMBIO for T-Mobile Czech Republic
Team size: 10
Length of project: Production: it took only 10 days to create the town and all the Chuck jokes. The whole project took two months to complete

.net: How did the project come about?
Bob eicha, account manager at SYMBIO: T-Mobile Czech Republic (TMCZ), one of our best clients, came up with the request for an online campaign supporting the launch of their HD Satellite TV on Christmas 2010. We were briefed to create something spectacular and creatively use Chuck Norris, the hero of all TMCZ Christmas ads. We created a microsite having a form of a little town called Chuckville. While playing an arcade game based on Chuck’s status as a pseudo-hero, users had the opportunity to discover the TMCZ Christmas offer. The navigation was very intuitive and users had fun while controlling the Chuck character and enjoying the jokes as bonus pop-ups. The whole Chuckville was handmade; all of the buildings and even Chuck himself were made of cardboard cutouts. Chuck is a fighting champion and fighting is his thing. Therefore we added the “Chuck Lin”, a Shaolin Temple, where he fights with his possible successors. Admittedly some of the fighting techniques were rather unusual, but boy were they efficient! Also an original song was created for Chuckville — the whole "mouthmade", except for drums — can be downloaded from the site.

.net: What tools and technologies did you use?
BR: Flash, XHTML, Carton paper, Scissors, Red Bull.

.net: How has the game gone down since launch?
BR: The online campaign helped our client T-Mobile Czech Republic to become the second most popular communication company in Czech Republic on Facebook. The fan base grew by 13.5 times in two months, drawing the same number of new fans every two days as during the whole previous year (from 3,000 fans to approximately 40,000 fans). In total 300,000 users visited Chuckville during two months.

6. LEGO Star Wars III: The Clone Wars

URL: lucasarts.com/games/legostarwarsiii/index.jsp
Created by: RED Interactive

According to the Adobe Success Story on Adobe.com, LucasArts partnered with RED Interactive Agency to create an engaging online experience and whet gamers’ insatiable appetites for the video game release of LEGO Star Wars III: The Clone Wars. "The idea was to build a casual MMO game for the website to live in, bringing the experience and fun of LEGO Star Wars right into the fans' browsers," says Jared Kroff, RED's creative director.

RED used the Flash — including Adobe Flash Professional, Flash Builder and Flash Player — to create the game.

To date, the site has amassed over four million unique visitors, who performed nearly 300million interactions and averaged 12 minutes on the site. The viral social media aspect of the site has also enabled 48,000 Facebook users to share 234,000 pieces of content. As a result of its efforts, RED also won an FWA Site of the Month award in January 2011, a 15th Annual Webby Award in the Games category, and two Mi6 awards.

7. Minecraft

URL: www.minecraft.net
Created by: Markus Persson
Team size: Game design, programming, graphics by Markus Persson ("Notch"), music and sounds by Daniel Rosenfeld ("C418"), ingame artwork by Kristoffer Zetterstrand and additional programming by Paul Spooner
Length of project: Minecraft has been under development since about 10 May 2009

.net: How did the project come about?
Writing on minecraft.net, Markus says: "I started Minecraft after playing some Infiniminer with a couple of people from TigSource. I realised that a game that simple yet that dynamic had a lot of potential to turn into a really great game, and kept coming up with things I wanted to change and stuff I wanted to add.

I had recently quit my job as a game developer to be able to focus more on indie game dev during my free time, and I was looking for a new game to develop. I had a few ideas floating around, but most required really long development times.

These two factors led to Minecraft.

.net: What tools and technologies did you use?
Minecraft uses the following technologies: Java by Sun Microsystems, LWJGL (license) by a whole bunch of talented people, "3d Sound System" by Paul Lamb and JOrbis (license) by JCraft.

.net: How has the game gone down since launch?
12,219,211 registered users, of which 3,207,581 (26.25%) have bought the game.

8. Pirates Love Daisies

Grant Skinner

URL: www.pirateslovedaisies.com
Created by: Concept, development, and creative direction by gskinner.com. Illustration by Pulp Studios. Sound by Washingtron, Inc.
Team size: Four (average over the length of the project)
Length of project: Three months

.net: How did the project come about?
Grant Skinner, chief architect and CEO of gskinner.com:
We wanted to show it was possible to build a polished, playable game on the modern web entirely with HTML and JavaScript with no compromise or fallbacks. We chose the Tower Defence genre because it's widespread, easy to understand, and addictive. However, we wanted to put our own twist on the formula and after some brainstorming settled on a quirky narrative about a band of land-locked pirates fighting to protect their treasured daisies from marauding sea creatures.

.net: What tools and technologies did you use?
We used a number of HTML5 features, including audio, canvas, local storage, and web fonts. We leveraged the EaselJS library for the game graphics, and jQuery for the UI. We also built a free tool called "Zoe" for exporting sprite sheets from SWFs, so our illustrators could continue using tools they were comfortable with.

.net: How has the game gone down since launch?
The response to the game has been fantastic! It's been used repeatedly as an example of what's possible on the modern web, and has made a bunch of top online game lists. We've had hundreds of thousands of players, and a great frequency of repeat plays. It's also opened the door for us to work on other interesting projects in the space.

9. Rawkets

Rob Hawkes

URL: rawkets.com
Created by: Rob Hawkes
Team size: One
Length of project: 10 months on and off (and counting)

.net: How did the project come about?
Rawkets started life as final-year project while I was studying at Bournemouth University. I had this idea in my head that I wanted to push HTML5 canvas a little further and also play with WebSockets, which I hadn't touched before then. I could come up with loads of reasons why the idea of using a spacecraft and simple graphics was a unique idea, but honestly it was just the most fun theme to give a simple game. After all, the purpose of the game was for me to experiment with new web technologies, rather than actually producing an addictive experience (although that was a nice bonus).

A lot of the functionality with the game came from spur-of-the-moment decisions, or through user-submitted suggestions. The game is fortunate enough to have a small but dedicated group of players who'll help test the game and try and break it for me. These play-tests usually result in new features being added to the wish list, or the game crashing. Sometimes both!

.net: What tools and technologies did you use?
The focus of Rawkets is around the use of the latest web technologies, like HTML5 canvas for the graphics, and WebSockets for the multiplayer communication. I use Node on the server, which means that I can use JavaScript for both the client side, and server side.

.net: How has the game gone down since launch?
Technically the game hasn't launched yet as it's still in a perpetual prototype stage. However, interest in the game has picked up since I started speaking about it at HTML5 events. Since I first showed the game to the public last year there have been just over 21,000 players in the game. I'll be looking to improve the number of players as the game matures a little further. In general the feedback has been good and everyone seems to want the game to do well, which is obvious from the feature requests and conversation between myself and other players.

I'm looking forward to spending some more time developing the game and introducing the most-requested features. The future is bright for Rawkets!

10. Street Striker

John McMahon

URL: www.childline.org.uk/Play/Games/Pages/StreetStriker.aspx
Created by: MCM Net
Team size: Four
Length of project: One month

.net: How did the project come about?
John McMahon, managing director at MCM Net:
MCM Net has a long standing relationship with the NSPCC and has developed a number of successful games for the brand. The team came to us with a brief for a mini game for the ChildLine website. The idea was that children would play the new online game take their mind off things, or to play while they are waiting to speak to a ChildLine counsellor on a 1-2-1 chat. The game’s target audience for this was males aged between 14 to 17 whilst also not alienating female visitors to the site.

We aimed to create a fun, addictive and engaging game – and we think we’ve succeeded!

.net: What tools and technologies did you use?
Flash CS5 with the Box 2d Engine, Photoshop.

.net: How has the game gone down since launch?
Although we can’t disclose the stats on this one we've received a tremendous amount of positive feedback since the game has launched and we’re currently in the process of building a brand new game for the brand since the success of the last one.

What's your favourite game? Let us know in the comments and tell us about your highscores, too!

And don't forget to head to www.thenetawards.com to cast your vote!