Room escape tutorial

Part 1 – Creating your environment and navigating around it

This is the first in a series of tutorials, which will aim to teach you how to make a basic “point and click” game, of the room escape genre. This tutorial will use actionscript 2.

I am assuming that you are familiar with the basics of flash, such as using the drawing tools, using layers, frames, and creating movieclips.

So the first thing we are going to do, is create our room. The first thing I like to do when creating a new room, is to set my vanishing point. I do this by creating a new layer, and on this layer I draw a red square. I then join the corners using the line tool, to form an X. The centre of this X is my vanishing point, towards which all the lines of every room and object will point – this helps you create much more realistic looking rooms and objects.

Place the vanishing point in the horizontal centre of the stage, and then move it vertically until you are happy with it. If you imagine a horizontal line running through the centre of the X, this is your horizon.

The next step is to start drawing the lines of your room. Make sure that the fill colour is set to “none” (the white square with a red line across it). On a new layer, draw a large rectangle which covers your whole stage.

From one of the sides of this rectangle, near the bottom, draw a horizontal line across the whole stage. Then from the point at which this intersects the outer rectangle, draw another line connecting to the middle of the vanishing point. Repeat this on the other side of the rectangle. You should now have a triangle of lines, with the top point being the centre of the vanishing point.

Now draw a second horizontal line across the stage, above the first one – this will be the line where the far wall meets the floor, so ensure you are happy with the position. Where this line crosses the diagonal lines you of the triangle you just drew, add vertical lines which extend up to the top of the stage. These are the corners of your room. You should now have something which looks roughly like this:

Now delete the first horizontal line, any bits of line which poke outside the big rectangle, and any lines which look out of place. Your aim is to create a three dimensional space, consisting of two side walls, a back wall, and a floor. I added an extra set of lines which will become a skirting board around the edge of the room.

Now you can colour your room in. I like to do this using gradient fills, using a vertical gradient of two shades of a colour. You should now have an image which looks roughly like this:

The next step is to create four keyframes on the time line. Each frame will represent a different view of the room. If you imagine that you are standing inside the room, one side will be the north, one side east, one side west, and one side south. On a new layer, name each of these frames either n, s, e or w. Naming our frames will make life a lot easier later on.

Ok, so we now have a basic background for our room, and four frames which each represent a different side of the room. Now we have to make the room more interesting. Each view of the room should contain different objects or views, which will all fit together to create your puzzle. The way you design this is totally up to you. You should try to put as much effort into this as possible, in order to make your room more exciting and interesting. For the purpose of this tutorial I have kept it simple, each side of the room contains one defining feature – North has a door, East has a window, south has a picture, and west has a table (for the sky in the background of the window, I used the dynamic sky effect from my previous tutorial).

The final step of this tutorial is to create the navigation.

On a new layer, create a triangle and make it into a movieclip. Place two of these triangles on the stage, one pointing left, and the other pointing right. These will be the buttons that the player uses to navigate around the room. Create a new keyframe of these buttons for each of your views – this allows us to have different code on the buttons for each view.

Actionscript time!
On the first frame of your timeline, create a new empty layer for actions. In the first frame, put

stop();

Now go to the north view, and click on the right navigation button. Paste the following code directly into the button’s actionscript:

on (release) {
            this._parent.gotoAndStop("e");
}

Replace the “e” with the name of the frame that clicking that button will take you to (we set these earlier, n, e, s and w). So for example, on the frame of your timeline which shows the north view, the button on the left should point to the west (frame “w”), and the button on the right should point to the east (frame “e”).

Repeat this for each view, ensuring that the code on each of the button movieclips is modified to point to the correct frame.

Test your movie, you should now have a room like the one below, around which you can navigate by clicking the buttons.

The next tutorial will show you how to create items for your room that you can collect and add to your inventory.

Tutorial by John Feltham
powerabuse.co.uk

If you have any questions or comments on the tutorial, feel free to post them on the forum.