On their trip to the Silicon Valley they also stopped by the Mozilla offices and gave the following talk about Marble Run, the technology behind it and how they built it over an extended Christmas break.

Enjoy!

Press Start

Favimon is a browser-based game which lets you battle your favourite websites, building a collection of favicons in a never-ending quest to conquer the web. It was awarded Most Original in the Mozilla Labs Game On 2010 competition. My name is Matthew Hollett, and Mozilla has asked me to write something about how I made Favimon.

I am a visual artist, working primarily with web-based art, digital photography, and other new media. I completed a MFA at NSCAD University a few years ago, and am currently teaching in the visual arts department at Memorial University in Newfoundland, Canada. I am also a freelance web designer.

My interest in digital art and interaction design was sparked partly by the games I played growing up. From traveling continents by cannon in Secret of Mana to mixing pixels in Mario Paint, video games let me explore and be creative. I filled sketchbooks and screens with drawings, and made a few games using software such as Klik & Play. During university I got out of gaming for a while, focusing on making art, writing, and learning to design and code websites. Now I teach university classes about making art with computers, and spend most of my time thinking about and making new media art. It’s through this visual art lens that I’ve found myself drawn to games again, this time as a creative activity. Game design allows my interests in digital art, storytelling, interaction design and web development to converge in a satisfying way, so making games has become one way that I get to play games while indulging my creative urge.

I have no training as a programmer, but have been tinkering with HTML and web development for long enough that I am quite fluent in HTML, CSS, JavaScript and PHP. I started learning jQuery a couple of years ago, and it’s made working with JavaScript such a joy that my ideas of what I can do have expanded considerably. I often build myself little browser-based tools to make my work easier for example, I recently made a little app that lets me quickly swap photos around to see which pairs work best as diptychs.

A Wild Idea Appeared!

My computer is littered with little text files that I use to record lists, notes, and ideas. Favimon began as a note in my ‘art ideas’ file: “A website which lets you collect favicons from other websites. Each favicon could be assigned stats based on characteristics of the image (like Barcode Battler).”

The idea sat there for about a year and a half before I found it again. In 2010 I started working on my first jQuery game, a Zelda-like exploration game called Probable System. The game is drawn entirely with text, and is inspired by the work of bpNichol, an experimental Canadian poet. After working hard to get Probable System ready for a gallery exhibition, I wasn’t really looking to start a new project. But I happened to reread my note, and it occurred to me that I could pair the favicon-collecting idea with a PokÈmon-inspired battle system. The words “favicon” and “PokÈmon” naturally portmanteaued into the name “Favimon”. Once I had the name, I knew I had to do something with the idea.

In my art practice, I often work with networks and systems and my photographic work has involved documenting places that are littoral zones between urban infrastructure systems, such as pedestrian walkways and traffic islands. I walk around with a camera a lot, and am drawn to marginal landscapes, places where a city gives way to wilderness. I tend to approach digital media in a similar way, and have found that mashing systems together and applying the rules or elements of one system to another can create new systems where interesting things can happen. You can think of Favimon as a mashup of the favicon system with a battle-based collecting game, which creates a situation where the player’s collection can never be complete. There are millions of favicons, and they are constantly changing.

My artwork is often about finding things. With interactive art, I often try to include a means of exploration and discovery. I’d like to let the user experience the kind of enjoyment I get from walking around with a camera or wandering the web. I’ve never played Barcode Battler, but the idea of a system where you can discover characters in various media around you appeals to me. (A few people have mentioned to me that Monster Rancher works in a similar way, but I haven’t played those games either. I have also only ever played one PokÈmon game, PokÈmon Red.)

As a new media artist, I probably have a different perspective than many game designers and while I don’t play a lot of video games, I do look at a lot of net art. John F. Simon Jr.’s Every Icon, Olivier Otten’s selfcontrolfreak, and Rafael Rozendaal’s websites are artworks which resonate with me. I’m also quite interested in conceptual writing, such as the work of Oulipo and Kenneth Goldsmith. I play board games more than video games, usually Settlers of Catan and Scrabble. When I do play video games, it’s usually an indie game that I’ve heard people raving about, such as Minecraft or Braid. And I really admire thoughtful, explorative web games such as David Shute’s Small Worlds and the EYEZMAZE games.

Favimon Evolves

