So You Want to Make a Computer Game: The Virtual World

October 16, 2015

In the previous installment of my So You Want to Make a Computer game series, I described how you could generate most of the needed art with nothing more than a digital camera and an hour or two of you time. This time out, we’ll use those gathered photos to start building the virtual world in which our game will take place. In other words, by the end of this post we’ll have the beginnings of a game in which you can actually move around in.

Before we start creating the game, we need something to create the game with. Don’t worry, for our first project you won’t have to have any knowledge of computer programming or anything like that. Instead, we’ll take advantage of the heavy lifting done by others and use a pre-built game creation system and game engine.

For our simple starting game we’ll be using the game creation system Adventure Maker, which was developed specifically to create Myst style games. Given the narrow focus of this game creation system, you wouldn’t want to use it to develop something like a platformer, shooter, or other action game. However, for our purposes it will work well and illustrate concepts that will be useful to know regardless of the type of game you wish to make.

Adventure Maker can be downloaded for free from the developer’s website. The free version of Adventure Maker has a few limitations that the paid version does not. We’ll discuss some of these as they come up during our game development; however, one important one to be aware of is that games created with the free version require that people playing those games also have the free version of Adventure Maker installed on their machines (this limitation is removed with the paid version of Adventure Maker).

When you download Adventure Maker you will be given a setup application that will install Adventure Maker on your computer. Go ahead and run this, installing the game creation system wherever you desire. If you want, you can examine and play around with the sample games included with the download. They’ll illustrate more of what you can do with Adventure Gamer than I will be covering in this series of articles.

All right, so we’ve got our game creation system. We need to get from this point to the point of having our pictures integrated into the game creation system and playable as a game. We’ll do this with using the venerable step by step approach.

Step 1: Download Pictures from the Camera

Depending on if you’re using an actual camera or a camera in a cell phone, the process for downloading pictures will probably be different. Some devices may give you special software to download the pictures, others may just require you to plug the camera into the computer via USB and then Windows will automatically guide you through the steps of downloading the pictures. Consult the manual for your device for details.

Regardless of how you get the pictures onto your computer the important thing to note is where you are saving those pictures to. You’ll need to know this for the following steps.

If you haven’t taken your own pictures then you can use mine. They’re bundled together in a single compressed zip file. Once you’ve downloaded them you will need to extract them from the zip file. In Windows you can do this by right-clicking on the zip and selecting “Extract All…” from the menu that is displayed. Windows will then walk you through the process of extracting the pictures.

Download my images here!

Important Note: One of the limitations that the free version of Adventure Maker has is that it only allows up to 150 images to be used within it. If you have more than that number of images, then you should go through them now and determine which ones to throw out.

Step 2: Rename the Pictures

When you download the pictures off of your camera they will likely have names along the lines of IMG_20150918_131349.jpg. Basically the date and time or some other generic file name. These generic file names aren’t too useful for game making so we should change them to be more useful and to help us make sense of the images from a game perspective.

As I described last time our game is made up of a series of nodes that you move between. And each node is made up of a series of images. I recommended four images for most nodes. To help organize the images I suggest renaming them to be like:

node_<node number>_<image number>.jpg

• <node number> = The number of the node the images are for.
• <image number> = The number of the image in the node. You could also use a direction indicator like N, S, W, or E.

So an image with a name of node_7_3.jpg would be for the seventh node in the game and the third image that makes up that node.

When I took my pictures at each node I would take one picture along the main walking direction (“forward”), turn to the left, take a second picture, turn to the left again (now facing opposite the main walking picture), take the third picture, turn left again, and take the fourth picture. Hopefully, the following figure will make that more clear.

File names for four images for node 1.

I won’t lie, renaming all the pictures is a bit tedious to do, but it will make our lives a LOT easier later on. Note that the images included in my zip file, described above, have already been renamed.

Step 3: Resize the Pictures

Most cameras these days take fairly large pictures in order to capture as much detail as possible. Even my cell phone takes pictures at a size of 2592x1944 pixels. Hi-definition monitors typically run at 1920x1080 pixels, considerably less than the size of these pictures.

The reason the picture size is important is that one of the limitations that Adventure Maker has is that it does not scale images to fit the size of players’ monitors. Instead, you have to make the pictures at a size that will work on a wide variety of computers.

