I'm a writer and visual artist in St. John's, Newfoundland, Canada.

For more frequent updates, follow me on Instagram or subscribe to my email newsletter.

Posts tagged “Game Design” (page 2 of 2)

Make No Wonder – Footprints and Fog

Summer seems to be wrapping up quickly, although it’s been a wonderful late August here in western Newfoundland. I’ve been making a ton of progress on my summer game project, Make No Wonder, and have been meaning to post an update here for a while.

You can try out Make No Wonder (draft version 3) here. Right now, the game works best in Chrome and Safari. Firefox will also work, but the game takes a little while longer to load. I haven’t tested it much in Internet Explorer, but it should work in IE9.

The last time I posted about this project was in July, and I had gotten bogged down for a while with that version of the game. Most of the problems stemmed from the map, which I was unhappy with – the random islands I was generating were not very complex, and were mostly featureless aside from the various resources for the player to collect. I wanted to add some variety to the terrain, but I had been using SVG to generate the islands, which seemed to limit what was possible. I also kept running into random bugs with browser-based SVG, and the Raphaël library I had been using seems to be stuck in development as the creator has been promising version 2.0 for months.

This new version of Make No Wonder uses the HTML5 canvas element. Switching to canvas has solved many problems, while also opening up a lot of options as I continue to develop the game. When I first started working on this project I’d considered using canvas, but was thrown off by the fact that elements drawn on the canvas couldn’t respond to click events or other interactions. I’ve since learned a lot about optimizing the code for this kind of tile-based game, and it turns out that the lack of mouse events for things drawn on the canvas really isn’t a problem. I just keep track of where everything is as part of the data for each tile, instead of using the elements themselves for collision detection.

The biggest change with the current version of the game is that instead of generating an archipelago of distinct islands, the game terrain is generated using a heightmap. This more complex approach to map generation is something I’d been wanting to do from the start, but I couldn’t figure out how to implement a heightmap in JavaScript until I found this excellent blog post from Jason Brown: Terrain Generation with Canvas and JavaScript.

My idea for Make No Wonder has always revolved around distinct ‘island’ areas with their own ecosystems, which are disrupted as the player explores. One interesting problem with this new heightmap terrain is that the landscape is not divided as clearly into different islands. The heightmap nearly always generates islands, but because the terrain is represented by an array of height values rather than distinct island areas, there is no easy way to check which island a given object is on, or if two objects are on the same island. For example, in earlier versions of the game, some islands started out with trees, and some didn’t. If I simply randomly generated trees evenly throughout the heightmap terrain, this effect would be lost. Instead, I randomly distribute a small number of trees, and then have those trees ‘grow’ into little patches of forest as part of the map generation. This means some areas of the map have a lot of trees, while some don’t. The trees also continue to spread during gameplay.

It turns out that not having to keep track of every little object is also a huge benefit of working with canvas. In previous versions of the game, the footprints that appear as the player walks were drawn either as SVG objects or divs, littering the game with hundreds of objects as the player explored. This also meant that all the footprints looked the same. In this new version of the game, the footprints are drawn directly onto the canvas, so they don’t bog down the game with lots of individual objects to keep track of. Footprints now also accurately reflect the direction the player is walking in, and their appearance is randomized slightly, so they look more natural.

Using canvas also made it possible to add the ‘fog’ that obscures areas the player hasn’t explored yet. I’d thought that this would be rather tricky to implement, but it turned out to take about 10 minutes. Of course, I ended up spending another hour resolving a glitch where the canvas globalCompositeOperation mode ‘copy’ didn’t erase the fog properly in Firefox for some reason. In the end, I was able to use the ‘destination-out’ mode to achieve the effect I wanted.

I’m currently working on making the terrain and game elements more varied, including adding different kinds of trees, plants, and animals. I’m also fine-tuning the controls – I’d like to try making it so that you can collect nearby objects using the mouse, and perhaps add mouse-based movement like in my Newfoundland Hex Map Interaction. I also plan to adjust the amount of resources needed to build things, and adjust it so that you can only carry so much wood or stone at a time, as this will encourage the player to create trails as they walk back and forth to gather resources.

I received a Professional Project Grant from the Newfoundland and Labrador Arts Council to work on this project, which has made a huge difference in the amount of time I am able to spend working on it. I’ve very grateful for the support.

Make No Wonder – Bugs and Sprites

My summer game project is coming along well. I’m leaving for a trip to the U.S. this week, and was hoping to post a new draft version before I left, but it looks like it will have to wait until I get back. As you can see from the screenshot above, the game has progressed a little graphically, and I’ve added a number of new types of objects, and the ability to build permanent bridges and walls. I’ve also rewritten a ton of code to make it more efficient. I’m still working with Raphael and SVG, but unfortunately I’ve run into a serious bug that affects scrolling SVG patterns in Safari. Basically, when the window scrolls, Safari does not scroll the SVG fill patterns, which makes the game sprites look completely garbled. I keep running into random bugs like this, which are made even more frustrating by the fact that not many people are using browser-based SVG, so when I do happen across a bug there is little documentation to be found and there is nothing I can do to fix it. To avoid some of these problems I am going to switch to using DOM elements like divs to create some of the sprites, instead of SVG objects. This is the technique I’ve been using for my previous games (Probable System and Favimon). Since I’ve started to use pixel art for some of the game graphics, this makes more sense anyway – the advantage of SVG is that I can easily draw and animate vector shapes, but once I start creating pixel-based artwork, divs with background patterns will work just as well. I’ll still use SVG for things like the islands, which are randomly generated, and stones placed in the water, which are animated as they sink.

Make No Wonder Draft Version 1

  • Make No Wonder (draft version 1) game screenshot
  • Make No Wonder (draft version 1) game screenshot
  • Make No Wonder (draft version 1) game screenshot
  • Make No Wonder (draft version 1) game screenshot
Make No Wonder (draft version 1) game screenshot

Make No Wonder (draft version 1) game screenshot

Make No Wonder (draft version 1) game screenshot

Make No Wonder (draft version 1) game screenshot

Make No Wonder (draft version 1) game screenshot

Make No Wonder (draft version 1) game screenshot

Make No Wonder (draft version 1) game screenshot

Make No Wonder (draft version 1) game screenshot

I’ve been working on a draft design of Make No Wonder, which you can play here. It’s definitely a little rough around the edges at this point, but I’ve resolved a couple of major bugs which were slowing things down. One huge drawback to browser-based game development is that every browser has its own quirks, especially with lesser-used features such as SVG. I’m using the Raphaël library, which is convenient in some ways, but working with both it and jQuery occasionally causes problems.

This draft version demonstrates a few of my ideas for Make No Wonder, including randomly generated islands, collecting objects to increase mobility, and the player leaving a permanent trail behind them. It’s fairly simple for now, but now that I have the basic engine working, I can start to include more complex environments and interactivity. Right now I’m working on adding the mouse-based controls from my Newfoundland Hex Map Interaction to this design.

The screenshots above are from a slightly earlier version of the game where stones were coloured yellow. The islands generated at the moment are fairly simple, and stick to a grid – I need to combine this version with some of the code from my earlier experiments (see my Random Islands post). There are also problems at the moment when the islands generated are bigger than your browser window – try reloading the page to get a new random collection of islands if that happens.

Make No Wonder and Random Islands

  • Random polygon islands 1
  • Random polygon islands 2
  • Random polygon islands 3... one big one.
  • Random polygon islands 4
Random polygon islands 1

Random polygon islands 1

Random polygon islands 2

Random polygon islands 2

Random polygon islands 3... one big one.

Random polygon islands 3... one big one.

Random polygon islands 4

Random polygon islands 4

I found out recently that I have been awarded a Professional Project Grant from the Newfoundland & Labrador Arts Council to work on an interactive digital art project. My proposed project is to create an ecology-themed game artwork, tentatively titled Make No Wonder. I’ve posted a little about it on my Projects page.

This project is a progression from a couple of previous art-game projects, Probable System and Favimon. Probable System is an exploration game that takes place in a typographical world inspired by Canadian experimental poet bpNichol (it can be played online at probable.ca). Favimon lets you collect and battle your websites based on their favicons in a never-ending quest to capture every website, and can be found at favimon.com. In February 2011, Favimon won the Most Original award in the Mozilla Labs Game On 2010 open web gaming contest. I wrote a long blog post about developing Favimon for the Mozilla Labs blog.

Make No Wonder will take place in a virtual archipelago, allowing the player to explore the environment, gather resources, and gradually build bridges, rafts, and other forms of technology. As players explore, their actions and traces permanently affect the ecosystems of the islands, encouraging them to think critically about their choices. The artwork will investigate ecological concepts such as biodiversity, resource management, and invasive species. The game will be coded in HTML, JavaScript and PHP, and will run in a web browser. I have a ton of ideas for things that I want to work into the game, some more challenging than others. I’ll be writing about the project here as I work on it, including posting some code and links to interactive demos.

The images above are from some early sketches for Make No Wonder; I wrote a little script that generates random polygon-based islands on a square grid. I’ve been experimenting with the Raphaël JavaScript library for this project. It’s a great way of working with SVG (vector graphics) in JavaScript, but it’s been a bit finicky trying to get it to play nicely with jQuery, and it slows down considerably when dealing with hundreds of SVG paths, so I may not end up using it for the final project. Still, it’s been handy for quickly prototyping things. I’ve actually done a lot of work since generating the polygon islands above, and have been experimenting with hex grids instead of square tiles. Hexes can be very unintuitive from a coding perspective, but they allow for a less boxy-looking landscape, and movement across hex tiles feels more natural. It probably also helps that I have been playing a lot of hex-based games such as Settlers of Catan and Slay. One inconvenience about hex maps is that movement in six directions doesn’t map nicely to arrow keys, but I want to work with mouse-based interaction for this project anyway, as it will be easier to translate into a touch interface.

I’m really thrilled and honoured to have received the Arts Council grant. I put a lot of work into my application, but wasn’t sure the committee would go for it; the idea of games as artwork is still something that has not gained wide acceptance. I am incredibly grateful to the NLAC for granting me the opportunity to really focus on this project over the summer, and am looking forward to documenting the project here as I go.

Game On Spotlight: Favimon

This is a guest blog post I wrote for Mozilla Labs. It’s on the Mozilla Labs blog, and I’m cross-posting it here.

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 travelling 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, focussing 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.

Favimon.com versus Mozilla Labs

 

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 – 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 – 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, which I understand is a pretty terrible game, 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 – I don’t play a lot of video games, but 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 – 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 – try 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 underappreciated 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.

Someone sent me this screenshot of their Favimon collection.

 

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 – 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 – 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 @oulipian on Twitter.

Content ©  2019 Matthew Hollett. RSS