After coming up with the name Favimon, the game evolved rapidly as I worked on it for four or five hours a day for about a month and a half. One of my first steps was to register favimon.com. I sometimes do this when I think I have an idea worth pursuing, as the small financial commitment of buying a domain name motivates me to continue working on the project.

When designing interactive projects, I start by sketching prototypes on paper, then immediately start writing code and most Photoshop stuff happens later. Favimon evolved quickly as I started coding. I first imagined it as a toolbar, sitting at the top of the browser window so that you could collect favicons as you actually visited websites, but this wasn’t very fun and didn’t leave room enough for a complex game. My initial idea also involved using properties of the favicon file (such as the number of colours) to determine each favimon’s attributes, but I soon realized that the game worked better if the attributes were based on characteristics of the website itself, such as whether it was a blog or a shopping site. This led to the development of a database that associated sites with different classes.

Once I figured out the best way to retrieve favicons (using Google’s favicon API and Jason Cartwright’s getFavicon app), I started using jQuery to manipulate them, first applying animated effects and gradually adding more complex interactivity. CSS is used to display larger versions of the icon images without losing the pixellated effect, though of course the CSS properties which allow this (image-rendering and -ms-interpolation-mode) are not yet supported in all browsers. The databases associating URLs with classes and classes with actions are contained in PHP files, accessed via AJAX.

When a player enters a URL in Favimon, the game checks to see if the site is in the database. Each site in the database is tagged with classes such as ‘blog’, ‘webservice’ or ‘nonprofit’, and those classes determine the possible actions the favimon might have. Well-known sites such as Google and Facebook have their own classes, which lets me add site-specific actions such as ‘Googleplex’ and ‘Zuckerpunch’. I’ve also added site-specific classes for sites I really like: minecraft.net, qwantz.com, or rhizome.org. There are a limited number of types of actions (damage opponent, heal, heal teammate, sleep, poison, and so on), but there are hundreds of different action names. It is possible to randomly find favimon with special classes such as ‘lucky’ and ‘shiny’ which are more powerful, and I’ve also been adding classes such as ‘santa’ and ‘valentine’ which can only be found at certain times of year.

Although I didn’t find out about the Mozilla Labs contest until after I had started working on the game, Favimon was always intended to be an HTML-based game, so it was an easy fit for the Game On competition. Years ago I used Flash to make interactive art, but now I much prefer open source, community-driven technologies which do not depend on the whims of a single corporation. Also, as a web designer I prefer to support web standards and accessible design. Any lingering interest I had in working with Flash has disappeared as I learn more about the possibilities of tools like jQuery and HTML5.

I am not a very clever programmer, but learned a few things as I hacked my way through developing Favimon. Since the favicon files are so small, it was easy to check for duplicate icon files using MD5 hashes. I spent a lot of time working on the timing of actions and fixing bugs (for a while, double-clicking an action would let you attack twice!). jQuery UI and plugins such as timers and qtip2 saved me from reinventing many wheels. The game really came together when I added the auto-suggest feature. It saves the player the trouble of trying to remember URLs, and it only suggests sites from the database, which are the best ones to collect anyway since they have themed actions.

It wasn’t obvious at first which favimon the player should start with ñ I thought about starting with a site everyone would recognize, like Google, before realizing that conceptually it worked better if you started with the favicon for favimon.com. So that’s where the little yellow F character came from.

A favicon is often the last thing I make when I design a website. It’s difficult to represent an entire website with such a tiny image, and I think favicons are really under-appreciated pieces of web design. While working on Favimon I’ve had a close look at hundreds of different favicons, and still occasionally find new ones which surprise me. A few of my favourites are zefrank.com, zeldman.com and harkavagrant.com.

A Never-Ending Quest

Favimon is still in beta, and will likely be for some time. I don’t always make projects public before they are finished, but in this case it’s worked well, as the feedback from players (via Twitter) has been extremely helpful and encouraging. It’s also helped me prioritize as I develop the game. For example, when I first launched Favimon, there was no way to save your game, but this turned out to be by far the most-requested feature, so I added it sooner rather than later.

I first launched the game on MetaFilter Projects. MetaFilter is a great community, and pretty much my favourite website. From there, it was posted to the front page and picked up by The Daily What, Dorkly, StumbleUpon, and a few other high-profile websites. Favimon has attracted quite a bit of traffic over the past two months, to the point where my shared web hosting is starting to cave under the pressure and I am currently researching dedicated web hosting.