Adventure Maker’s default size is 640x480 pixels. This can be changed per game, but for our first game we’re just going to go with this default size. For one reason it’s fewer settings we have to change in Adventure Maker, and for another it means that the file size of our final game will be much smaller.

One of the helper tools in the Adventure Maker game creation suite is “Batch Picture Resize and Compress”. This small application can be used to change all of our pictures at once. You’ll find this application in your start menu under “All Programs/Adventure Maker v4.7.1/Tools”. Running this application will take you through four easy steps to resize your pictures for use in Adventure Maker:

1. Choose the pictures. This is where it’s important to know where your pictures have been saved to. Navigate to the folder containing them and select all of them.
2. Resize the pictures to be 640x480 pixels.
3. Compress the pictures to make them take up less space on the hard drive. The default quality setting of “15” should be more than adequate for our purposes.
4. Save the resized pictures. Choose a folder in which to save the pictures. Note that the application will actually create a new folder called “Output” in the folder that you select to actually put the pictures in. As such, you can even choose the folder with the original pictures and not have to worry about them being overwritten by the new ones. Be sure to remember where this output folder is as we’ll want to use the pictures from here instead of the original much larger pictures.

Note that the images included in my zip file, described above, have already been resized to 640x480 pixels.

Important: Before proceeding it’s critical that you have your pictures at the size you intend for your game to run (in our case 640x480 pixels). As far as I can tell, Adventure Maker does not provide a nice way to let you change the size of the pictures after you’ve started using them in the software. You have been warned!

Step 4: Start a New Game Project

Whew! OK, we’re finally ready to use Adventure Maker itself. When you start Adventure Maker and are using it for the first time it will pop up a bunch of windows periodically offering you tips and help on how to get started with the software. I recommend giving these a read at least once, but you will probably start to tire of them after a while, so feel free to turn them off if you don’t want to see them anymore (turning them off is clearly marked in the software itself).

To start our new game we first need to go to the “Main Menu” window and click New Project. Adventure Maker will ask you for the name of your project, which it will use as the folder name to save all your project files in, and a folder in which to save that project folder. I gave my project a name of “Treasure of the Prairies”.

Adventure Maker will then ask what platform you want to make the game for. To make our game as widely available as possible we’ll just go with the default Windows option.

Step 5: Add Nodes to the Game

Once you’ve created the project you’ll be presented with a large, empty, white window called “Frames Management”. This is where all your images will appear as you start to add them into the game.

All right, let’s create our first node.

Start by clicking on “Create New Frames…” at the top of the Frames Management window. My first node is made up of four images named as follows:

• node_1_1.jpg
• node_1_2.jpg
• node_1_3.jpg
• node_1_4.jpg

Add in all of the images that make up that first node. The Frames Management window will now show small thumbnails of each frame.

Double-click on node_1_1 to start editing how it works in the game.

node_1_1 will allow turning left and right, and walking forward as well.

As shown above, my node_1_1 image has a path leading up to a bridge with bushes on either side. The “off leash” sign in the picture is a bit odd, but at a later time I’m going to replace that sign with something a little more appropriate to my game. For now, don’t worry about it.

As we’re looking at the image we want to think about the other images in the node and how we want the player to move between them. My images are taken in a counterclockwise direction—from node_1_1 you turn left to node_1_2, left again to node_1_3, left again to node_1_4, and left again back to node_1_1. Turning right reverses that order.

So I know that when I’m on frame node_1_1 that when I click on the left side of the screen I want to turn to node_1_2 and when I click on the right side of the screen I want to turn to node_1_4. I also know that eventually, when I click in the middle of the screen where the bridge can be seen that I want to move to a different node altogether (in this case node 2).

Let’s deal with turning left first. Adventure Maker makes editing a single frame pretty easy. First we need to define a “hotspot,” an area of the image that the player can click on to cause “something” to happen. To do this, simply click and drag a box that covers the left part of the screen something like this:

The rectangle for our first hotspot.

When you finish creating the box and release the mouse button, Adventure Maker will pop up a “Hotspot Properties” window. This window has a lot of different options on it spread across multiple tabs. However, we’re only interested in a couple of options on the main “General” tab.

Set the left hotspot to go to node_1_2.

First, in the Hyperlink section we want to set this hotspot so that when it gets clicked, we turn left to node_1_2. To do this, click the “Go to another frame” checkbox. This will display the Frames Management window from which you can double-click on node_1_2 to create a link to that frame. The name “node_1_2” will now show next to the checkbox option on the General tab.

Set the left hotspot's mouse pointer to Arrow-Left.ico.

Next, we want to make the player aware of the direction they can move. Down in the “Cursor when over the hotspot” section click the “Click here to change…” button. A window will appear with a whole bunch of little icons. When the player is playing your game and they move the mouse over the hotspot, the mouse pointer will change to whichever icon you select here. Since we’re turning left we should choose an icon that indicates a leftwards movement such as Arrow-Left.ico. Double-click the icon you want to use.

And that’s it. You can now click OK on the Hotspot Properties window to finalize the link from node_1_1 to node_1_2. You can repeat the above steps but creating a box on the right side of the node_1_1 image to link node_1_1 to node_1_4, the image we want to show when turning right from node_1_1.

After you’ve added the node_1_4 hotspot, close the “Frame Editor” window to return to the Frame Management window. At this point you could go into node_1_2 and create a left hotspot to node_1_3 and a right hotspot back to node_1_1, but before you do that, we’ll take a slight detour to make what we’ve developed so far into something you can actually play.

Step 6: Set the Starting Frame

At this point you should be seeing the Frames Management window again. To the left of it should be another window called “Project Menu”. On the Project Menu window click “Project Properties…”.

A “Project Properties” window will now display. You can use this to control things like the title of your game and your author name and such. However, the main setting that we’re interested in at this point is the “Initial Frame” found at the bottom of the “General” tab.

Set the game to start on node_1_1.

From the dropdown in this section select node_1_1. This tells Adventure Maker that when the game runs you want it to start on that particular frame. If at a later time you decide you want to start on a different frame you can come back in here and change it. Hit OK to close the Project Properties window.

Now, the moment you’ve been waiting for. From the Project Menu window click the “Run Project” button. A basic game splash screen will appear. Click the Start button that it shows.

If you’ve followed everything up to this point you should now see the image for node_1_1 displayed on screen. If you move the mouse to the left side of the image it should change to a left pointing arrow. If you move the mouse to the right side it should change to a right pointing arrow.

Now let’s get really crazy! Click on the left side of the image where the mouse pointer has changed to the left arrow. When you do, the image shown should change to node_1_2. Congratulations, you’ve made your first game interaction!

In this play through you’ll very quickly notice that it’s also your last game interaction. You won’t be able to turn back to the right to see node_1_1 again. This is because we only set up a link FROM node_1_1 to node_1_2 and not vice versa.

To exit out of the game, right-click the mouse. This will cause a menu bar to appear at the top from which you can select “Exit” to return to Adventure Maker.

All right, it’s homework time. You now have the basics of bringing in images to use as new frames in Adventure Maker and the basics of connecting those frames so you can move between them. I’ll be back in two weeks with the next step in creating our computer game, adding some more interesting interactivity. In the meantime, you should import the images for all your nodes and connect them up.

A few last tips to help you out:

• Remember that when you create a hotspot from one node to a second node that you need to also create a hotspot on the second node to take you back to the first node. For example, on node_1_1 we created a hotspot on the left side of the screen that goes to node_1_2. So on node_1_2 we would want to create a hotspot on the right side of the screen that goes back to node_1_1.
• When creating a hotspot that goes to a different node altogether it’s important to think about which frame you want to go to, especially when you’re coming back from the other node. As an example, let’s assume that image 1 of each node is facing “forward” and image 3 of each node is facing “backward”. When moving from node 1 to node 2, we want to create a hotspot in the middle of node_1_1 that takes us to node_2_1 (both facing “forward”). However, when we move from node 2 back to node 1 we have to remember what direction the player will be facing. In this case, we would want to have a hotspot in node_2_3 (facing “backward”) to node_1_3 (also facing “backward”). It’s a bit weird to describe so maybe this figure will help:

Moving forward we go from frame 1 to frame 1. Moving backward we go from frame 3 to frame 3.

Right, so do your best to hook up your virtual world. For now it will basically just be a walking tour with nothing interesting to interact with, but we’ll change that next time.

If you’re using my images (you can download them here if you didn’t already snag them from above) the following diagram may be useful in connecting them together with hotspots. The diagram shows each node and the direction of movement to go between the nodes and the images within each node.

Node and frame map.
Click to view larger.

It took me about two to three hours to hook up all the hotspots for my virtual world. If you have trouble building your own virtual world, no worries, next time I’ll make my project in progress available for download.

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: