It’s been a few months since I posted an update, but my game project is really coming along. I’ll have a new demo version and a longer update soon.

Make No Wonder version 4 screenshot

I dreamed that I bought a building.

My building was on the harbourfront in downtown Corner Brook, which is geographically impossible. A commercial building, worn clapboard, brown paint peeling to reveal more brown paint. A single floor, doors in the centre of each side, small windows, a wheelchair ramp, a handmade sign over the entrance. A parking area on the right, a guardrail by the water. A paved road winding past the front door, a hill across the street full of yellowing grass. A pile of melting snow where the parking spots had been recently plowed. Salt air.

I dreamed the whole process. A tiny ad in the newspaper, a grainy photo of the place. Thinking oh, that old spot, wouldn’t that be fun? All of my friends are buying houses, so why not. A lowball bid on a lark. Then the phone call, the unanticipated win. Putting down the phone and thinking, What am I going to do with a building?

In my dream I updated Facebook: I BOUGHT A BUILDING. Congratulatory comments from friends. Oh, you bought a house! No. Oh, are you starting a business? I don’t think so. Then why did you buy a building.

I drove over to meet the building. The proprietor was a tall man who seemed ready to retire. Oh yeah, he said. We used to wash dishes. But the IGA put me out of business. They can wash dishes faster than we can. We toured from room to room, pushed open tall dark wooden doors. A dimly-lit hallway, old wooden furniture with dust in the cracks, little rings of lace under the lamps. Through a doorway and suddenly we were in a small, well-lit diner with tables and red upholstered seats. A tired-looking waitress tidied up tables after some final small gathering. There were water glasses on the tables, almost empty. The waitress pushed through swinging doors into a kitchen, carrying dishes. A basket of homemade buns on the counter by the cash register, with a little handwritten note saying: Take these home. Thank you for buying our building.

We used to do breakfast, the proprietor said. Really good breakfast here, pancakes and waffles. In my dream I felt guilty about having never been there for breakfast. There isn’t anywhere to get a decent diner breakfast in Corner Brook.

I said to the proprietor, Let me ask you a question. Just off the record, not legal advice or anything. The truth is, I’m not much of a businessperson. I’ve never bought a building before. I guess my question is, what am I supposed to do? What is required. Do I have to sell all this stuff? Do I have to wash dishes? Does it come with anything? Do I employ anybody? Should I tear the building down? Can I live here?

I don’t remember any answers. I remember looking up at an ornate hanging lamp and thinking, I can start an artist-run centre. Then imagining someone swinging from the lamp and thinking No, that won’t work. The noise would bother the neighbours. Maybe a studio. I remember thinking, At least during the next election I can let the NDP use it as a headquarters. It would be a good location for that.

Found on the sidewalk in Halifax.

Mostly Lost Cities.

I’ve updated my Make No Wonder version 3 demo to include some new code. In this updated version, the fog that obscures the unexplored landscape does not remain cleared as you walk around – you can only see a small area immediately around you. I like the sense of isolation and the unknown that this creates. It also allows the player to get lost – when playtesting the game, I found myself sometimes following my own footprints to find my way back to where I had started.

To permanently clear the fog, the player must build campsites. These use up a lot of resources, and can only be built on 4×4 areas of flat land. Once a campsite is built, the area in a radius around the campsite will remain clear of fog as it is explored. To fully explore the map, the player must periodically build campsites across the landscape. Hovering the mouse over a campsite shows the circular area covered by the campsite (the yellow dotted line in the screenshot above).

I also added a feature where if you build a campsite too close to a tree, the tree can catch fire. Fire spreads to other tiles and destroys trees (and therefore the player’s wood supply), as well as built objects such as bridges. I tried to make the fire spread quickly enough that it seems unpredictable and dangerous, but still slow enough that a quick-thinking player can harvest some wood before the fire gets to it, or even create a firebreak. The fire element was partly inspired by Minecraft, which I’ve been playing a little lately.

One of the things I want to work on next with Make No Wonder is limiting the amount of resources the player can carry at once. Campsites might be used as a place where the player can store resources to retrieve later. I also need to improve the fire animation, animate the campsite tiles, and fix a few new bugs.

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.