Sep. 3
2011
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.
