I'm a visual artist, web designer, and art educator in Corner Brook, NL, Canada.

Posts tagged “Make No Wonder” (page 1 of 2)

      Make No Wonder is an HTML5 game where you explore and disrupt a procedurally-generated wilderness landscape. I am very grateful to have received a Professional Project Grant from the Newfoundland & Labrador Arts Council to work on this project.

Make No Wonder – Canoes, Ziplines, and other things

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!

Make No Wonder – Fir Forests

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

Make No Wonder – Campsites and Fire

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.

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.

Content ©  2014 Matthew Hollett. RSS