So You Want to Make a Computer Game: The Artwork

October 2, 2015

Welcome to the second installment in my ongoing series on creating a computer game. Last time I described how we’d be making a very simple Myst style type of game. Creating even a simple game will help to give you the experience and confidence to develop something more ambitious afterwards. Today we’re going to start on the artwork that will form the backdrop against which players will experience the game.

Before we start on the artwork itself, it would be good to have a sense of the context in which the artwork will be used. Namely: what’s the story of our game?

It’s a simple story. In essence just a treasure hunt through the virtual world we’re going to build for our first game. So how exactly do we build that world?

In a Myst style game, the virtual world is broken up into a series of nodes. At each node you can typically turn in fixed increments, such as ninety degrees, and you can move from one node to an adjacent connected node. By properly arranging the nodes, this gives the impression of moving through an actual three dimensional space without requiring actual three dimensional graphics.

Throughout this series the game will be built without assuming any prior experience with the different aspects of game creation. This extends to the graphics as well. Obviously, we need some sort of images to form our virtual environment. The internet is full of tutorials on creating 2D and 3D images through a variety of techniques and I strongly encourage you to explore these if the visual side of game development is of interest to you.

Even if you have difficulty drawing a stick figure and smiley face, not to worry. For our game, we’ll be using a different technique to generate the background images that we need. We’ll be using a digital camera and taking advantage of the natural world around us.

Every place in the world has some area that is unique to it, whether it be rural or urban or arctic wastes. For myself, I live near a small nature park within the city. I’ll be getting my backgrounds by going to this park and taking pictures there. More on that in a bit.

If you’re going to be taking pictures, you need something to take them with. Enter the camera. Really any digital camera should suffice. Cameras these days pretty well all take pictures at sizes larger than what we’ll be using in our game so you won’t need anything super fancy or expensive. If price is a concern, check around at local dollar stores. Cameras are so ubiquitous these days that you can even sometimes find cheap ones ($10 or less) at places like these. For our game we’ll be taking about 100 to 150 pictures so be sure to factor that into things. For myself, I’ll just be using the camera built into my cell phone, which will be perfectly adequate.

The park I’ll be taking my pictures at has a series of walking pathways. To better visualize how this will work in our game, here’s a rough sketch of the pathways I’ll be taking pictures of.

Node map of the game.

Each of the hilighted areas in the above sketch will be a node in the game. At each of these places in the real world, I’ll be going and taking multiple pictures. At a minimum I need to take a picture in both directions along the path itself, since the player will be moving along these same paths in the game and so needs to be able to see where they’re moving. To make the game more immersive, I’ll actually be taking four pictures at each node. Two along the directions of the path and two at ninety degrees to those directions.

When I connect the pictures to form the game, having the four different views will allow the player to turn in a circle, in ninety degree increments, at each node.

Here’s a sample of four pictures taken for one of the nodes.

The four directions of a node.

And here’s how these pictures will “connect” to one another when used in the actual game.

Click the left or right side of the picture to turn in that direction.

Next time (in two weeks) we’ll get into the details of taking all of these pictures and starting to turn them into an actual game. Between now and then you should try to capture several nodes worth of pictures for yourself so that your first game can truly be your own. Here’s a few tips to help you along the way:

• For reasons that will become apparent next time, our game can only have at most 150 pictures in it. At 4 pictures per node that means that at most we can have 37 nodes. To be safe, it would be best not to take more than 30 nodes worth of pictures at this time.
• If possible, when taking your pictures try not to have people or your own shadow in them. Having “clean” pictures will help with the immersiveness of the final game.
• The sense of space that the game will have will be based on the distance between the nodes. If the nodes are too close together then it will take longer to move through them and the player will feel like they’re dawdling. Too far away, and the relationship between the nodes will break apart. Bends in the path or places where a path forks are good spots for nodes. As well, long stretches of straightaway in a path should have a couple of nodes to break it up. You may want to try a Myst game or two to get a feel for how far apart nodes should be.

Taking enough pictures to capture the backdrop for your virtual world shouldn’t be too arduous a task. With 30 stops, if you walk at a decent clip you should be able to get all the pictures you need in about an hour.

In case you don’t have access to a camera or a place that is particularly photogenic, not to worry. I’ll be making all of my pictures available for use in the next blog installment. Check back for that in two weeks’ time.

Read up on the whole “So You Want to Make a Computer Game” series:

• Part 1: The First Step
• Part 2: The Artwork
• Part 3: The Virtual World
• Part 4: Interactivity
• Part 5: Inventory Items
• Part 6: Custom Artwork
• Part 7: The Critical Path
• Part 8: Sound and Music
• Part 9: Deploying
• Part 10: The Path Leads On

Previous:   |   Next: