Room Escape

Escape the Room Game Tutorial

Introduction

The purpose of this tutorial is to identify the issues in creating a simple escape the room game and explain ways I’ve found to solve them. The game we will create is very simple and remoting challenging to play. However it will encompass nearly all of the basic needs of an escape game and by using these techniques you should be able to expand upon them until you have created a game of great complexity.

Getting Started

Organization is very important as you approach a game like this. While in our simple version it may be easy to keep track of layers and variable names, even a simple puzzle can quickly offer more complexity. So, please do yourself a favor: label your layers neatly, name your objects consistently and create variable names that make sense and are easy to remember. The basic organization scheme of an escape game on the root timeline is deceptively simple. Open a new flash file, save it as EscapeTutorial and create four layers on the main timeline. From top to bottom your layers will be:

• Actions
• Labels
• Infotext
• Inventory
• Rooms

For our simple game we don’t really even need a labels level as everything will exist in the first frame. However, you'll want one if you make a more complicated game. You should also hit Shift-F2 to open the scenes panel and name this scene “Rooms” – ie. the main space of the game. Later on we can create an intro scene with a play button and a link to your website and an outro scene for when the player wins the game. but that’s not necessary now. Insert a movieclip called rooms_mc on your rooms layers and one called inv_mc on your inventory layer. Rooms will be exactly what it sound like – the rooms, walls and objects of your game. Inv_mc will become your inventory. You can use a different naming convention if you want, just be consistent because as you’ll be pathing between these two movie clips a LOT. Create a colored rectangle in each movie clip and drag an instance of each to the stage on the appropriate layer. Size them how you like. It’s a good idea to figure out the basics of where you’d like these two main objects to go, how big you’d like them to be and the total size of the resulting movie during these first steps. It can be kind of a pain to move them around later on, especially the inventory. Because you will be using the x and y values of your inventory objects to help snap them back into place, moving or resizing the inventory will wreak havoc with these values later. If those values change you’ll have to go back through your actionscript and change them all.

Rooms and room navigation

I usually label each view of my room (I’m calling it “room one” “room two” etc but it’s actually the same room just different views of it) until I’ve populated each view with identifiable objects. Otherwise its very easy to get lost when you test your movie! Now set up an actions layer with a stop script every tenth frame for 40 frames, a labels layer with a blank keyframe every ten frames labeled “room_one” “room_two” “room_three” and “room_four”, and a navigation layer we’ll keep empty until the next step. Copy and paste your “room” drawing into each view and change the text field on it to reflect the actual name of the frame.

Now insert a new button object and call it “nav_button”. Create a simple triangle and insert one on the right side of the screen and one reversed on the left side of the screen. Some escape games make these buttons invisible so that you have to pixel hunt to move around the room – you’re welcome to do that. I’ve discovered that that can be very frustrating for the user and you need to be careful not to put any other objects you’d like folks to click on near the edges of the screen. I just think its easier to have navigation and doesn’t give that much away, but its up to you. If you want them to be invisible you should make them rectangular, probably larger and set the alpha property to 0. Either way the code is the same:

Inventory

Your inventory takes up just one frame on your main timeline, but within the inventory movie clip itself there’s a lot going on. For the purposes of this tutorial, we’re going to create a game with just four objects, though obviously for a more complicated game, you’ll want more objects. When you set up your inventory you need to plan out how many objects you’ll end up having and how they’ll be used. Or you can wing it, like I have, but be prepared to have to go back and change a lot when you do.

What does an inventory do?

Firstly, it's where you “store” objects from the room that you’ve let your player collect. Then your player can drag objects back onto the room movie clip in order to interact with movie clips there. Since your player will be guessing what to use their objects for, you need to make sure that if they make the wrong choice with an object, somehow it’ll return to the inventory so that they can try again later. You also want the object to disappear or become grayed out once they’ve used it successfully.

What else does an inventory do? Well, most inventories allow you to select an object and get more information about it, usually through a close up view and some text. Some games also let you combine objects that are in your inventory to form new objects – either by dragging them to each other, or dragging one towards the other’s close up view. Some objects may let you manipulate them in close up – flip them over to see what's behind, for instance, or enter a code to open them.

As you can see, the inventory does a lot, arguably more than the room where the game appears to take place. We’re going to create an inventory that:

1. houses three objects we collect from the room
2. allows us to drag each of these objects into the room
3. snaps the object back into place if we decide to return it to inventory
4. removes the objects once it is used
5. gives us a close up view of each object
6. allows us to combine two inventory objects to create a third.

Let’s get started!

Name the layer containing the rectangle you’ve already created “background”. Now create, from top to bottom, the following layers: buttons, objects, labels and actions.

We’ll be creating a few more layers when we add the close up views, but for now this is fine. Add a stop script to the first frame of your actions layer and let’s create our buttons.

The button layer is something of a cheap trick to work around the fact that creating doubleclicks in actionscript 2.0 is a pain. There are a few other ways to do this, all of them imperfect, but I’ve found this one works okay. Essentially, when you select your object from the inventory, you need to be able to drag it. When you click on the background of the object, it’ll take you to the object closeup. Create a largish rectangle on the buttons layer on top of your background. Modify it to a button and call it inv_button. The down, hit and up states should all look identical, but on rollover it should change to a “highlight” sort of color – a brighter color. Make four instances of this button and arrange them neatly on your background. This is why its helpful to know how many objects you will be using. If you create more inventory boxes than objects in your game it will confuse your players – trust me, they pay attention to things like that. We’ll come back to our inventory after we’ve created some objects to collect.

Objects

Let’s create four simple objects that will be our “game”. They can be anything you want actually, though two of them will be combining to make the fourth. I’m going to make three shapes and a key. Clear and consistent naming is helpful here as you will be referring to these objects frequently in your code. I made four movie clips named square_mc, circle_mc, triangle_mc and key_mc. I created a new layer inside my rooms_mc movie clip and added an instance of each of the shapes (not the key) – one to each room. I named each instance by its object name plus a “1” – in other words, square1_mc, circle1_mc, triangle1_mc.

Now let’s go back to our inventory.

When playing one of these games it usually appears that you once you have clicked on an object it “moves” to your inventory. In our game, that’s an illusion. We’re going to put an entirely different instance of our object in our inventory. Clicking on an object in our game will simply make that instance of the object disappear and the object in our inventory appear. Easy, right?

Let’s open our inventory and create instances of our objects there for our collection. The objects in your inventory can be smaller than they are in the game and their relative size need not be consistent – for instance, a table could be the same size as the key. Therefore you can size them down as necessary to fit them in and make them look neat. Drag an instance of each of our four objects to a box in the inventory and give it an instance name that is its name with a “2 “ – ie. square2_mc, circle2_mc. Etc. Again, this is important because when you're writing your code you want to know easily what the instance name of the object you need is. If you keep it consistent, you won't have to go back to the object and look.

Once you have everything looking the way you want it take a moment to jot down the x and y values of each of these objects – you’ll need it for coding later.

Now let’s start adding the code that will allow us to collect our objects from the room and "put" them into our inventory. First let’s go to the first frame of the actions layer of our main timeline. This is where we’ll initiate the variables that give us the state of each object – is it found or not? Is it visible or not? These are the states we’ll be changing throughout the game and what will affect our players ability to move around the room without having objects appear and reappear in their inventory. We don't want these states to change every time the player moves around the room -- we only want them to reset each time the game is loaded. The code for the first object is as follows:

First, we’re declaring a variable called “Square located” and typing it as a string (it could also be Boolean, but as the game gets more complicated I’ve found it useful to keep these variable as strings). We define this string as “Not located”. As you can guess, later on when the player finds the object, we’ll change that variable's value to “Located”. We also set the visible property of the square instance in our inventory to false. Cut and paste this code for each other the three remaining objects – circle, triangle and key and change the instance names accordingly.

The resulting code should look like this:

Doublick on your circle_mc to bring yourself inside the movie clip. Create three layers. The bottom one should be called circlehave your circle in it. Above that should be a layer named labels and and one named actions. Now insert a blank keyframe in frame two of each of the three layers. Add a stop script to both action frames. On the labels layer label frame one “circle” and frame two “nocircle”. Leave frame two of the circle layer as it is – totally blank.

