So You Want to Make a Computer Game: The Critical Path

December 11, 2015

Welcome once again to my ongoing series on helping you to create your first computer game. Last time we tackled the challenge of doctoring artwork to create special custom scenes for use in our game. However, after all that work we didn’t get around to incorporating that artwork into the game itself. That’s the situation we’re going to rectify today. After we finish incorporating all of those new assets we’ll have a game that can be playable from beginning to end.

If you’ve been using my pictures through this series of tutorials but didn’t have the time to finish the artwork changes from last time, then you’ll want to download the final doctored pictures for use today.

And if you’re not up to date on the Adventure Maker project (remember, the last thing we did to the project was to add inventory items into it), then you’ll want to download the project as your starting point for today.

Oh, and you may want to grab a snack for this tutorial. I was mistaken (again) and this one ended up being another long one. But the next one will be shorter. Maybe.

Extending the Virtual World

For this tutorial we’re going to be adding some new nodes into our game world, changing the pictures used in some existing ones, and setting up more game variables (you do remember those from our discussions on interactivity and inventory items?) to control how the player proceeds through those nodes. Here’s a look at an updated map for what our virtual world will look like after we make all our changes.

Node and frame map.
Click to view larger.

Today we’ll be adding in the orange nodes. This is done by creating new frames in Adventure Maker just as we did when first creating our virtual world. So first go ahead and connect all the new nodes as per the map above.

A few notes to help you along:

• The “intro” node will now be our first node in the game. It should have one large hotspot covering it that goes to node_1_1 with no way back.
• To make the intro node the first node in the game, don’t forget to go into the Project Properties window, accessible from the Project Menu when you have no nodes open, and set the initial frame to “intro”.
• Node_35_1 is a close up of the welcoming sign we made last time. To reach it, create a hotspot covering the sign in node_1_1 and give the hotspot a different cursor from the left, right, and forward cursors already used (I used a pointing finger cursor). This is to show to the player that clicking in this area will do something different than moving between normal nodes.
• On node_35_1 itself create one large hotspot that, when clicked, backs out to node_1_1.
• When creating the virtual world for the first time I had omitted node_15_1 from that particular tutorial. However, when I made the Adventure Maker project available for download in subsequent tutorials I had already incorporated that node. Whoops! If you’ve downloaded and are using any of my projects to this point then you’ll already have node_15_1 included. Otherwise you’ll need to add it today. To do so, create a hotspot on the door on node_14_1 that leads to node_15_1. Node_15_1 should have hotspots on the left and right that go to node_14_2 and node_14_3 respectively. Sorry about that, chief!
• On node_15_1 don’t create a hotspot leading to node_28_1 just yet. We’ll deal with node_15_1 in more detail later.
• Node_31_1 is the door into Captain Rotgut’s crypt. We’ll be doing more with this later. For now create two hotspots, one on the left leading to node_30_1 and one on the right leading to node_30_3.
• Nodes 32 through 34 are each made up of only single pictures, rather than full “wrap around” frames. This is because these nodes are zooming in more and more on the contents of Captain Rotgut’s crypt. These nodes should have a large hotspot at the top that goes to the next node and a smaller hotspot along the bottom that allows players to zoom back out to the previous node.
• On the “outro” node don’t create any hotspots just yet. We’ll be dealing with this node shortly to allow the player to quit the game once they reach this point.

Replacing Artwork

We’ve now got our virtual world extended. However, we have to revisit some of our older nodes to update them to account for the artwork changes we made last time. We’ll start with node_1_1.

Last time, we created a new background image to use for node_1_1. The new image replaces the dog sign with a welcoming sign that provides a few hints to players on what they should be looking for. However, at the moment we still have that dog sign in our actual game.

Changing an existing background in Adventure Maker is fairly straightforward. First, open up the Frame Editor for node_1_1 just as you would if you were going in to work on its hotspots. The background image itself is not a hotspot, but we can still get access to its properties.

With node_1_1 open in the Frame Editor, click the “Frame Properties…” option on the menu on the left side of the screen to open the “Frame Properties” window. On the “General” tab you’ll see a section called “Frame Background” with a button that should say “node_1_1.jpg”. Like so:

Change the Frame Background to the updated image.

Click the button to open a Resources Management window. By default, this window will show all the pictures we’re currently using as backgrounds in our project. However, we want to select a new replacement picture. Click the “Import File…” button at the top of the window. A standard Windows Open dialog will appear. Use it to find the new node_1_1.jpg picture and open that file. You should then be returned to the Frame Properties window. Close that and you should see the background for node_1_1 is now updated to show the modified sign instead of the original dog sign.

Before and after updating the frame background.

It may seem like a small thing, but learning how to replace assets you’ve already incorporated into your game is very important. Here we’re using Adventure Maker, which makes it pretty easy to change assets. Depending on the game creation system you choose to use for future games the method by which you replace assets will be different.

Using this same frame background replacement technique there are several other background images that need to be replaced:

• Node_14_1
• Node_15_1 (if you didn’t just add node_15_1 today, see my earlier “whoops” remark)
• Node_27_1

In addition to replacing the backgrounds of several nodes, we also need to replace the image used for one of our hotspots. Specifically, we’re finally getting rid of that flimsy piece of string that’s holding the hatchet in place on node_27_1.

In the Frame Editor for node_27_1 open the Hotspot Properties window for the hotspot of the tied down hatchet. Click the button down in the Hotspot appearance section and then locate the new node_27_1_sub_1.jpg image to use, just like you did for the main backgrounds. When you return to the Frame Editor you should see the updated hotspot now showing a metal latch holding the hatchet down. You may need to adjust the position of this hotspot to properly line up with the background.

The updated hatchet hotspot.

The Critical Path

All right, we’ve finished dealing with all the existing bits of our game. Now it’s time to move onto those new nodes we added and incorporate the hotspots and variables we need to control how the player proceeds through the game. This will complete the “critical path” through the game, the series of steps that the player must perform to get from the beginning of the game to the end.

We’ll start on node_15_1. Right now we have hotspots leading left and right. We also want a hotspot that allows us to go inside but only if the door is open.

So first create a hotspot using image node_15_1_sub_1.jpg. This is an image we created last time of the door open instead of closed. When clicked, this hotspot should take the player to node_28_1. While creating this hotspot switch to the Variables tab of the Hotspot Properties window. We want to create a new “outside_open” variable that we’ll use to keep track of if the outside door is open or not. We only want our hotspot to show if outside_open is 1. For a refresher on setting up variables check out the information on creating interactivity in our game world.

So how do we open the door? For that we need another hotspot. Create a hotspot not based on an image that also covers the door. This is what the player will click on to open the door. I gave it a hand cursor instead of an arrow cursor to show to the player that they’ll interact with the door. Over on the Variables tab, you’ll want to make sure the hotspot only shows when outside_open is 0 (meaning the door is not open) and you’ll want to change the outside_open variable to 1 when the hotspot is clicked on.

Now we have a node where when the player arrives they’ll see a closed door. When they click on it the door will open and then they can click again to go inside. This is all right but we can spruce things up a little bit more here.

When I played through my game I found having a door with a pirate sign on it was a little odd in the setting. I wanted to provide the player a little more feedback on what exactly they were encountering. So I created a third hotspot over the door. This hotspot disappears permanently and sets outside_open to 1 when it’s clicked. It also displays a line of text reading, “Captain Rotgut’s crypt.”

The result is that the player will receive the message the first time they click on the door, which causes this hotspot to disappear permanently. Subsequently, the player will interact with the second hotspot we created, so they’ll just open the door without receiving any message.

Wait a minute? Subsequently? Right now when the player opens the door it just stays open. Well, we want to change that. After all, it’s going to look odd in the game if the player opens the door at node_15_1 and then travels back to node_14_1 and they see a closed door there.

Node_14_1 always shows the door as cloesd.

In this case, we want it so that when the player turns left or right at node_15_1 or exits out of the interior from node_28_3 then the door should close. To accomplish that, we just need to go into each of those three hotspots and change the Variables tabs for them to set outside_open to 0 when clicked.

If you test the game now, you should be able to open the door and go inside (receiving a text message the first time you click on the door). You should also then find that when you leave node_15_1 and come back to it, the door will be closed again.

Right, now that you’re hopefully back into the swing of things with hotspots and variables I’m going to give you the chance to develop the next couple of nodes yourselves. After all, it’s no good if I just give you all the answers.

The next node you’ll want to move onto is node_31_1. This one is going to be another door very similar to the outside one that we just completed. Let me explain what we’re going for here and then using the appropriate images and what you’ve just gone through with creating a door you can try your hand at this one.

From our earlier expansion of the virtual world, we added node_31_1 with the background image node_31_1.jpg, which shows the door here open. We also have two hotspots leaving the node to the left and right. Here’s the rest of what we want on this node:

• We want to have image node_31_1_sub_1.jpg, which shows the entire frame with the door closed, to display while a new variable door_open is 0. Note that when you add this hotspot in, it will cover up all other hotspots already in the frame. This is because hotspots lay over top of one another like a deck of cards. You’ll want to have this hotspot be at the bottom of that deck. To get it there, right-click it and choose “Send to bottom” from the menu that appears. Your other hotspots should now be visible again.
• We want a hotspot over the door that will only be enabled if the door is closed (based on door_open) and unlocked (based on a new door_unlocked variable). Basically, we want the hotspot to tell Adventure Maker the door is open when it gets clicked.
• We want another hotspot over the door that goes to node_32_1. This hotspot should only be enabled when the door is open.
• We want a third hotspot over the door that only appears while the door is locked. Clicking on this hotspot should display a message stating that “It’s locked.”
• We want a hotspot over the lock in the image that, when clicked, will cause a message to display stating “It’s an intricate lock.”
• When the hatchet is used on the lock (because the hatchet is the lock’s key) we want a message to display stating “The hatchet fits the lock perfectly!” We also want the door to then become unlocked. Check back on the tutorial about inventory items if you need a refresher for this one.
• Finally, when the player clicks on the left or right hotspots we want the door to close again, just like the outside door.

Once you’ve finished work on node_31_1 you can then move to node_32_1. When the player has the door open, they can move forward a little bit, but they can’t quite enter the crypt yet because it’s going to be all dark and they need to light it. At node_32_1 you should see the lit node_32_1.jpg background and have a hotspot leading into the crypt to node_33_1 and one leading back to node_31_1. Here’s the rest of what we want on this node:

• We want to have node_32_1_sub_1, which shows the dark version of the room, to display while a new variable crypt_lit is 0.
• We want the hotspot to node_33_1 to only be enabled if crypt_lit is 1.
• We want the hotspot back to node_31_1 to turn the crypt lights off.
• We want a new hotspot that covers the pull string that will be used to turn the lights both on and off just like a light switch. To do this, you’ll need to use a new box on the Variables tab called “Variables the value of which must be inverted”. Every time a hotspot with a variable in this box is clicked that variable will change. So if the variable is a 0 it will become a 1. If the hotspot is clicked again it will go back to being a 0. Then 1, then 0, then 1, ad infinitum.

All right, one last node to deal with and that’s the “outro” node. Right now, when the player gets to the end of the crypt and discovers the treasure they can click on it and then they are taken to the outro node. This is the final node the player will encounter in the game and will give the player a final summation of what they’ve accomplished. After this, we want the game to end.

The option to close the game at the end.

This node currently doesn’t have any hotspots. We’ll add one that covers the entire frame so that it will be triggered when the player clicks it. Open the Hotspot Properties window for the hotspot and switch to the “Action” tab. Here we’re going to make use of the “Close the program” option. Adventure Maker will warn us about using this option since it will stop players from being able to save. However, since they’ve reached the end of the game there’s no more need to save, so we’re OK with that.

And that’s it!

That’s all our changes to our game world this time around. You should now be able to play the game through from the beginning intro screen right to the ending outro screen and be able to solve all the puzzles along the way.

This time out we did a few more complex things with game variables and hotspots. I really wanted to give you a chance to play with variables a bit more. As I’ve stressed previously, variables are fundamental to making interesting games. Hopefully with what you’ve now learned you can start seeing how variables can help you make quite intricate games indeed. You just need to think through what you want to accomplish and then translate that into how the variables should work.

Our game’s not quite done at this point. While it’s now looking visually complete, and it’s littered with interactive areas, it’s still a very quiet place. I think the word I’m looking for is silent. Next time we’ll be completing the in game experience by adding music and sound effects. Check back for that in two weeks (ooh, Christmas day!).

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: