With this brief tutorial we intend to show the most basic steps that you will need to follow to create a simple point-and-click adventure game with the educational videogame authoring tool <e-Adventure>. It is just a quick guided introduction to the platform, so for any further information please visit our web-site: http://e-adventure.e-ucm.es

But, before we can carry on with the tutorial, there are some key concepts that we must explain. Otherwise it would be really hard for the reader to understand what it's going on. If you are familiar with these concepts, or you have some experience with point-and-click adventure games you can skip these definitions.

After that we will go through the next elements: how to create a new project; how to set the player's animations; how to create and link two scenes; how to configure the movement of the player in the scene (using a trajectory in one case and a default initial position in other example); how to create an item, define actions to do with it, and finally place it onto a scene.

In this tutorial there are a set of resources that will be used to create the game.

Let's go step by step.

0. Concepts.

Point-and-click adventure game.

A point-and-click adventure is the kind of videogames that <e-Adventure> is devised for. These games are usually built around a fantastic world, represented by a set of 2D scenarios that are linked between each other, where the player must navigate in order to unveil an engaging narrative plot. To advance in the story the player must solve multiple challenging puzzles that will typically require interacting with diverse objects and characters that the player will find around in the in-game world. Hence the "point-and-click" expression, as the navigation through the in-game world is usually performed using the mouse. Nonetheless, we will consider two types of "point-and-click" adventure games: those in third-person and first-person modes. In the first type the player controls an avatar, which is the main character of the story. In the second type the player perceives the story in first person; that is, as if he or she was the main character.

Scenes & Exits.

The navigational in-game world is made up by scenes. Each scene is compounded basically by a background image that will be displayed on the screen. Onto this image the elements that populate the scene (e.g. objects, characters, etc.) are placed. Scenes can be linked by defining exits. An exit is just an area on the scene that will lead to another scene when the user clicks on it.

Items.

An item is an object that is placed onto a scene that the player can interact with. What the player can do with the item (i.e. the interactions with the item) is defined by "actions". Typical actions for items are "use" or "grab". In the last case the item will be removed from the scene and put into a special place called "Inventory". The inventory keeps all the items that the player has already collected so they can be used in other places of the in-game world.

Characters: Player & NPCs.

We will consider two types of characters that appear in point-and-click adventures. Usually the avatar that the user controls is called the "Player". The other characters are usually called "NPC", what stands for Non-Playing-Character.

2D Animation.

The appearance of the characters is usually defined by sets of animations. An animation is a group of 2D images that will be painted on the screen one after the other (just as if each image were a frame in a film). Each character will require defining animations for all the different movements (or actions) that can do and will vary depending on the orientation of the character. For example, if the character will need to walk, the author of the game will create animations of the character moving on diverse directions (e.g. to the left, to the right, to the front and to the back) so the character really looks like being alive!

To simplify thinking of animations, in <e-Adventure> we consider 4 categories of possible "movements" for each character: "standing" (when the player/NPC is not performing any action, just waiting for orders), "talk to" (for interacting with other characters), "use" (for interacting with objects) and "walk". For each category 4 animations can be set, according to 4 different orientations (left, right, back and front). The author will only need to define the animations that will use in the game (however, a standing animation should be always set).

Trajectory.

When a scene is being configured in <e-Adventure> the game author needs to define the area where the player will be allowed to walk. This can be done in two different manners. The simple one is just to set an initial position for the player, and it will be allowed to move along the straight horizontal line that passes through that point. However more sophisticated movements can be defined using the concept of "trajectory". When this option is selected the game author will need to define "nodes" and "lines". A "node" is a point in the scene that the player can reach. Two nodes can be connected using "lines". The player will be allowed to move all along the lines that the author have defined.

1. Create a new project

Open the editor tool and select the "Create new" option. A third-person mode adventure will be created. By default this option is selected, so there is no need to change anything in the first dialogue. Then the name of the project must be typed. Later there will appear the main window of the adventure editor.

2. Configure the player's animations

Select the "Player" button on the left menu and the area on the right of the window will change, displaying a new edition panel populated with several tabs. The tab selected should be the one labelled as "Appearance". On the drop-down list that is displayed just behind the tab select the "Standing Animations" option. Here the idle animation will be the one selected (the one that will be played when the player is not executing any action). For this example we will configure the "Looking right" animation, but any other animation could be chosen.

To achieve this press on one of the buttons with the label "Create/Edit" or "Select.." that you will find next to each animation. The first choice allows creating a new animation, editing frame by frame, transitions, etc. In the second case you will be prompted to select an animation that is already present in the file system. In such case you can either select a group of image files (*.jpg, *.png, etc.) or an <e-Adventure> animation file (*.eaa). If you are selecting a group of image files, bear in mind that their file names should start by the same prefix followed by an underscore and a two-digit number. In this case we will select an existing animation: cristo_ 01.png. Please note that you only need to select one of all the animations in a group (in this case "Standing animations"), although configuring all of them will improve the realism of the game. For your convenience, when the first animation is selected the editor will ask if the resources selected should be assigned to the rest of animations of all resources groups. In this case we will not choose this option.

