This is a guest blog post by Matthew Hollett, the creator of Favimon, winner of the Most Original award in the Mozilla Labs Game On 2010 competition.
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.