Welcome to part 2 of the point and click tutorial.
In the first part we created our room, which we can now navigate around by clicking the arrows on the sides of the screen.
Now we want to add some interactive items into our room, which will form part of the puzzle.
The first step is to create a couple of new layers above the rest of the existing content. These layers should be continual, without any breaks or added key frames – they need to stay exactly the same throughout your whole game.
On one of them, draw a semi-transparent rectangle over the bottom of your screen. This will be the background of our inventory. You can put it wherever you want, and make it whatever size you want – this is purely to serve as an area where the player can clearly see the items that they have collected.
On the second layer, we are going to put the items that will appear in our inventory. In this tutorial, I have chosen to use a Pin, a Hammer, a Note and a Key. I have drawn each item separately, and converted each one to a separate movieclip (I wont go into any detail about how to draw these items, I am sure you all know how to draw by now). Give each of the item movieclips a unique name so that you can reference them easily later (eg inv_pin, inv_hammer, inv_code, inv_key).
Before we do anything else, we need to set up the global variables which will control the game. Variables are basically just little containers that can hold data. The name of the variable, and the data it contains are all totally up to you. When you add _global infront of a variable name, it allows you to very easily access that data in that variable from anywhere within your game.
We are going to define the default values of our variables on the first frame of the movie. However because the first frame is currently “n”, every time the player moves to the north view, the variables would be reset to their defaults. For this reason, highlight all the frames in your timeline, and drag them over 1 frame.
In your actionscript layer, make sure that the Stop(); is on the second frame. On the first frame we will now define our variables:
This is entirely my own naming convention, but hopefully it should be fairly logical. My system, is that when the number is 0, it means that you haven’t collected that item yet. When it is 1, that means the item is in your inventory. If an item has more than one use, you can keep modifying the value of it’s variable (eg if you are able to place an object on a table, you could change its variable to 2).
Ok, now we can return to building our game. On a new layer (above the bg layer) I placed a copy of the pin into my room, that lets it sit on the window sill. Ensure that this is in a keyframe which doesn’t overlap onto the other views of your room, or else your objects will hover mysteriously around the room on every frame.
I then selected the inventory version of my pin, and added the following code to it:
A brief explanation of this code:
When this movie clip loads (ie as soon as your game starts), it is invisible to tab (it is a common “cheat” that pressing tab in a flash game causes yellow boxes to highlight areas that can be clicked. Using this snip of code on each movieclip prevents them from being targetable by the tab key), and it is invisible (this differs from the _alpha property of an object, whilst both make object invisible, objects made invisible via alpha are still “clickable”, whereas using the _visible property means even if you click on the invisible item, you won’t be able to interact with it until it is made visible again);
Next I selected the pin on the window sill, and added this code:
Explanation:
The first part of the code checks the _global.pin variable. If it is 0 (the default value), then it does nothing. If the variable is 1, then it makes the pin invisible.
The second part of the code is what happens when you click on the pin. First, the value of _global.pin is changed to 1, to tell your game to remember that you have picked it up. Then the pin on the window is made invisible, and the pin in your inventory is made visible.
Test your game. The first item in your inventory should now be invisible. Clicking on the version of that item in the room should then add it to your inventory. The item should disappear from the room altogether, so switching between views should not cause it to re-appear when you return again.
Ok, so now that we have an item in our inventory, we need to be able to use it. In my game, I created a balloon on the view next to the door. The pin can be used to burst the balloon, causing the next item (the hammer) to be released. The balloon consists of two stacked movieclips, the inner one being the physical image of the balloon, the outer one providing the looping animation of it slowly moving up and down. In this instance, the name of both the movie clips is balloon, so accessing the inner movie clip from stage level would be via “balloon.balloon”.
I clicked back onto the inventory version of my pin, and modified its code to the following:
Explanation:
The orig_x and orig_y are variables which are being created to store the X and Y positions of the item (the items physical location on the screen).
Pressing the mouse button, causes the movieclip to stick to the mouse cursor, allowing you to drag it around the screen.
When you release the mouse button, the movieclip stops following your mouse. It then is moved back to it’s original position.
The last section of code checks the drop target (the movieclip that was underneath the dragged item when it was released). In this example, the drop target is the balloon. I have used the absolute name of the object in its reference, as it just makes things easier. So if the target of the pin is the balloon, it then plays the frames of animation I drew of it bursting, the value of _global.b_pop (a new global variable which remembers whether the balloon has been burst or not), and finally the pin is made invisible (totally up to you, alternative is to grey out the object and make it unclickable so that you know you don’t need it any more).
So with this code, dragging the pin from my inventory, onto the balloon, starts the animation playing which causes the balloon to burst. I placed code on the balloon similar to that on the pin, which checked for the value of _global.b_pop, telling the movieclip to stop on the last frame of animation (the balloon on pieces on the floor) each time the movie clip loads.
I repeated the entire process for the hammer (which is clickable when the balloon bursts), putting the code onto it’s movieclip.
A summary of the purpose of the code on the hammer is the following:
When loaded:
Make the hammer movie clip invisible to the tab key.
Check if _global.hammer is equal to 1, if it is, make the hammer invisible.
When clicked:
Make the hammer invisible
Modify the _global.hammer variable to 1
Make the inventory hammer visible
And then on the inventory hammer, the code does:
When loaded:
Make the movie clip invisible to the tab key
Make the hammer invisible (As the inventory layer is not divided into key frames, the objects in it only load once, so this is used to make all your inventory items invisible until you find them in game).
Store the X and Y position of the movie clip in some variables
When pressed:
The movie clip follows the mouse
When released:
The movie clip stops following the mouse
The movie clip returns to the X and Y positions stored in the variables
Checks the location that the movieclip was dragged to, if it matches the specified parameters, it performs the specified actions.
Ok, I am going to end this tutorial here, there is still a lot more to add, but hopefully this will give you some of the most important tools required to create a point and click game. Just to summarise, here are the key points covered in this tutorial:
Variables can be used to store data, which allows the game to keep track of what you are doing.
"If" statements regarding the variables, provide you with a lot of ways to control events.
Objects can be made visible or invisible using a simple line of code.
Items can be dragged around from your inventory, and then when released on a specified target movie clip, various actions can be set to take place.
Here is the example game, with an added inventory. You should be able to perform the following actions:
-Click on the curtains to open them
-Click on the pin to pick it up
-Drag the pin onto the balloon to burst it
-Click on the hammer to pick it up
-Drag the hammer onto the vase to smash it
-Click on the note to pick it up
Note: If you are experiencing an issue where dragging an item from your inventory will trigger its droptarget event regardless of whether it is on the correct target or not, please see this post on my forum for a fix. I am unsure why this issue is happening, if any of you know, let me know!
The next tutorial will cover the next steps of the game, and will show you how to add extra features, like context sensitive hover text.
Tutorial by John Feltham
powerabuse.co.uk
If you have any questions regarding this tutorial, or would like any of the topics explained in a little more detail, feel free to post on my forum.