At the moment, the biggest issue with Favimon’s development is figuring out how the database of sites and actions should work. The database is used to assign themed actions to each site and if a site is not in the database, then it has generic actions like ‘Click’ and ‘Cookie’, which is not as engaging for the player. Obviously a custom-built database of thousands of websites is time-consuming and arbitrary, and a few people have suggested that I somehow tag websites automatically. I mostly agree, but haven’t found a satisfying way to do this yet. In the meantime, I keep tagging sites! Right now there are just over 2000 recognized URLs, an assortment culled from lists of popular websites and brands, sites I use a lot or have heard about, sites linked by other prominent sites, and sites that have interesting favicons. The custom-built database allows me a great deal of control, and gives the game a certain personality. But it’s difficult for me to quickly tag sites that are in other languages, and with thousands of entries organized manually, the list is quickly becoming unwieldy. So this is something I would like to resolve eventually.

My to-do list for Favimon includes adding a more complex battle system, improving performance on mobile browsers, and redesigning the visual interface. My goal is to make the game challenging enough to reward replay, without making it too complex for casual players. I’d also like to add more community features to the site, allowing players to communicate and contribute more to the project. Ideally, players would be able to battle each other, but this will require solving a few problems; for example, it’s difficult to prevent players from cheating, since all the save data is stored in cookies and can be easily tampered with. I am a little busy teaching at the moment, so most of these plans will have to wait until the summer.

For me, the most fascinating response to Favimon has been seeing players engage with the game in ways I never expected – saving screenshots of their collections to share with each other, using Favimon screenshots to illustrate web rivalries like Facebook vs. Twitter or WikiLeaks vs. the U.S. government, or posting videos of gameplay to YouTube and setting them to music. One of my favourites so far is a player who collected favimon in a certain order so that the icons spelled out ‘FAVIMON IS GREAT’! I’d like to further develop the game in a way that encourages experimentation and expression like this.

I’m happy to have been part of Game On 2010, and deeply honoured to have won the Most Original award! Thanks again to everyone who played, voted, tweeted, or sent suggestions or bug reports – Favimon wouldn’t be the same without your participation and encouragement, and I really appreciate it.

If you’re interested in keeping up with development or want to get in touch, follow @favimon on Twitter.

Not long ago in a country far, far away….

Three boys decided to create a start-up. We were all into gaming, web development and space, so it was small wonder our project ended up as a browser-based space simulation game. Right from the beginning, we chose to employ only technology that would enable us to create a virtual world free from any limitations, be it platform, bandwidth or gameplay.

While many of today’s giants started in a “garage”, we began in a small basement housing a couple of computers, a bicycle and a microwave oven. The future game’s concept was taking shape in our heads and we were itching to start.

We turned one of the walls into a backlog by covering it with several hundred post-its, each with a minor task written on it. The ventilation pipe below the ceiling became our progress bar: we put completed tickets on it. The idea was that the project should be complete by the time the progress bar had filled up, but the further we moved, the more tickets there were, and now new tasks have almost doubled from what we started with!

When we were starting to create the engine for our game, we opted for using cutting-edge technology available in next-generation browsers. The GAME_ON competition which kicked off in September only proved us right. So here we are, honored to post this message on the Mozilla website.

Like any other innovative project, Far 7 is a package of technologies. The “ingredients” of the game may change more than once until you get a combination that is as stable and user-friendly as can be achieved, with the highest possible performance. The client side of Far 7 uses JavaScript reinforced with the MooTools library. The interface is built on JxLib. The world is drawn with SVG and the Raphael library.

On the other side, the game is served by a complex platform written in Perl. These are the application itself built on Catalyst, a life daemon on the AnyEvent event machine and a Meteor comet server. Far 7 uses MySQL for a database and memcached for fast access to cache.

The set of technologies has hardly changed since we began developing the project. Only the Raphael library was added in the process to handle SVG. We plan to migrate to MongoDB partially or completely in the future, as our own tests have shown it to be the best solution for an online game.

But it is not just technology that matters to us – we take a highly responsible approach to everything: from the art to the setting, carefully crafting every little feature, every fine detail. We are not making a game for designers or programmers – we are creating the game primarily for gamers, so that any one of them can just enter and exclaim, “Wow! That’s really cool!” and then, “Wow! Is all that really happening in my browser!?”

We are insanely happy to have won the prize for the best technology, but we are not even considering calling it a day. We are aiming for the best-overall game! As early as this spring, anyone will be able to try a full-fledged beta filled with drive and fun.

Here is what we have in store for you: • colorfulbattles, • dozensofbattletacticsandweapons, • variousequipment, • anadvancedtradingsystem, • agrippingstoryline, • hundredsofworldstoexplore, • andthousandsofnewfriends.
Deep space is opening very soon! Do you have what it takes to conquer it? Find out at http://far7.by, follow the news at http://twitter.com/far7_by and don’t forget you are the master of your own destiny!

About Me

My name is Dominic Szablewski, I live in Germany near Frankfurt and I recently finished my bachelor for Digital Media at the Hochschule Darmstadt. The topic of my bachelor thesis was HTML5 Gaming. My JavaScript Game Engine Impact and the first demo game Biolab Disaster were initially created as a proof of concept for this thesis, but evolved into much more.

I write about my projects and web technology in general on my blog PhobosLab.org and on twitter.com/phoboslab. I now try to make a living by creating games and selling Impact. So far it’s working.

The Idea

Z-Type was specifically created for Mozilla’s Game On. I immediately wanted to participate in the competition when I first heard of it, but the deadline seemed so far away that I didn’t bother to begin working on a game back then. Fast forward to this tweet announcing that the deadline was only one week away – it took me by surprise. I still hadn’t even began working on anything. The thought of just submitting my earlier game Biolab Disaster crossed my mind but was immediately dismissed again.

Because time was short, I decided to create an open ended arcade game where you shoot for the highscore. A game like Tetris that just gets faster and faster the longer you survive. A game where I wouldn’t have to design multiple levels or write a story.

I enjoyed Crimsonland’s Type-o-Shooter mode back in 2003 and recently discovered Typing of the Dead. And while many JavaScript and Flash Apps out there test your typing speed, they make no attempt of being a game. So I set out to fill that void with Z-Type.

Although the games don’t look or play alike, the name Z-Type is an homage to the classic space shooter R-Type – but with a Z! Because Z is a really cool letter.

Graphics

I initially wanted to create a Resident Evil like setting with zombies and lots of blood and gore. But considering the time frame and my limited artistic abilities, I ultimately decided for a more abstract space theme. I also wanted a game that looks modern to show that Impact can be used for more than just retro pixel style Jump’n'Runs. The simplistic, yet shiny looks of Geometry Wars came to my mind.

The most important thing when you want to create such a neon look is that you don’t just draw some semi transparent PNGs to the canvas, but draw them with an additive blend mode. You can switch to the additive blend mode in the canvas API using ctx.globalCompositeOperation = 'lighter'. Now, when you drawn an image onto the canvas, the resulting color of each pixel will only be lighter, but never darker than the destination pixel. This is great for explosions, fire and all kinds of self illuminating effects. All the spaceships in Z-Type are drawn in this mode to give them the glowing look.

The background of the game consists of two layers: one is just a static gradient from black to blue, the other is a slightly tilted grid that constantly scrolls downwards to give a sense of movement and progress.

All fonts in the game are drawn from font bitmaps instead of using the canvas APIs .fillText() method. This is done for two reasons: it’s fast and it looks exactly the same in all browsers on all systems, regardless of the installed fonts or how .fillText() is implemented.

Technology

Z-Type is built on top of my JavaScript Game Engine. It solely relies on the Canvas element for drawing. This had some negative performance implications in the past, compared to using lot’s of HTML elements, but the Canvas drawing performance in the newest generation of browsers is really excellent. Also, from a game programming standpoint, drawing in a Canvas feels much more natural; it feels like the right thing to do.

The engine already provides much of the stuff any 2D game needs. That includes animations, background drawing, collision detection and response, pre-loading, timing, sound and input facilities and game entity management. With all this in place, the source for the game itself (minus the word list) clocks in at just 1100 lines of code.

All enemies are subclassed from a base enemy class that draws the label, manages targeting, health (remaining letters), being hit and spawning explosions on death. The actual enemy classes used in the game are only about 30 lines of code each, as their individual AI is very simple – deciding for a direction to fly to and (for some enemies) spawning a missile once in a while.

Gameplay

It’s the small details, the polish, that make or break a game.

The one thing I took special care of with Z-Type is that every shot you take, every keystroke, is as satisfactory as possible. It’s a lesson that is preached and lived by id software – the creators of the Doom and Quake series. The plasma bullet you shoot has to look awesome, it has to sound awesome and there has to be an explosion for every single hit. It is absolutely necessary that you feel powerful while playing the game even if you are not.