Next choose an animation for each resources group. For "Talking animation" "Speaking right" select cristo_boca_01.png; for "Using animation" "Object to the right" select cristo_coge_01.png; and for "Walking animation" "Walking right" select cristo_anda_01.png. We insist once again that it is enough to select one animation for each resources group as the game engine will pick in each case from the animations defined the most adequate, mirroring an existing one if required. However we encourage you to customize the animations as far as you considerate.

3. Create scenes

Now select the "Scenes" button of the menu on the left. By default when a new adventure project is created one scene is added automatically. Choose the background image (to give the scene an appearance) by clicking in the "Select" button on the area titled "Background image of the scene" in the "Appearance" tab. A preview of the scene with the player's initial position in the scene will appear. The player appears in a default position because the trajectory or initial position has not been edited yet.

Once the first scene is configured, create another one and link to the existing one. To do so click in the icon that is in close to the "Scene" button on the left menu. Fill in the name and add a background image to the new scene (in this case "biblioteca.jpg"). In that scene also add a "Foreground mask of the scene". You can do this by clicking the "Select" button, located inside the "appearances of the scene" panel, in the "Foreground mask of the scene" sub-panel. Using the file browser which appears above the main window, select the file ("mascara_biblioteca.jpg"). This option allows showing elements in front of the player, giving the feeling that the scene has some depth. This point will be clarified at the end of this document when the game is finally executed.

4. Trajectories and player's initial position

Now select the tab "Player Movement" on the "Scene1". For the first scene select "Use trajectory". Once selected, the trajectory edition panel will be shown. Select the button to edit the nodes. A new node will be added by clicking on the preview panel. The position of a node in the scene can be adjusted by drag & drop. Besides, the size that the player will have in that point (that is, the scale) can be adjusted by drag & drop of the green rectangle that appears on the upper-right corner of the player's image. The last feature is used to enhance the perception of depth in the scene, as if the player's size is different between two linked nodes, the player will change gradually from one size to another.

The node that has a red circle will be the initial position of the player (that is, the player's position when it enters the scene). Use the button to change the initial position (by selecting the appropriate node). The button allows to link nodes by clicking on one node and then onto the other, defining in this manner the possible paths that the trajectory will have. With the button the nodes and lines can be removed.

In the second scene we will use a different approach to configure how the player moves. Choose the "initial position" option on the "Player Movement" tab. This edition mode only allows to set the player's initial position and its size. In this case the player will be allowed to move all along the horizontal line that crosses the point where it is placed.

5. Linking the scenes

Select the "Scene1" scene on the left menu and then the "Exits" tab. Click on the button of the next scenes table. A dialog will appear to select the next scene associate to the new exit (that is, the scene that the exit will lead to). In this case select "Scene2" on the list. After that, two rectangles, one red and one blue, will appear on the main preview of the scene.

The red one is the exit. The blue one is called the "influence area", it means, the portion of the scene where the exit is reachable. The player will need to be in that area, at leat partially, to access the exit. As there are trajectories associated to this scene, this rectangle must to reach some of the nodes to allow the player to reach the exit. The red rectangle is the size of the exit, that it will be the part of the screen where the name of the exit will be displayed when the mouse will be over there. The exit can be placed wherever by drag and drop.

6. Create an item and associate actions to it

Select the "Items" button on the left menu and click on the button to add a new item, fill in the name (e.g. keys). Select an image for the item in the "Appearance" > "Image object" > Select button (in the file selector, search file "llaves.png") . Select also an icon for the item. That is the image that will be used for the item when it is in the inventory by clicking "Create icon from image".

Now go to the "Actions" tab to add possible "things to do" with the item. Click on the button located in the actions table and choose the "Grab" option on the pop-up menu. Click now on the button on the effects table to add effects to the selected action. Each effect is something that will happen in the game when the item is "grabbed". In this case choose that the player says a sentence, consume the created item (to look that the item is grabbed from the scene) and generate the item in the inventory.

7. Place the item in the scene

Select the "Scene1" on the left menu and the click on the "Element references" tab. Click in the button, select "Add item reference" and choose the "keys" item. It will appear in the preview panel surrounded by a red rectangle and blue one. These rectangles have the same meaning as for exits. The blue one is to adjust the influence area, and the red one is to modify the actual size of the item on the scene. Choose the size, drag and drop it to the desired position, and make the influence area bigger to reach a trajectory node (or at least to cut a trajectory line). This is very important, as if the item's influence area does not cut at least a trajectory line the player could not reach the object to interact with it. If the movement of the player is configured in the other mode (using a default initial position) there is no need to deal with influence areas.

Congratulations! You have created your first point & click adventure with the <e-Adventure> authoring tool. Now you can try out what you've done by selecting "Run" --> "Normal" (or use the shortcut Ctr+R) on the window bar menu.

For further details see the "Game in 4 minutes" video, where all these steps are demonstrated. In the last capture you can observe how the front mask works to separate background and foreground in the game: