So You Want to Make a Computer Game: Interactivity

October 30, 2015

Last time in our quest to create a computer game we pieced together a virtual world to move about in from a series of pictures taken with a camera. This gave a nice virtual tour of the area we photographed, but it was a rather empty experience because we were lacking anything that could be interacted with. This time we’ll rectify that situation by adding an interactive location that the player can search for a valuable item.

If you weren’t able to take your own pictures or had troubles getting them into the Adventure Maker game creation system we chose for our game, you can use my “in progress” Adventure Maker project. To do so, follow these six quick steps:

  1. Download my work in progress Adventure Maker project.
  2. Right-click on the downloaded file and select “Extract All…”
  3. Choose an easy to find location, such as your computer’s desktop, to extract all the compressed project files to.
  4. Start Adventure Maker after the contents of the zip file have been extracted.
  5. From the “Main Menu” window of Adventure Maker, click “Load Project…”
  6. Select the folder that you extracted the contents of the project zip file to. Adventure Maker should open the project in progress.

While we’re downloading things, today’s installment is going to add another node to our virtual world. This node will be a bit different as it will include various “sub images” as special hotspots within it. If you’re using my project and pictures then you’ll want to download the extra images we’ll be using today.

All right. Got your project? Or my project? Good. Then we will continue.

Today we will be adding our first interactive area into the game. An interactive area is a spot that the player can go to and do more than just simply moving around the virtual environment. It’s a spot where they can manipulate objects within that environment.

In my game, the ultimate goal is to reach a lost pirate treasure hoard. To access that treasure hoard, the player first needs to get a key that is locked up. The player has to get rid of the lock in suitably pirate fashion, namely by shooting it off with a flintlock pistol. To do that, they first have to find said pistol.

The above description details the chain of events that the player must follow to complete the game. There’s not much to it, but remember from the first lesson that we’re going to keep the game very, very simple. You’ll notice that the chain of events is described in reverse, that is the last thing the player needs to do is described first and the first thing they need to do is described last. As I’ve mentioned in the production blog for my other computer game Sleuthhounds: The Cursed Cannon, I’ve found it useful when constructing these chain of events to start at the end and figure out the obstacles that prevent the player from reaching that end working towards the beginning. Your mileage with this technique may vary. Remember, there is no one right way to make a computer game.

For this blog we’ll be implementing the search for the flintlock pistol (the rest of the interactions will come in subsequent blog posts). For my game, I want the player to find and search a pile of old pirate bones to come up with the pistol. Here’s an example of roughly what the player will encounter in game:

[Click to search the pile of bones.]
Click to search the pile of bones.

To allow for this interaction in the game, I first need to take pictures of the bone pile to use as the artwork. With it being almost Halloween it’s the perfect time to get props for pictures like this. I actually had a plastic skeleton and various pirate paraphernalia (the patch, the hat, the pistol) from a past Halloween to use here. Your local dollar store is a great place to find props like this very cheap. As well, if you wait a day or two, all those Halloween decorations the big stores are stocking will go on sale at massive discounts (the stores need to clear out the Halloween decorations to make room for the Christmas ones). Making use of sales and dollar stores, you should be able to get all the props we’ll be using for this game for under fifty dollars.

In terms of taking the pictures, one of the paths the player can explore in my game leads to a large bush (at node 25 if you’re following along with my work in progress project). I returned to that bush to take pictures with the props. I first put all of the props in place and took a picture of that. I then removed the hand and took a picture, the arm and took a picture, the skull and took a picture, and finally the flintlock itself and took a last picture.

A few notes on taking the pictures:

  • It works best putting all the props in first and taking pictures as you remove them rather than adding more props into the picture. You’ll find that it takes more time to add in props and arrange them than it does to have them all their and remove them. As well, you’ll find it more likely to bump already placed props when adding new ones into the scene.
  • You want the different pictures to line up as much as possible so that they don’t seem to “jitter” around when incorporated into the game. As such, I recommend setting your camera on a tripod. If you don’t have a tripod or you’re using a cell phone that can’t be mounted on a tripod, any steady surface will do such as a small stool, bench, or stack of books.

In Adventure Maker we could make each of the stages of searching the bone pile separate frames, just as we’ve done for the regular rooms. However, I want to take this opportunity to show you another technique and to teach you about the “scary” world of variables.

First of all, we will be creating one new frame in Adventure Maker using this “empty” background (i.e. the image taken after removing all the bones and the flintlock). Into this frame we’ll add one hotspot covering most of the frame that will lead the player back to the node they came from (in my case node_25_1). That’s the same kind of hotspot linking we did last time so I won’t go into the details here again.

Next, from the picture containing the flintlock but none of the other bones, I want to extract a small part of the image to a separate image. Enough to represent the flintlock and the area of the image that I want to allow the player to click on to pick up the flintlock. Something like this:

[Keep more of the image than is strictly needed to make a larger hotspot.]
Keep more of the image than is strictly needed to make a larger hotspot.

If your camera came bundled with software for manipulating your photos, it should allow you to crop them, which you can use to get this sub image. Or you can use the Paint application that comes with Windows to do the same thing. You can find Paint in the Start menu under “All Programs > Accessories > Paint”.

When creating this sub image, to better organize your files you may want to name it such that it matches with the node that it’s being used in. For example, in my project the empty background is called node_26_1. To keep this first sub image related to the main image I’m going to call it “node_26_1_sub_1.jpg”.

Note: If you’ve downloaded my images to use be aware that they haven’t been cropped. I’ve left that as something for you to do to get the experience.

Back in Adventure Maker, draw a box for another hotspot. It doesn’t matter how big the box is, we’re going to use the sub image of the flintlock we just created for this hotspot, which will cause Adventure Maker to size the hotspot box automatically for us.

Once you create the hotspot box, the Hotspot Properties window will display as usual. There’s a few things we want to do here.

On the “General” tab in the “Cursor when over the hotspot” section select a cursor of an open hand to show that this is an area the player can interact with. This is the same as choosing a direction arrow cursor when moving between nodes as we covered last time.

Still on the General tab in the “Hotspot Appearance” section, choose “Picture”. This will make a few more controls visible. Click the “Click here to select a file…” button. This will open a Resources Management window. At the top of this window click “Import File…” and select the sub image of the flintlock you just created. This will cause the sub image to be displayed on top of the node’s regular background image, giving the illusion the flintlock is actually part of the background but also allowing it to be removed.

[Set the mouse pointer and the picture.]
Set the mouse pointer and the picture.

On the “Action” tab of the Hotspot Properties window, click the checkbox that says “Hide and disable this hotspot (permanently)”. When the player clicks this hotspot in the game it will disappear. This will represent the flintlock being picked up. We want the hotspot to disappear in this case because we don’t want the player to be able to keep picking up an unlimited supply of flintlocks.

Still on the Action tab, click the checkbox that says “Display a text message”. We want to provide the player with some feedback about the flintlock when they pick it up. In this case we’ll do that with a simple text message at the bottom of the screen that says “An old flintlock in fine working condition. Feels like it still has a shot in it.” This text will appear when they pick up the flintlock and will hint to the player that they’ll be able to shoot the flintlock at some point.

[Set the hotspot to hide permanently and to display text when clicked.]
Set the hotspot to hide permanently and to display text when clicked.

On the “Variables” tab of the Hotspot Properties window click the checkbox that says “The hotspot (or picture) must be enabled (or visible) only if…” to make a few more controls appear. Click the “Add…” button next to “…the value of the following variable is 1:” field. This will open a window called “Global Variables”. I’ll describe variables more in a moment, for now click “New Integer Variable” and when asked to enter a name type in “skull_moved” (without the quotes) and click OK. Click OK again on the Global Variables window.

[Base the visibility of the hotspot on the new skull_moved variable.]
Base the visibility of the hotspot on the new skull_moved variable.

Click OK on the Hotspot Properties window to return to the Frame Editor. You should now see the sub image for the flintlock on top of the background image without the flintlock. Carefully click and drag the hotspot so that it matches up with the background image. Something like this:

[Position the flintlock hotspot so it matches with the rest of the background.]
Position the flintlock hotspot so it matches with the rest of the background.

Right, just before I go through what all that did, first we need a brief discussion on variables.

Terminology: Variables

One way or another, variables are what make games tick. Games would be pretty boring if they were just a virtual world that you only walked through and not be able to change anything. And that’s what “variable” means: capable of being changed.

Games use variables to keep track of things that are changing. For example, if a monster is hunting a player then a variable would be used to keep track of the position of the monster (it changes as the monster moves). Another variable would keep track of the position of the player. Or maybe we have an action game and the player is getting injured. We’d use a variable to keep track of how much health the player has left.

Variables keep track of these different values or “states” that exist within the game. The game can then use these variables to make choices and provide interactivity. For example, we might have a variable representing whether a light has been turned on or not in a spooky basement. The game can then check that variable and decide that if the light has been turned on then the player can move along safely. If the light hasn’t been turned on then the player is likely to be eaten by a Grue.

These are just some of the many uses of variables in a game. The main thing to know is that variables can change and based on what value they have, different things will happen in the game.

So we’ve created out first hot spot based on an imported sub image (the picture of the flintlock laying in the grass). We’ve gone further than that as well. We’ve set the hot spot so that when it gets clicked on it will disappear as though it’s been picked up and it will display a line of text describing the flintlock.

We’ve also set up the hotspot so that it will only display if the “skull_moved” variable has the value of 1. That’s what all that gobbledygook on the Variables tab means: The hotspot must be visible only if the value of skull_moved is 1.

At this point, you can click the “Test Frame (Preview)” button on the “Frame Editor” window on the left side of Adventure Maker. You should see the empty background image BUT you won’t see the flintlock hotspot we just created. The reason is because of that skull_moved variable.

All variables need to have a starting value. They need to have an initial state. In Adventure Maker, every variable we create has a starting value of 0. So with that in mind, the flintlock not showing up makes perfect sense. We told Adventure Maker to only show the flintlock when the variable is 1.

So the real question is, how do we get that skull_moved variable to be 1? For that we need to add another hot spot to our node.

First, close out of the game preview. You can do this by right-clicking anywhere in the preview and selecting “Exit” from the menu bar that appears. That will close the preview and take you back to the Frame Editor.

Using the same process as for adding the flintlock hotspot, go ahead and create a hotspot for the skull, without the arm bone or the hand bones. Note that when you’re creating the sub image for the skull that it needs to include the flintlock behind the skull as well. Remember that our main node background image does not have the flintlock in it. If you don’t include the flintlock part of the picture with the skull, then when the skull displays it will display by itself and moving it will suddenly cause an invisible flintlock to appear in a disconcerting way.

[The skull cropped to also include the flintlock.]
The skull cropped to also include the flintlock.

When you get to the Variables tab for the skull you’ll want to do the following:

  1. Where you set up the skull_moved variable for the flintlock hotspot now set up an “arm_moved” variable instead. This is saying don’t show the skull hotspot until the arm has been moved (which will be another hotspot we’ll add in a moment).
  2. At the top of the Variables tab click the checkbox that says “Change the value of one or more variables when the user clicks on this hotspot.” This will make more controls visible. Click the “Add…” button next to the middle field, the one that says “Variables the value of which must become 1”. This will open the Global Variables window again. In this case we don’t want to create a new variable, we want to use an existing one. Double click on the skull_moved variable.

[Set the skull hotspot to change the skull_moved variable when clicked.]
Set the skull hotspot to change the skull_moved variable when clicked.

We’ve now created another hotspot like the one for the flintlock but this time for the skull. However, this hotspot has one important difference from the flintlock hotspot. The extra bit that we put on the Variables tab says that when the skull hotspot gets clicked, we want to change the skull_moved variable to the value 1.

You’ll recall that all Adventure Maker variables start off set to 0. So now skull_moved will change to 1 when the player clicks on the skull hotspot. And when skull_moved changes to 1, Adventure Maker will see that the flintlock hotspot should be visible and so make that hotspot appear.

Just as you set up the hot spot for the skull, you need to now set up a hotspot for the arm bone (whose sub image needs to include both the skull and the flintlock). This time on the Variables tab you’ll set the “Variables the value of which must become 1” to be the arm_moved variable. You’ll also create another new variable called “hand_moved” which will be used at the bottom of the Variables window for the variable that must be 1 for the arm hotspot to appear (i.e. we only want the arm hotspot to appear once the hand has been moved).

Finally, you’ll create one last hotspot for the hand bone (whose sub image needs to include the arm bone, skull, and flintlock). This hotspot should cause the hand_moved variable to be set to 1 when clicked. However, this hotspot should not have any variable references in “The hotspot (or picture) must be enabled (or visible) only if…” section. When the player first enters the close up of the bush and sees the pile of bones we want them to see the hand right away. Then, when they move the hand, they’ll see the arm bone picture, when they move the arm bone they’ll see the skull, and when they move the skull they’ll see the flintlock.

Once you have all the hotspots in place, click the Preview button again. Now you should see the bush scene with all the bones in place. Click on the hand bone and it should look like it disappears, leaving the rest of the bones behind. Click the arm bone and you should be left with the skull and flintlock displaying. Click the skull and you should see the flintlock. Click the flintlock and you should see the empty background and the line of text describing the picked up flintlock.

If you don’t progress through the bone pile as described above, that’s all right. Take your time to work through each hotspot and their variables again and make sure everything is in order.

This step in creating our game may not seem like a big one, especially compared to last time. After all, last time we created an entire virtual world to run around in and this time we only added one new node. However, in terms of learning how to make a game we took a GIANT leap forward. Variables are the corner stone of all games. Regardless of the software you are using to create a game and regardless of what that software calls them, you will always, always be using variables to control how your game proceeds. Adventure Maker simplifies variables down to their most basic form being able to only be set to 0 or to 1. Other systems allow for any value to be stored in a variable. Understanding Adventure Maker’s basic system will give you the foundation to move on to more complex game development systems.

See you in two weeks’ time when we build on using variables and picture hotspots to allow the player to actually take that flintlock with them and use it elsewhere rather than just have it disappear. Happy Halloween!

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