While this may seem a weird way to approach this I’ve found this is the simplest way to insure that you won’t get flashes of your object on screen after you’ve collected it. We’re going to need to repeat this for the other objects, but to show you how this works, go back to your rooms_mc and click on the circle again so you can place some code on the movieclip. Add this code to your clip:

As you can see, when this clip loads there is a function created when you press the clip. The function sends the circle clip to “nocircle” (which makes it seem to disappear) and then it makes the circle in your inventory visible and changes the variable we set on the root “circlelocated” to "Located". Then, each time the clip loads it checks to see if the circle has been located – if it has, it sends the clip to "nocircle" and it remains invisible. You’ll need to do this for your other clips as well, but for right now save and test your movie.

When you click on the circle it should disappear from the room and appear in your inventory. Furthermore, as you navigate around the room and back to where you found the circle it should NOT reappear. If it does, you’ve got a typo somewhere.

Inventory part II

Okay, now we’ve got objects in our rooms and we can collect them into our inventory, but once they’re there, we can’t do anything with them. We want to be able to drag them around, have them return to the inventory when we’re done with them and see close up views to learn more about them. Lets get started with that.

Enter your inventory movie clip and go to the actions panel of frame one of the actions layer. Lay your hands on that scratch paper where you wrote down the x and y locations of your objects, or if you didn’t do that, get that information now.

First convert the large background rectangle on your inventory's background layer to a movieclip called background_mc and give it an instance name of background_mc. This is important because we’ll be using hitTest to determine if the object should snap back into place and hitTest only works between two movie clips.

So now we have a game where we can collect objects in our room, place them in our inventory and when we drag them from our inventory we can replace them there easily. What else do we need a game to? Well, within our inventory we want close up views of our objects. We also want to be able to DO stuff with our objects – interact with objects in the room and have them interact with each other. As you can imagine, hitTest will be quite useful for this.

First lets set up our close up views inside our inventory. We’re going to need a frame for each of our objects, with a label, and one for “start” – where we don’t have any close-up views showing. I spread these frames out five frame apart to make it a little easier to look at, but it doesn’t really matter. We create a blank key frame every five frames on our labels layer, labeling frame 1 “start” frame 5 “square_close” frame 10 “circle_close” frame 15 “triangle_close” and frame 20 “key_close”. We need a blank keyframe and stop script at every one of those frames in the actions layer and we need to extend the rest of our layers (background, buttons and objects) all the way through so that they don’t disappear when we’re looking at a close up. Now we’re ready to create layers to hold our close up views. Since all of our closeups will look basically the same except for the object they contain and the text describing the object, we can do this pretty simply. Create the following layers below your labels layer but above the rest of the layers you already have:

• Return button
• objects closeups
• closeoff action
• text
• closeup background

Now we’ll spend some time drawing the close up for our square in our “square_close” frame because we’ll be able to copy and paste most of what we make into our other close ups.

In our closeupbackground layer create a square with a colored background with a 45% alpha level (or whatever looks good) as a background.

On the return button layer create a little button that makes it clear that it will “close” the close up and return to us normal view. A rectangle with an x in it is a good way to do this. Convert this object to a button called “return_btn” and add the following script to it:

Each of your close up frames will have this button and the script doesn’t need to change because they’re all going to the same place – “start”.

On your objects close up layer, drag an instance of the object (in this case “square_mc”) that you’re taking a closer look at. Give it an instance name like this: square3_mc. This is important if you want to be able to interact with your close up objects. You probably want to size this instance larger since it is, after all, a close up.

On the "no action button" layer, simply create a rectangle the same size as your object background, convert it to a button and set its alpha level to zero. Name it “nothing_btn” or “noaction_btn”. This invisible button with no actions will prevent users from being able to click on objects in the room that happen to be behind the current object closeup.

On your text layer add a static text field with a short description of your object. In this case, mine says “a square.”

Your resulting frame should look a bit like this:

Now do the same for the rest of your objects. You should be able to use most of the frames (background, closeoff button and return button) and just drag different instances of your objects for the object close up and change the text to reflect that object. Don’t forget to give your larger objects consistent instance names like “circle3_mc.”

Now our closeups are set up, and we can return to start from them, but how are we going to trigger them? There are several ways, here’s just one.

Lets go to our buttons layer in our inventory and select the button behind the square. Write the following code on the button:

Notice that the inventory buttons don’t really do anything unless you’ve collected an object. But, as you collect each object, you can click on its background to see its close up. You should still be able to click and drag each object as well by clicking directly on the object.

Making the Key

Okay, where’s our key? Well, we’re going to “make” our key by combining our square and our circle. That is, we’re going to have a mini puzzle where after you locate the square and the circle, if you close up on the circle and drag the square to it, you will make a key. You can then use your key to unlock the door and win the game. Not the most interesting puzzle in the world, but a technique that obviously can come in handy for combining objects in more interesting ways. Let’s lay out what we want to have happen:

1. We want to drag our square to our circle in close up and have that transform into a key
2. we want our square and circle to disspear from our inventory since we’ve “used” them
3. we want our key to appear in our inventory.

Let’s start by sending our playhead to a frame that tells us we’ve created a key. On our inv_mc movieclip place the following code.

Now save and test your movie! It should work like this:

The way the layers are set up means that when we drag our square it goes behind our close up background. That doesn’t look very good, so lets move our objects layer up closer to our objects close up layer. If you’re not having objects from your inventory interact with closeups in this way (and some games don’t need this) it doesn’t matter, but if you are its nice to have them look like they are actually touching each other.

Now if we wanted, we could use this script to trigger an animation – perhaps the circle morphing into a key or something cool like that. Because we’re trying to keep things simple for the purpose of this tutorial, all we’re going to do is send ourselves to a frame with a picture of a key that says “you made a key”.

This frame is pretty much identical to our key closeup except for the fact that instead of simply saying “a key” the text says “you made a key”. Place it at frame 25, after all the other close ups and label it “key_made”

Opening the Door

The last thing we’re going to do in this tutorial is make our key open our door. The basic action our player is going to take is going to be to drag the key to the door which will trigger a small animation indicating that they’ve escaped from the room. As always, yours can be a lot more interesting than this one.

Earlier we added a very simple door to our game. Let’s make sure it’s a movie clip called door_mc with an instance name of door_mc. Click on it to enter the door_mc movieclip and add the door opening animation. From top to bottom let’s create the layers: actions, labels, text, trigger, door (this should contain our door) and behind door. Place a stop script on our actions layer because we don’t want our door opening until we’ve triggered it.

Create a movie clip called door_trigger, and place it over the door in the trigger level. Give it an instance name of door_trigger. We’ll set its alpha to zero later to make it invisible, but for now, let’s keep it visible. You might want to fill it with a bright color to remind yourself to make it invisible later.

Now add blank key frames at about frame ten for all layers except the door layer and trigger layer. The door layer should have a regular keyframe at frame ten, because we’re going to animate the door opening and the trigger layer should have blank key frame at frame two. We want our trigger to disappear once we trigger it so we don’t keep triggering the animation.

It should look something like this:

Now animate your door opening – a simple shape tween should do it. Add something silly in the behind door layer for the player to see while they win. And in big letters in frame ten of the text layer add text that says “You escaped!”

Something like this will work:

Add a stop script at the end of your animation so that the door stays open. Label frame two in the labels layer “door_opens” so we can refer to this animation.

Now all we have to do is get the key to trigger the door animation and we’ve created a way for the player to win our simple game.

Go back to your rooms_mc and click on the door_mc so you can add your script to the door movie clip. Add the following:

In the properties panel, set the alpha level of your door_trigger to zero. You’re done!

Save your game and test. Your “final” game should work like this. If you are having problems triggering the door, make sure that you have pathed to the correct movie clips. In the example code above I’ve created an absolute path for the key and the trigger, though that’s not always the best way. Also make sure that each of the movie clips that you refer to in a path has an instance name – and that your refer to that instance name correctly. If there’s no instance name, or you’re calling it the wrong thing, it won’t work either.