Consider this; what is more fun: shooting at an enemy twenty times with a pistol, or shooting at twenty enemies with a rocket launcher? Both might be equally challenging, but the latter is much more satisfactory because you get better feedback. Tweaking a game to feel right in this regard is hard work, but work that certainly pays of.

Z-Type also tries to be smart about which enemy you are targeting. If two enemies start with the same letter, it always chooses the one that is closer to you. Furthermore, the game tries to avoid making this decision in the first place: it tries to spawn enemies whose first letter is unique at the give moment.

Another important lesson I learned throughout my years of playing video games is to be forgiving to the player: Always decide in the players favor. There’s nothing more frustrating than a bullet hitting you that doesn’t look like it’s hitting you. On the other hand, nobody minds when it looks like a bullet hits you but doesn’t actually do any damage. Quite the contrary: you feel lucky. Thus, the collision boxes for the enemies and the player in Z-Type are a good deal smaller than their graphics. It doesn’t matter if the game is fair, as long as you are the one who is in favor.

This also means that if you are unsure if your game is too hard or too easy – which is often difficult to tell because you as the developer already know the game in an out – always err on the “too easy” side. That’s something I learned the hard way: I got it horribly wrong with my way too hard iPhone game Yuckfu a few years ago.

Sound

Similarly to some gameplay aspects, sound is an often overlooked topic. There are only 4 different sound effects in Z-Type, yet I spent more than a day to find the perfect set. The important thing here again was the feedback you get from these sounds. Your plasma bullets have to sound powerful, but not at the cost of being annoying when you type 90 words per minute.

I used the excellent Audacity sound editor to cut, combine and modify my sound files. The plasma sound for instance, was created from 3 different source files: An anti tank gun (from a sound CD), a bullet hitting a watermelon (from a YouTube video) and a “laser” sound (from an old PC game). Combining these was a tedious process, because I didn’t really know what I was doing. And even when it sounded good in Audacity it sometimes just felt wrong in the game when played in context. Nevertheless I’m quite happy with the result.

The Music was done by my good friend Andreas Lösch, who also provided the music for my previous games. I initially wanted something really ambient and unobtrusive, but decided for a slightly different direction after hearing one of his piano arrangements again. I asked him to make some modifications on it for the game – removing vocals, make it loop-able etc. I’m very happy with the result and the mood it creates in the game.

The state of HTML5 Audio support in browsers is sadly still okay-ish at best. You have to deal with pops and clicks (IE9, Opera, Safari), severe lag (IE9, Firefox 3.6 & 4b9), refusing to play short sounds at all after a few seconds (Chrome 9 & 11 dev) and downright broken implementations (Mobile Safari). And dont get me started on the fact that you have to provide your sound files in the Ogg Vorbis and MP3 codec, because Microsoft and Apple are too arrogant to support and open standard.

I hate to say it, but as good as the Canvas support in all browsers has come to be, as broken, ignored and unpleasant to work with is HTML5 Audio right now.

Release

Shortly after publishing Z-Type it exploded on Reddit, StumbleUpon and some other sites, bringing in hundreds of thousands of visitors. This really took me by surprise – I liked what I had achieved but I had no idea that a typing game would be this popular. My guess is that it has to do with the game’s accessibility – anyone who can type on a keyboard can play the game and be good at it, even if they never played a video game before.

Many complained that the game was too easy, or that the difficulty level doesn’t increase fast enough. And while I suspect that many others where happy with the difficulty, it really does plateau at a certain level. So this is something I still want to fix in the coming days.

All in all developing Z-Type has been a really fun and rewarding experience. My thanks go to Andreas Lösch for providing the music, everyone who voted for the game and of course the Mozilla Game On staff for organizing this contest. Thank you!

Who are TuBaGames?

Well, we’re Steve and Oliver Baker – a father and son team from the UK, now living and working in Texas. We’re long-time 3D graphics enthusiasts and amateur games writers. Linux folk may remember Tux the Penguin – A Quest for Herring which we created back in 1997 when Oliver was just 7 years old – it was the first ever 3D game for Linux. Back then graphics cards could draw just a few hundred triangles and the artistic demands were minimal at best. TuxKart was a much better game – that came along in 1999 and was to be found on most Linux distro’s for years afterwards. Fast-forward to August 2010; we’d been watching the progress of WebGL and decided to try to write some online games using it. Because we intend to fund the web site using advertising revenue alone, we can’t afford a massive server farm to host the games. So we needed to come up with games with low server demands. Turn-based games fit the bill quite well because the server code can sleep while players are deciding what to do. Thus was born “TuBaGames.net” (TUrn BAsed GAMES for the NET). Our vision – though constantly subject to redirection – is that we will have a large library of games, in which players can compete in, and are ranked. The BarFight serves as a lobby in which people can hang out and let off some steam. We have some interesting ways of publicizing matches and making high-ranked games the “must see attraction”; so stick around and see how far TuBaGames will go.

Inspiration for the Saloon

The first thing to build for TuBaGames was a “lobby” area where players could come together to chat, hang out, maybe buy and swap in-game items and arrange matches. We came up with the idea of having a virtual bar-room, with tables where people could meet up in the virtual world and drink virtual beer. It was a small step from there to a Wild West Saloon. At about that time, we caught the announcement of the Mozilla GameOn 2010 contest – and decided that this would be a great way to get publicity for the site. Since all we had planned out was the Saloon, it was natural to try to make this into a game and that’s how “BarFight” was born…a cosey chatroom – with extreme violence mixed in for fun! In the process of finding concept art for Oliver to work with (WikiCommons – we love you!) we realized that what we wanted wasn’t a realistic saloon – but rather the kind you see in just about every 1940′s western – the kind where someone spills a drink on someone else – and within about 10 seconds there are three dozen cowboys swinging punches at each other and generally smashing up the place!

The bar fight in Roy Rodger’s movie: “Rough Riders Roundup” (which is now out of copyright) was the perfect inspiration. The idea that our players are just a bunch of “extras” in a Hollywood movie explains why nobody is ever seriously hurt – and let’s us get away with some awful cliches.

The Work process and the Father/Son thing

Since we live 180 miles apart – we use copious text messaging, email and daily half-hour long phone calls. We probably wind up communicating more than most families who live in the same house! We also have our own private Wiki where we keep reference art, documentation and the all-important “To Do List”. We’ve taken to using “unison” to keep our PC’s in sync with each others files and for updating the server. We use online tools for things like compiling the server and converting models from Blender to JavaScript. That infrastructure soaked up quite a bit of development effort – but it proved utterly invaluable – well worth the effort. It also allows to quickly expand our library of games in the future. Staying good friends through the process worked out OK – although we had a few ‘tense moments’ during the worst of the sleep-deprived crunch. What’s remarkable is that Francoise (wife/mother) and Tracy (girlfriend) are still with us afterwards! All credit goes to them!

Development

* Oliver (who is the artistic one) modeled the saloon, its inhabitants and about 40 other props using Blender and GIMP, putting together over 50 separate animations and around 100 texture maps.

* Steve (who is a dyed-in-the-wool code-head) set about writing a WebGL-based renderer in JavaScript to draw it all, shader code in GLSL, Python to export Blender models and a server in PHP and C++. In all, about 20,000 lines of code.

* Reagan Smith (a friend of Oliver) recorded all of the voices for us – he’s an absolute star! We still have a ton of silly cowboy phrases to work into the game…er…dag’nabbit!

* The web site itself was more or less a joint effort in PHP, CSS3 and HTML5 – using MySQL to store user preferences. We like to be “light on our feet” and change plans as often as it makes sense. The original vision was to stay “turn-based” and to use an orthographic perspective to allow you to see the entire bar room at a single glance. But on a whim one day in mid-December, we switched to an “over the shoulder” camera view and were blown away with how good it all looks like that – so now you can switch cameras to a variety of different views. If you grab some colored glasses, you can even go into the “Options” menu and turn on stereographic 3D rendering. The “turns” in the turn-based system were gradually reduced from 20 seconds to 5 seconds – and eventually to 1 second. It’s still really “turn based” under the hood – but it looks more or less interactive to the end user. The control system is intended to help “casual” gamers – you can just click on something or someone in the saloon – tell your guy what to do – and then be free to do something else as he does it. It’s definitely not intended to be a “twitch response” kind of a thing.

The software for rendering the cowboys and cowgals is really complex – and probably the most sophisticated piece of “tech” in the game. We only have three blender models – one for all of the cowboys, one for the cowgirls and another for the dancers. Because JavaScript is pretty slow, the whole business of switching clothing, texture and color is handled inside the GPU. The “Wardrobe department” lets players customize their characters. Animation uses “skeletal meshes” – Oliver uses blender to describe how the “bones” move and the position of each bone is stored for every 24th of a second of animation. Steve’s shader uses the bone structure to position the vertices of the “skin”. There are 30 bones for each character – including some special ones such as the “skirt bones” for the dancers and a “revolver bone” for the players.

