BEGINNER'S GUIDE TO ADVENTURE GAME STUDIO - PART TWO

Congratulations! Welcome to Part Two of our step-by-step guide to learning Adventure Game Studio. This follows directly from Part One; read it if you haven't already. Ready? Well done! In this section, we'll build on what we covered earlier to learn how to create animation views and characters, move the player from one room to another, create speech and dialogues and use room events to make cutscenes.




First off: time to get past the title screen! Use the Navigation Panel to rightclick on the 'Rooms' button, and create a new room using the method we followed before. Click on the 'Edit Room' option for our new room, and see our old friend, the black screen. Use the 'Change...' button above the black screen, and navigate to the backgrounds section of the resources folder we downloaded in Part One. Select the 'Island1' file. Congratulations! You have created a desert island for your characters to explore. For the sake of navigation, type 'Island' as the Description in the Room Properties panel on the bottom right. But how to get to this island?



We'll use another hotspot layer in our title screen room, so that when it is clicked the player will transport into out new island room. But wait a minute! Before you go back to the title screen, right-click the picture of the island in the level editor. The game will give you the option to copy coordinates to clipboard. This is important, because we use these coordinates to tell the game exactly where in the new room the player should be imported.

For example, we want our player to start on the sandy island part of this room, and not hanging in the sky. So right click the island part, and copy the coordinates with a rightclick.
Now go back to our title screen. The game will ask you if you wish to save changes to this room; note that AGS only opens one room editor at a time, but it can hold multiple room scripts in tabs. For now, we'll make another hotspot over the 'New' button. Select a hotspot layer with the drop-down menu below the Navigation panel - hHotspot3 should be free - and cover the 'New' text with a nice big rectangle. The click on the lightning bolt to open the events for this hotspot layer. Click the ellipsis next to the 'Any click on hotspot' row to open up the room script.

Now, think back to what we learned earlier about scripting in AGS: the scripts in AGS consist of functions, which affect the whole game (like out earlier example of QuitGame), and objects, where the game selects one specific "thing" such as a character or item to apply a function to. Now, you might expect that telling the game to go to Room 2 would be a function, right? Wrong! AGS is set up so that the current room shown is that which the "player" character is standing in. We'll learn more about player characters later on - for now, it suffices to know that we change the room shown by making the player change to a different room. Type in 'player' into the open bracket in our room script, and since 'player' is an object, follow it with a full stop. A suggestion window should open:



You'll notice that the list of possible functions here is different than the pop-up list we saw before; that's because the earlier list contained more general objects and functions, while this one just contains functions to do with this particular object. I recommend taking a quick glance through this window, to get a feel for the list of possible actions. Note that the options can be split into two groups: those with a little purple block next to them and those with a little hand holding a letter next to them. The first are functions we can apply to the player, the second are variables attached to the player. For now, we'll just deal with the functions. Scan through the list until you see the function "ChangeRoom". Since this is a function, we follow it with a normal bracket, and see:



This means we need to fill in values for the number of the room we want to switch to, as well as optional x and y coordinates for the exact place in that room we want to teleport to. Note that these values are seperated by commas. We'll type in '2' for the room number, follow it with a comma, and then use Ctrl + V to paste in the desert island coordinates we took from the room earlier. Congratulations! Now, save the game and run it using the 'play' button at the top of the screen.

Hmm. We can see our island all right, but it's rather empty! Time to add some characters.




If you've been paying attention, you'll remember that we navigated to the island by telling the 'player' object to change rooms. But there's no player to be seen! This is a conundrum. To solve it, navigate to and expand the 'Characters' button in the navigation panel to the upper right. It contains one character, succinctly if unimaginitively called 'cCharacter'. Click on it. You will see this screen:



This tells us that 'cCharacter' is the 'player' character we mentioned earlier, and this is who we've been moving around. However, you'll notice that the parts labelled "Normal View" and "Speech View" are blank, apart from a tiny little speck at the bottom of the Normal View window. This won't do! We need a more interesting and visible character. And we'll do that by looking at Views. Take a glance at the Properties section for this character, in the lower right of the screen:



We can set the name and starting positions of the character here, but we'll do that later. Now look at the part listing the "views" of the character: blinking views, speech views, thinking views, idle views, normal views. As you might expect, these 'views' refer to the animations of the character: speech animations, idle animations, and so on. The 'normal' view is the character's standing and walking animations, and that's what we're going to work on now. Use the Navigation Panel on the right of the screen to expand the 'Views' section. It contains two views, called VIEW1 and VIEW2. If you remember, our player character's normal view was set to '1' meaning VIEW1 so we'll double click on that.



Note the bright purple in the little boxes: if you remember, this was the 'transparent' colour for our mouse sprite. So the views are made up of different sprites! Also note that there are four sections here: down, left, right, and up. These set the different directional animations for your character. This is where views come in handy: when you assign the player character View 1, it means you assign it all the directional animations here too, making it easier to use.

