Make No Wonder launch screenshot

Finally, after almost a year of development, I’m launching Make No Wonder. It’s fully playable and pretty much finished, although I plan to keep adding things to the game, streamlining the code, and working on an app version. You can play the game at makenowonder.com.

I didn’t blog as much during the development as I’d planned, as I’ve been busy teaching. Here are some of the changes since I last posted a demo:

• I completely reworked the way the game is drawn on the screen, using HTML5 Canvas instead of DOM elements and CSS. This version also draws only the area which is near the player. This became necessary because previous versions simply drew everything on the map all the time, which meant that the browser spent tons of time drawing things that weren’t even in view, causing obvious performance issues (especially on larger maps). Over the past few months I’ve also spent a lot of time optimizing the way things are drawn, making the game load faster and reducing memory usage. I’m using sprite sheets for most of the graphics. There’s still some progress to be made here, but for the most part it’s working quite well now. DOM elements are still used for the cursor, the inventory, and other interface elements.
• The game interface has changed a lot, as previous versions were full-screen. Now the game is played in a smaller window, with space on the right for a mini-map, energy bar, actions list, and inventory. The game area can be resized using a control in the top-right corner, so you can make it fit better if you have a smaller or larger browser window.
• The energy bar is new. I initially wanted to avoid videogame conventions like an ‘energy meter’ and just let the player explore, but the game needed a mechanism to encourage the player to think about the most efficient way to do things, and add a little bit of tension. You can keep playing if you run out of energy, you just start fainting occasionally. You can also fall in the water now, which makes you cold. When you are cold your energy depletes more quickly.
• The player chooses what they want to build from a menu on the right side of the screen. In previous versions of the game, you would choose what to build by simply hovering the mouse over the map, since each buildable item was built on a different kind of tile anyway. This kept the interface simple, but also restricted how many things I could add to the game. I also wanted to move away from interactions that rely on mouse hover events, as I’d like to eventually make the game playable on touchscreens, which do not have hover events.
• The game now uses a grid-based inventory system. Items can be stored at various sites on the map (caves, camps, and so on), and some sites provide an infinite source of certain items. Some special items take up more than one inventory space.
• I added forests with larger trees – firs and birches. The game really started to come together when I added these, as they serve as large obstacles (until you build an axe), making exploration more complex. The smaller trees are still around, as a source of wood when you don’t have an axe. The smaller trees drop seedlings and spread as you play. The larger ones don’t, mostly because there are so many of them that it seems unnecessary.
• The terrain is more complex, with larger mountains and more variation in land terrain tiles. I animated the waves, and the area outside the map shows larger animated waves instead of empty space. A few other things are animated as well.
• The map has a softened effect, with tiles that blend into each other. This was something I always wanted to add, but it was tricky since to keep the game running smoothly it’s necessary to draw as little as possible. In the end, I discovered that I could create a ‘fuzzy’ map by basically enlarging the mini-map in the corner, placing it behind the tiles, and drawing slightly smaller tiles. Since the game was drawing the mini-map anyway, this turned out to be fairly efficient, and I’m really happy with the effect.
• There are tons more inventory items to find and build – 20 different kinds of items so far. This is a big difference, as earlier versions only had wood, stone, and a few special items to find. I’ve replaced most of the special items with buildable versions, so (for instance) you can craft an axe instead of finding one randomly on the map. I think this makes the game more fun, and less dependent on chance.
• There are lots more structures, vehicles and tools to build, too. You can see a few new ones in the screenshot above – ziplines, canoes and quarries. The ziplines are particularly fun, as it’s possible to build pretty complex transportation networks. Other new stuff includes shovels, which let you dig for items Zelda-style, and snares, which provide a new food source. I haven’t provided any complete list of things you can build, preferring to let players figure things out for themselves. For some hints, see the FAQ and screenshots.
• There are a couple of key sites to find, with special items. These are placed randomly and right now their locations are marked on the mini-map when you start, but this will probably change. I would like to hint to the player which direction these are in, without marking their exact locations.
• The game has an ‘ending’, which is not so much as an ending as a reward for players who figure things out and pay attention. It is fairly tricky to figure out, and I need to work on the logic of the ‘story’ a little more. I may expand this ending in the future, or add alternate endings.
• The game has a home at makenowonder.com, with a newly redesigned logo, a snazzy map size selection menu, frequently asked questions, and so on. Try it out!

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’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.

With its rows of brightly-painted townhouses, rolling hills, and fog churning in every evening, San Francisco reminded me of a larger, exaggerated version of St. John’s. Like downtown St. John’s, it rewards pedestrians with a lively panorama of colourful architecture and charming neighborhoods. We spent four full days wandering the city, traversing just about every neighbourhood described in our travel guide. Avoiding the touristy areas at first, we eventually ended up among the gift shops and animated crowds of Fisherman’s Wharf, where we were lucky enough to stumble across the Musée Mécanique.

The Musée’s narrow rows of quaint wooden structures were almost a miniature version of San Francisco’s streets, and promised as much: numerous brightly-painted signs offered the thrill of racing simulations, baseball games, and other challenges in exchange for a coin or two. Plunking a quarter through a slot might cause an entire matchstick circus to spring to life, or an elaborate mechanical orchestra to launch into a tune. Other cabinets beckoned with darker fare, including several mechanical puppet shows dourly reenacting executions, and plenty of peepshows featuring hand-tinted photographs of scantily-clad models. A few machines offered the city itself: foggy vignettes of a much younger San Francisco, or worn stereograms of impossible devastation from historic quakes.

Both mechanical and electronic games had their place at the Musée, with video game classics like Pong and Pole Position adjacent to their penny arcade ancestors. In one corner a large cabinet with a steering mechanism allowed the player to wrench a tin car back and forth across a painted cloth road that scrolled rapidly, creating a twisting racetrack. I loved the tactile nature of the penny arcade machines; the tarnished buttons and quaint hand-painted signs, the creak, clack and clunk of convoluted wooden mechanisms, the hand-cranked peepshows. Even the dust covering the circus puppets made them seem more real. It is easy to imagine the maintenance required to keep such antiquated equipment in working condition, and the machines felt frail but cared-for; even Pong’s slowly wavering screen and primitive paddle dial lent the game an elderly tenderness. Such a sumptuous entertainment; compared to the full-course feast offered by Musée Mécanique, playing Tiny Wings on my iPod feels like swallowing a pill.

The Musée itself seemed strangely automated; though the aisles were crowded with visitors, I didn’t notice anyone who looked like an employee. Admission was free, though the coin-operated machines happily accepted cash. Appropriately enough, the “gift shop” was a vending machine near the entrance, dispensing booklets, DVDs, and other souvenirs.

My first video game system was an Atari 2600, with its eclectic assortment of controllers: two plastic joysticks, a pair of Pong paddles, a steering wheel, and a square pad with a buttons and paper overlays for each game. One of the paddle controllers snapped in two during a particularly epic game of Space Invaders, and my dad fixed it with an old thermostat dial, forever associating in my mind childhood video games with the phrase “comfort zone”.