As relative newbies at web development, we faced a bunch of struggles and setbacks – not least because we were initially working with decidedly flaky daily builds of Firefox 4 and Chrome “Canary”. It’s been a continual problem to know which problems were of our own making – and which were “Browser-induced” – especially because we wanted the game to work in both Linux and Windows and with both Chrome and Firefox. Another incredibly tough issue was figuring out how Blender stores skeletal mesh animations – that cost close to a month of coding time! HTML5 audio has been another area of considerable difficulty. On the plus side, we found ourselves relying more and more on HTML5 and CSS3 – our original menu system was rendered in WebGL – but when we discovered downloadable fonts in CSS3, that whole business became a lot easier. The WebGL team at Khronos, Apple, Mozilla and Google were of tremendous help when we found bugs – they were often able to turn out bug fixes in less than a day! WebGL exceeded our expectations in most regards – we even managed to squeak in an optional dynamic shadow renderer.

Work really kicked into high gear over the Xmas break – we both crunched 18 hour days with far too little sleep trying to get it all done by the Jan 11th cut-off. As with any game in production, ambitions begin sky-high, and you just KNOW you’ve created the most revolutionary game since Pong, but inevitably things get cut (though a surprising portion of ideas stayed into the BarFight game) and with a tight deadline, things get pushed over to the next deadline, and it’s near impossible for developers to be satisfied with their final product. That said – we are very proud of our game, and we will even get a chance to improve upon it, and polish it even more!

(A great feature of web based games – no set delivery date, and all people need to do to download a patch is to “Reload”) Our main focus at this point though, is to move on to making tons more games! You can find out much more about the development process at our Colophon page.

Gags, Easter Eggs, In Jokes

To the left of the screen is the “RowdyMeter” – if players can make enough mayhem, a bunch of dancing girls appear and dance the Can-Can for you! There are numerous references to our buddy, Tux the Penguin – and if you zoom into the beer bottles, you’ll see what the beer is made of! For those more engrossed into the graphics world might enjoy some of the paintings as well! (Not just the one above the bar either!) Several of the non-player characters have names that show up when you mouse-over them – check them out on Wikipedia – you may be surprised at what you find!

What’s Next?

Well, catching up on sleep is high on the priority list still! We still have work to get BarFight utterly done – get the kinks out – learn lessons from the people who played it. Because it’s still going to become the “lobby” for our game site, we have to do some restructuring yet. Beyond that, there is always “The Next Game” – we’re thinking about sailing ships – pirates maybe. We’re also in discussion with a local rock band about doing a large scale sci-fi land-combat game based around their themes…in exchange for some really cool sound tracks and mutual publicity.

Thanks to all who entered, the voters, and our judges!

Here are Your Winners!

BEST OVERALL: MARBLE RUN by STRAVID

What is MARBLE RUN all about? It’s about fun and easy gameplay. It’s about creativeness and playfulness. It’s about being a part of a big piece, actually a big marble run. Everyone is invited to build a track and add it to the big marble run. By doing so we will all create the longest marble run ever in history. The longer the run gets, the more special bricks will be available allowing us to build even more creative and awesome tracks. Long story short – it’s all about building stuff like we all did when we were little kids.