At the moment we don't have many sprites to choose from for our View. let's change that. Open the 'Sprites' section, then rightclick an empty space and choose Quick Import Sprites. If you remember, the last time we imported a sprite we had to mess around with transparencies and so on; the Quick Import Sprites option lets us bypass that, and quickly import a whole stack of sprites. Using the Quick Import Sprites, navigate to the 'Sprites' section of the tutorial resource folder. You should see a complete set of walking sprites for a short, worried looking fellow with a yellow head. Select all the sprites containing him, and then click open. AGS will import the sprites into your Sprites folder.

Now let's get back to our VIEW1. Firstly, that's a silly name, so we'll use the properties section in the bottom right to rename it 'vPlayerWalking'. Note the little 'v' at the front: it isn't necessary, but AGS won't let you name a character and a view the same thing, so it can be helpful to distinguish between them by using a vSomething and cSomething notation. This also means you can quickly browse through them in the script windows, which follow alphabetical order.
Anyway, let's make a 'down' directional animation for our character. This is the one we see when he faces the screen. Doubleclick the blank purple frame in the 'Loop 0 (down)' section, and change it to the first picture we have where our little worried homunculus is facing the screen. This will be the picture the game shows when the character is standing still. Now for the walking animation: use the create new frame button. Note that it automatically picks the very next sprite in the sprite editor! Keep doing this for all the sprites where the character is facing the screen.



It looks all right, but we want to see what this looks like in motion! Tick the button marked 'Show Preview' at the top of the Views page. Then select 'Animate' to make him walk. You can also use the 'Character View' and 'Skip Frame 0' options to finetune our animation a little, and see how it would appear in game. Hmmm. It could be a little smoother! Let's try speeding it up. We can use the 'Delay' button to set the speed of our animation: higher delay means a slower animation, lower delay means a quicker one. I suggest setting the delay to 3.

Now we'll do the same for the other directions. But wait! We don't have any sprites where our character is facing left! That's all right; in the 'Left' loop, just import the walking animation for when our character is facing right. Then select each frame and use the Properties section on the lower right hand side to set the 'Flipped' option to 'True'. This will flip the image horizontally. We can also use this trick to cut down on the amount of frames we need: in the 'Up' loop, we don't have enough sprites for a full walk cycle - our sprite puts his left leg forward, but that's it. We can make him move his right leg by importing the same set of sprites again and flipping them horizontally. Play around with this until you get something relatively smooth. In the end, your view should look something like this:



Congratulations! You've made a View. Let's get back to our character. As you can see, the view has been imported. The Speech View hasn't, but don't worry; if it hasn't been assigned to anything, it will automatically use the Normal View. Now it's time to fine-tune our character. Look at the Properties bar in the lower right of the screen: looking through it, we can see it has options for Animation Delay, Movement Speed, Speech Colour, and so on. Let's set the animation delay to '3' and the movement speed to '9', because no-one likes a slow walk speed. While we're here, let's name our character. You'll notice there are two name fields: one the "Real Name" and the other the "Script Name". The Real Name is what the character is called, the Script Name is the one we use to call it up in the script. Let's call our worried little man 'Lili', and give him the script name 'cLili' in accordance with the naming convention mentioned earlier. Congratulations! You have made a character.




Now it's time to use what we've learned to start making our game. Firstly: now that our player character is actually visible, we don't want him showing up on the title screen and uglying up the place! Let's go back to our title screen, and look at the 'Properties' section. You can use this to change the character's view in this screen, which is helpful for map screens and so on, but here we just want him to be invisible so we'll change the 'ShowPlayerCharacter' option to 'false'. Now try playing our game.



Well done! You have marooned Lili on the island. Look at his sad little face as he faces an eternity of loneliness and scrabbling to survive. However, even for a desert island there isn't much to do right now: he can't walk around or interact with anything. Let's change that, with walkable areas and hotspots.

Click the 'Room Edit' button for the island, and use the same drop-down menu we used to select 'Hotspots' to select 'Walkable Areas'. The good news is, Walkable Areas are drawn onto the map in exactly the same way as hotspots. They even have features that enable you to scale characters on the walkable areas, and aet multiple different walkable areas on the same map, but we won't get into that now. Instead, try using the 'line' and 'fill' tools to add a walkable section to our island. In the map editor, it should look something like this:



Now Lili can walk around the tiny sand bar he calls a home. Let's add some interactions to the place. Use the hotspot editor to add a new hotspot layer over the palm tree, then use the lightning bolt icon to set up some events for this hotspot. If you remember, we edited the mouse click in the global script into a two-button system where leftclicking 'interacts' and walks, and rightclicking 'looks'. Try using the 'Interact' event on our palm tree, to open the room script. Suppose we want Lili to say something when we try to interact. Earlier we used 'player' to control our player character, but that's a bit impersonal; it's easier to refer to our character by name, to better imagine what happens. Remember that our script name for this character was 'cLili'. Try typing this into the brackets for the hotspot1_interact event, and since it's an object, follow it with a full stop. A window will open containing all the possible things we can do with Lili. Navigate down to select 'Say', and then open a bracket. It will ask you to insert a string message: basically, whatever piece of text you want Lili to say.
Now, this is important: when you use a string, which is basically a lump of text, you need to put it in QUOTATION MARKS. Got it? So if we wanted Lili to say "I can't use a palm tree!", the code would look like



There we are. Now Lili can walk around his island, and complain about not being able to use a tree (try implementing a 'look' event for this hotspot as practice!). It functions, but it's missing something: drama! Let's make our game a little more exciting, by adding another character.




First we need another View to assign to our new character. In the Sprites section, import the file 'WolfFront1'. Make a new View and call it 'vWolf': assign all directions to the same sprite. This means it doesn't disappear if it turns around. There's no walk cycle, but that's all right; perhaps it's just a lazy wolf.
Once you've done that, use the 'Characters' button to make a new character, with real name 'Wolf' and script name 'cWolf'. Use the properties section to change the number of the Wolf's Normal Vew into the number of the view you used the Wolf sprite in. Now we'll put our wolf on the island: in the Edit Room panel for our island, right-click to copy some coordinates to your clipboard. This is where we'll get the wolf to stand. In the Properties panel for our new character, change the 'StartingRoom' field to '2' and the StartX and StartY fields to the coordinates of the island where you want him to stand. Congratulations! Instead of being trapped by himself on a desolated desert island, Lili is now trapped on a desolate desert island with a giant killer wolf!






Now, suppose we want the Wolf to say something wolfish when the island room starts, to increase the dramatic tension of the scene. Let's go back to the room editor for our island. Now, remember when we used the little lightning bolt sign with the hotspots to process interactions? That little lightning bolt is still there, even when 'Nothing' is selected in the drop-down menu. Let's click it and see what happens.



Well! It's just like the events we've seen before, except instead of hotspot clicks it's about general room functions! If you look closely, you can see some of them are similar to the on_game_start and repeatedly_execute scripts we saw in the Global Script last lesson, only here they're confined to this room. Let's look at the top two: "Enter room before fade in" and "Enter room after fade in".The first is something you want to happen immediately upon entering the room, but before it fades in. We don't want that; we wouldn't be able to read what the Wolf is saying! Let's use the 'after fade in' option. Also note the 'First time enters room' option; this happens after the room fades in but only the first time you enter it, whereas the other event happens every time. Since we only have two rooms in our game, it doesn't make a lot of difference.

In the Room Script function for room_AfterFadeIn(), make the wolf say something terrifying. Do it now, and then run the game.



Spooky! Now, let's take a look at the character events for the Wolf; you'll notice there's a little lightning bolt on his page too, which controls what happens when you click on him: it's set up like the Hotspot events, with seperate fields for Look, Talk, Interact, and so on. If we wanted we could use the character.say options we've already learned to make the Wolf scream more cryptic threats or to let Lili beg for his life, but instead we'll try something else: Dialog.

Rightclick on the 'Dialog' button in the Navigation Panel, and select New Dialog. Now: firstly, remember where I said earlier that you should write the scriptnames with the cName convention? Here's why. With Dialogs, you let the game know which character is speaking by writing their script name in all-caps but WITHOUT the little c at the start.
Anyway, Dialogs let you write dialog trees and options. Click the Create New Option button at the top of the frame:



That blank field is where you write the dialog options which are availible to the player. The 'Show' button next to it determines whether you can see it right at the start, and the 'Say' option just lets you decide whether clicking the option makes the player say it as well (in general you should keep this ticked, as otherwise it can look weird and like the NPCs are responding to nothing). Let's look at an example:



This means that when the player selects the "please don't eat me" option, Lili and the Wolf will say the lines in the @1 section automatically. The 'Return' button at the end means that, when the text is finished, it will go back to the dialogue menu. Suppose we want to leave this menu altogether?



Typing 'stop' means that the dialog will close after you select that option.

Now we just need a way to access that dialog. Name this dialog to 'dWolf' and close it. Now navigate to the events section we looked at earlier for the Wolf; under the 'interact character' function, insert the line "dWolf.Start()". As before, dWolf is an object, Start is the function applied to that object, and the brackets are empty because there aren't any parameters needed.


That's all for this part of the tutorial. But wait! Suffering attacks of conscience over leaving poor Lili on an island with a hungry wolf, without being able to defend himself? Don't worry; we'll cover that part in the next tutorial, where we'll make a simple puzzle using Global Variables, Inventory Items, and Custom GUIs!