Resources used: PrototypeJS (http://www.prototypejs.org/), cookies-js-helper (https://github.com/tdd/cookies-js-helper), box2d-js (https://github.com/jwagner/box2d2-js)

Play the Game or See the Source

BEST TECHNOLOGY: FAR 7 by SONTAN

Far 7 is a MMORPG which allows you to become a star pilot and navigate your starship just using your browser. Here you will find everything you could be longing for: real-time battles and flights, cool soundtracks, tones of weapons, amazing quests, trade, friends, enemies, feats!

Play the Game

BEST WEB-INESS: MARBLE RUN by STRAVID

What is MARBLE RUN all about? It’s about fun and easy gameplay. It’s about creativeness and playfulness. It’s about being a part of a big piece, actually a big marble run. Everyone is invited to build a track and add it to the big marble run. By doing so we will all create the longest marble run ever in history. The longer the run gets, the more special bricks will be available allowing us to build even more creative and awesome tracks. Long story short – it’s all about building stuff like we all did when we were little kids.

Resources used: PrototypeJS (http://www.prototypejs.org/), cookies-js-helper (https://github.com/tdd/cookies-js-helper), box2d-js (https://github.com/jwagner/box2d2-js)

Play the Game or See the Source

BEST AESTHETICS: SKETCHOUT by Fi

Your home planet is being attacked by evil aliens! Use your galactic influence to draw out constellation shields and reflect the incoming missiles back at your attackers. If all else fails you can use your last defensive shield but whatever happens you mustn’t let a missile hit your planet! Created by Fi together with the Google Chrome Team.

Play the Game

MOST ORIGINAL: FAVIMON by OULIPIAN

Favimon is a web-based game in which you battle your favourite websites, building a collection of icons as you attempt to conquer the web.

Resources used: Favimon is a browser game coded in HTML, CSS, JavaScript and PHP. It uses jQuery, jQuery UI and plugins qtip2, timers, and jStorage. It retrieves favicons using Google’s favicon API and the getFavicon app.

Play the Game

MOST POLISHED: WEBSNOOKER by LEEK

Websnooker is a multiplayer online snooker arcade game.

Resources used: Editor: vim/geany/dreamweaver, GFX Editor: GIMP/Photoshop

Play the Game

MOST FUN: ROBOTS ARE PEOPLE TOO by RAPT

Robots Are People Too (RAPT) is a complex and challenging HTML5 platformer. The exit to each level is blocked by enemies that roll, jump, fly, and shoot to prevent escape at all costs. Gameplay is exclusively two-player and uses a unique split-screen mechanic. The levels and enemies are designed to promote cooperation between players. RAPT also comes with a powerful level editor which allows players to create levels of any size. Levels are saved to the player’s account on the server, which has a public page listing custom levels that can be shared with friends!

Resources used: RAPT relies on jQuery, Google Closure Compiler, Rails, and PyNarcissus.

Play the Game or See the Source

COMMUNITY CHOICE: Z-TYPE by PHOBOSLAB

A Space Shoot’em’Up where you type to shoot.

Resources used: HTML5 Canvas, Audio & JavaScript via ImpactJS – http://impactjs.com/

Play the Game

Closing Credits

We couldn’t have conducted the Game On competition without the help of some special people and partners:

• Game On Community: for playing and voting
• Our Expert Judges: for making thoughtful decisions
• Our Prize Sponsors: Adobe, Nvidia, Think Vitamin, Yahoo! Games
• Game On Project Team: for coding heroically and designing fearlessly

Most of all, we want to thank every single developer who participated in making a game for the Game On competition – for showing the world what the Web can do.

GAME ON

So here’s how to vote:

1) Click on the Big Red VOTE NOW Button on the Game On homepage

2) Register for a Game On account

3) Vote Away! You’ll be shown 5 random games to evaluate.

Have fun playing and choosing your Community Choice favorites! To check out all the games, visit the Game On Gallery.

GAME ON: VOTE NOW!

This year, the event is kicking off in New Zealand, and taking place over the weekend of January 30th in 170+ locations over 44 countries with 4000 registered participants worldwide. In addition to digital games, board game design and non-digital games have been added to the mix. GGJ 2011 will also feature keynote speakers from the gaming industry including Katamari Damacy & Noby Noby Boy creator Keita Takahashi.

For updates about the event, you can follow along their Twitter @globalgamejam and search for #ggj11. You can still sign up as participants for this weekend’s Global Game Jam at sites all over the world. Check out some locations near you: http://globalgamejam.org/Locations.

Due to the awesome response from our wider community, we have extended the voting period for the Community Choice award until February 1. Take 5 minutes (or hours…) to play some magnificent games and vote your favorites for the Game On Community Choice award. We will be randomly selecting three lucky voters and send you a special-edition Mozilla Labs Game On swag pack!

GAME ON!

Here’s a quick and friendly reminder that this is your last week to VOTE for the Community Choice Award. We created this category for you – the game player community – to rate the sheer awesomeness of these games.

So if you haven’t already voted, here’s how to do it:

1) Click on the Big Red VOTE NOW Button on the Game On homepage

2) Register for a Game On account

3) Vote Away! You’ll be shown 5 random games to evaluate.

Have fun playing and choosing your Community Choice favorites!

GAME ON: VOTE NOW!