start by drawing a sprite for your main character. meet Donny:

(doubled the size of these images just to make it a bit easier to see)

it doesn't matter what the background colour is, as long as you don't need it for any "solid" bits of your character. also don't save the image as JPEG/.JPG since that will mess up your pixels.

separate a box around your sprite from the rest of the background, using a different background colour. the box around your sprite should have a bit of space on the left, right and top. this is so you can easily duplicate this as a base image to use for animations that may need this extra space, e.g. jumping in the air.

make a few copies of your base image. so, it should look something like this:
 

now change a bunch of these into animation frames, for walking and talking:
 
 

also, create some mouse cursor images. create a normal/generic pointer, and specialized ones for "look at", "use", "talk to" and "wait":
 
 

(don't worry about trying to put these inside equally-sized boxes like the character sprites, it's not necessary...)

fire up the AGS 3.2.1 editor. say you want to start a new game, and then choose the empty game template:
 
 

fill in the details on the next window in whatever way suits you
 
 

now the new game should be created. one thing you probably should do is go to general settings, and set color depth to "32-bit (true-colour)", and default graphics driver to "Direct3D 9 hardware acceleration"
 
 

click the floppy disk icon or hit ctrl-S to save the project. get used to doing this whenever you change stuff!

open the Sprites section. right-click on the "Main" folder icon over on the left-hand pane and select Create Sub-folder
 
 

name the folder after the name of the game's main character. then select the new folder, right-click anywhere in the right-hand pane, and select Import new sprite from file...
 
 

use the file requester to open the image of main character sprites created earlier. the first thing you probably want to do is use the zoom slider on the left to zoom in a bit
 
 

now what you want to do is to use the right mouse button to drag a rectangle selection over the first sprite of your main character on the image. be careful to exactly cover the box. when you let go of the right mouse button, the cursor will snap back up to the top-left hand corner. if the selected region exactly covers the spritebox, click the left mouse button. otherwise, try again at selecting the region.
 
 

when it's done the sprite selector window will close, and a new sprite added to our sprite folder. the "transparent"/background colour will be transformed to bright magenta. it should look like this:
 
 

(if the background ISN'T magenta like that it means something went wrong... right click on the sprite and select Replace sprite to fix it.)

now right-click on the pane next to the sprite you just imported, but this time instead of Import new sprite from file... select New sprite using last sprite...
 
 

this time, you do not need to choose the file to open (it will automatically re-open the previous one), and you do not need to drag the size of the sprite to select - the mouse will have a yellow selection-box attached to it that is the same size as the previous one. so you just need to line it up with the next sprite to import, and left click:
 
 

continue to add all the sprites in the image. eventually the folder for your main character's sprites should look like this:
 
 

create another subfolder of the Main sprite folder called "Interface", and use the same techniques described above to import the mouse cursor images into this folder. it should eventually look something like this:
 
 

(it doesn't matter if the gaps around the mouse cursors look a bit different. it also doesn't matter if they appear in a different order)

open up the Mouse cursors section and select "0: Walk to". in the "Properties" pane in the bottom-right corner of the window, select Image, and click the "..." button over on the right. A sprite selector window will open. Click on the "Interface" sprite folder as created earlier, and from there select the sprite image for a generic mouse pointer. click "Use this sprite".
 
 

the mouse cursor hotspot is the pixel-position that you "click with" when you use it. it is indicated with a little crosshair + on the mouse cursor, and also alternatively with two properties in the properties pane, HotspotX (number of pixels across from left edge) and HotspotY (number of pixels down from top edge).

we want to make sure the hotspot is right on the top-left corner of the triangle:
 
 

repeat the process of setting up the mouse cursor image & hotspot for each of the other cursors. for "Look at", "Interact", "Talk to" & "Wait" use the specialized cursors with eye/hand/mouth/hourglass symbols, otherwise choose the same generic cursor as we just did for "Walk to".

right-click on Rooms and select "New room"
 
 

just click "OK" on the window that comes up
 
 

expand the "1:" that has now appeared in the Rooms section, and double-click "Edit room"
 
 

in the Properties pane, edit "Description" and enter a short descriptive name for the room (this name is not normally used in the game itself, it's mostly to help you manage your rooms later on)
 
 

now we're gonna set the room background. click the "Change..." button to choose an image file
 
 

in the "Show this room's:" dropdown, choose "Walkable areas"
 
 

click the Rectangle tool icon up in the toolbar
 
 

draw a rectangle roughly over the walkable part of the room background
 
 

now in the "Show this room's" dropdown, choose "Hotspots". select the rectangle tool again, and this time draw one over the painting hanging on the wall
 
 

now go over to the Properties pane, and set Name to hPainting (this is an internal ID - the little "h" stands for "hotspot"), and Description to painting (this is a display name, potentially to be used in-game)
 
 

click on the little yellow lightning bolt icon just above these properties to switch to events. we are going to define what happens when you look at the painting. click on the Look at hotspot row, and then on the little "..." button that appears on the right-hand side:
 
 

the room script will open. it will contain something like:
 
 click in between the { and the } and add in the following "player.Say(...);" line:
 
  

right click on Views and select New View

("views" in AGS are collections of related sprite animations. each individual sprite animation is called a "loop". some loops are associated with specific directions, e.g. in the "walking view" for a character, there will be a "left" loop, "right" loop, etc.)

enter a short name (all capital letters, no spaces) for the main character's standing/walking animations:
 

click Create new loop and then Create new frame. double-click this frame (will probably appear as a solid magenta box) and select the sprite of the main character standing normally. then click Create new frame again. AGS guesses that the new frame should have the next sprite immediately after the previous frame's, but if this isn't right just click the frame and replace it like the first one.

since we only have one walking animation currently, you can copy and paste the first loop to the three other directional loops. the only difference is that you should choose "Paste over this loop flipped" for the "left" loop (the second one).
 
 

create another view, called e.g. "DONNYTALK", for the main character's talking animation. unlike the walking animation, where the first frame should be a "standing still" frame that isn't part of the actual walking animation, all frames of the talking animation are used.

right click on Characters and select New character
 

in the Properties pane, make the following settings:

• RealName: Donny -- a display name
• ScriptName: cDonny -- an internal ID, the c stands for "character"
• StartingRoom: 1 -- the room we created earlier
• StartX: 160 -- number of pixels across from the left edge
• StartY: 170 -- number of pixels down from the top edge

also in the Properties pane, set NormalView and SpeechView to the respective animation views set up earlier:
 

finally, click the Make this the player character button, & confirm it
 
 

so Donny moves pretty slow across the screen currently

the default character movement speed is 3, kinda intended for a smaller/more "distant" sprite. let's increase it to 7:
 

now he scampers much more effectively
 
 

other movement-related properties you may wanna experiment with to see what works best for your character:

• AnimationDelay -- speed at which animation plays, smaller delay = faster animation
• MovementLinkedToAnimation -- set to False to slide smoothly while walking, instead of only updating position when the walk animation updates
• UniformMovementSpeed -- set to False to split the MovementSpeed property into MovementSpeedX (left/right) & MovementSpeedY (up/down)

---

next let's have a look at how the character speaks:

talk animation looks kinda crummy... now obviously the "correct" thing to do would be to go back and draw more frames for it. but I'm lazy and there is something to try instead...

go back to the speech animation view. edit the first loop. instead of just a 2-frame animation, make it a longer sequence that randomly mixes up the two talking frames with the base "standing-still" frame. it doesn't matter what order the frames are in as long as each frame is not the same as the ones next to it and the last frame is different from the first. now go through each frame and set the Delay property to a random number, in the range of about 0-5 (the delay is also displayed underneath each frame, as e.g. DLY:5)
 

do the same trick from the sprite animations: views & loops section earlier, to copy this animation loop & paste it over the others, using the "paste flipped" option for the left-facing one

ok next thing: I don't think the red speech text looks right. edit the character and set the SpeechColor property, I think this pale yellow is gonna suit Donny better:
 

finally, I don't think the font is right. I'm gonna replace it with the freeware font Mecha Bold (http://www.fontspace.com/captain-falcon/mecha), size 16

open Font 1 (this is the speech font) and click Import over this font...
 
 

note that you need to set the font's OutlineStyle property to "Automatic"


final result:

to recap the first few steps of room #1: right-click on "Rooms", select "New room", then "Edit room"; set the new room's "Description" property (to just a short name, not a full description) and click the "Display Background:" > "Change..." button to load in the room's background image

like in room #1, select "Show this room's:" > "Walkable areas", select the Rectangle Tool in the icon bar, and draw a big blue rectangle over the whole ground area:

however, this time there's an area of the ground that should NOT be walked over (the hole with the ladder sticking up out of it)... you can selectively erase this part by selecting Walkable area ID 0 from the dropdown selector at the side, and then drawing another rectangle over the unwalkable area:
 

next problem: currently when the main character walks into the distance, the sprite doesn't get any smaller, so Donny becomes gigantic and towers over nearby buildings:
 

go back to the Room Editor, bring up the properties for "Walkable area ID 1". set UseContinuousScaling to True, and then MinScalingLevel to 20
 
 

now Donny will appear tiny in the distance, but still normal size close-up:
 

in the room editor's background image preview, move the mouse to a place just in front of the ladder. make sure it is on a walkable area

with the mouse in this position, make a note somewhere of the two numbers that appear in the top left, next to "Mouse Position:"

do this for both room 1 & room 2
 
 
 
 

in the Room Editor, the first item in the dropdown list of editable things (walkable areas, hotspots, etc.) is always the room itself

so, select the room from the dropdown, and then click the yellow lightning bolt icon underneath, to see the room's Events

select the event entry for "Enters room before fade-in" (not to be confused with "Enters room after fade-in"!!!) and click the "..." button on the right
 
 

this will open the room script. you will see a bit of the script that has just been added that looks like this:
 for Room 1, change the content of this function to this (notice we're using the Mouse Position numbers taken earlier for room 1):
 for Room 2, with the other pair of numbers: 
 player.x and player.y are the pixel-position of where the main character is standing (number of pixels across from the left edge of the room, and number of pixels down from the top edge of the room). by assigning new values to them we instantly move the character to a new position

what this code is doing is saying: if we just arrived here from the other room, make sure the main character first appears at this position

finally, the last piece of the puzzle is to make it so Interact-ing with the ladder transports you to the other room

open the Room Editor and select "Show this room's" > "Hotspots"

select a hotspot that is not in use yet. in Room 1 we already have one hotspot (the painting), so use the dropdown list to choose another one (probably the second one, unless you've been adding some of your own)

anyway once you have selected an unused hotspot, use the Rectangle tool to draw a rectangular zone over the ladder:
 
 
 
 
 
 

in hotspot properties, set Description to "ladder" and Name to "hLadder". (it's OK to have a hLadder in both rooms, the hotspot name-IDs do not have to be unique throughout the whole game -- only per-room.)

next, in the hotspot's events, create a new event for Interact with hotspot

for Room 1, set the event function to this:
 
 for Room 2:
 ok! now run the game, right-click a couple of times to switch to the Interact mouse cursor, and you should be able to go back and forth between the two rooms by clicking on the ladder...

meet Marco:
 
he's a new character that we're going to add to the game. since Marco isn't going to be walking around (yet??) I haven't made him any animation frames for that, only standing & talking

create a new sprite folder named after this character, import the sprites to it (refer back to previous section "sprite folders" for more info on this)
 
-
 
next create standing and talking views for the character (see: "sprite animations: views & loops"). to be honest you only really need to do the first loop in each case, he's not even gonna be turning around

 
 
 
 
 

now create the "character" of Marco, using the two views we just created. refer back to previous section "main character" for most of the info on this -- except, don't click the "Make this the main character" button!!!
 
 
 
make sure the character's StartingRoom is set to Room 1, but don't bother with setting StartX & StartY. instead, open up the Room Editor for Room 1 and select "Show me this room's:" > "Characters". here, you can drag & drop to set the character's start position visually:
 
 
 
 
ok, now we're going to give this character something to say. right click on Dialogs and select New Dialog
 
 
 
 
 

set the dialog's Name property to "dMarcoChat". over in the "// Dialog script file" panel, replace these lines:
 
 
 ...with:
now click the Create new option button. In the row that appears above, enter "Bye, Marco." in the Option text field, and make sure the checkboxes underneath Show and Say are both checked. over in the "Dialog script file" part of the panel, replace these lines:...with:note that "return" has been changed to "stop" - this is important!! without it, Donny and Marco will be trapped forever in endless conversation....
 
click Create new option again. This time, put "(pause dramatically)" for Option text, and make sure the Say checkbox is NOT checked

in the dialog script, replace the newly-added part with:
 
 (later when we got the game running, because we unchecked Say here, you'll notice Donny doesn't actually say the "(pause dramatically)" option-text when you choose this option, but he does when you select "Bye, Marco.")

(also, you'll notice that when a character is directed to say "..." by the script they don't literally say that either, instead the game just pauses for a moment)

go back to the Room Editor. select "Show this room's" > "Characters". select cMarco from the drop-down list. click the lightning-bolt icon to show Events. select the "Talk to character" event and click the little "..." button on the right.

the script editor will open. (it may not look the same as script we've encountered before, it has a lot more already in it -- this is because it is the global script, which works across the whole game, rather than a room script, which is only active while you are in one specific room. since characters can move around between rooms, their event-handler functions have to go in the global script...)

anyway, try to ignore everything else in there for now and focus on this bit that's just been added to the script:
 change it to this:now run the game, right-click through to Talk to mode, and try it out on your new buddy

currently, when you use with the ladder to get between rooms #1 & #2 (see previous section: "linking up the 2 rooms"), the scene will immediately fade out even if you are standing on the other side of the room. it would be better if we at least see the main character walk over to the ladder first. (maybe later he could even be animated climbing the ladder, but for now, let's just get him over there....)

expand Rooms, and expand Room 1 inside it, but don't click "Edit room" - instead, click "Room script"
 

in the room script editor, the event-handler function we want to edit is one we created earlier called hLadder_Interact.

right now it should look like this:change it to:

• 100, 150 is the pixel position that we want the character to move towards. in this case, they are the same pair of numbers that we found at the beginning of section "linking up the 2 rooms" - a point at the base of the ladder
• eBlock is there to say that we want to wait until the character has finished walking before carrying on with the next instruction. the other possibility here is eNoBlock, where script commands continue to be run while the character is moving. here, that would mean that he would start walking, but barely get half a step before the scene fades out
• eWalkableAreas means that the character should only be able to walk on walkable areas. the alternative is eAnywhere, which would mean the character would always walk in a straight line even over unwalkable areas to reach the destination. with Room 1 having only a single rectangular walkable area, you wouldn't notice the difference anyway, but in a room with a more complex floorspace, like for example an L-shaped room, the difference becomes more important.

now do the equivalent change for Room 2's room script. remember to use the other set of numbers as the first 2 parameters of player.Walk(...) this time (i.e. 250, 190 instead of 100, 150)

let's make Marco a bit more useful. open the dialog dMarcoChat created earlier. add a new option:

• Option text: "Is this ladder safe to climb?"
• Show: yes
• Say: yes
• Dialog Script:
  Code:[Select]

  @3
MARCO: Safe as houses. I got it reinforced this morning.
return

notice that this dialog option has been given the number 3. we need to know this number for the next part

open the room script for Room 1 again. edit the hLadder_Interact section again, this time to read:now Donny will only do it after he has been reassured by trustworthy Marco, otherwise he will refuse

(there's no need to make the equivalent change in Room 2's version of hLadder_Interact too, since you can't get there without first using the ladder anyway...)

so, we want to add an inventory item. to keep things simple, it will be one that you just start the game already holding.

but before we can add an item, we need to have a visible inventory item window added to the screen. since I started with the Empty Game template, there is no visual interface at all yet. let's change that...

first, plan out a bit what you want the interface to be like. here's what I came up with:

• a little button permanently in the bottom left corner of the screen
• clicking the button expands out to a panel that stretches across the bottom of the screen
• clicking the button again collapses the panel back
• the panel is split into 3 sections:
  • verb buttons: for "talk to", "look at" etc.
  • system action buttons: for "save", "load", "quit" etc.
  • inventory window: a single row of items, with arrow buttons on either side to step through, one item at a time

of course there are lots of variations that you could do, depending on taste & the type of game you want to make. if you would like to know how to do any different kind of interface, please do post a description/mockup of what you have in mind (or just namedrop games that do it the way you want)...

ok, once you are happy with the design, we need some graphics for it. here is a double-sized version of the interface graphics I created for this tutorial:
 

i know there is a bunch of stuff here, but hopefully it isn't too incoherent... at the bottom is a full composite mock-up of how the interface would appear in the final game. above it are all the isolated components -- including the first inventory item graphic. it's important to do this here because you need to decide the size of inventory item image that you want to use for your game, so that you can determine the size of the inventory item window. here, the inventory item is 30 pixels wide & 42 pixels tall, so I've made sure the inventory item window space fits exactly four of these items in a row.

let's import the graphics. first, create a new sprite-folder named "Inventory", and add the inventory item prototype to that.
 
 

everything else (including the panel background at the top, but NOT including the mockup at the bottom) should be imported into the "Interface" sprite-folder that we created previously (for the mouse cursors). note that the expand/collapse button, inventory stepper buttons and panel background should be imported with "Transparent colour" set to No transparency.
 
 

...don't forget to set it back to "Top-left pixel" for the others. at the end your Interface sprite-folder should look something like this:
 
 
 

ok, next thing. right-click on GUIs and select New GUI.
 
 
 

in the Properties for the new GUI, set the following values:
 

• Name: gPanel
• Visibility: Normally, initially off
• Width: 320 -- i.e. width of the panel background, in pixels
• Height: 42 -- i.e. height of the panel background, in pixels
• Top: 158 -- i.e. the height of the screen minus the height of the panel, so it rests at the bottom
• BackgroundImage: (select the panel background sprite, using the sprite selector)

right-click on GUIs & choose New GUI again. this time with these properties:

• Name: gPanelOpener
• Visibility: Normally, initially on
• Width: 8
• Height: 42
• Top: 158
• BackgroundImage: (of the 2 expand/collapse button sprites, select the one with the right-pointing white arrow on it)

and then create a third GUI, with these properties:

• Name: gPanelCloser
• Visibility: Normally, initially off
• Width: 8
• Height: 42
• Top: 158
• BackgroundImage: (the other one of the 2 expand/collapse button sprites)

expand Scripts and double-click GlobalScript.asc:

scroll right down to the bottom of the script file, and add these lines to the end:now go back and edit the gPanelOpener GUI again. switch from Properties to Events, and create a new event handler for the OnClick event. the new function will look like this:
 change it to this:now do the equivalent thing for gPanelCloser: create an OnClick event handler, and set it to call our ClosePanel() function.

ok!! if you run the game at this point, you should be able to expand and collapse the panel, like this:
 
 

nice but a bit empty.... back in the editor, open the gPanel GUI for editing. click the "Add GUI Button" icon in the icon bar, and click'n'drag a rectangle like this (precise size and shape doesn't matter, we can adjust it in a moment):
 
 

in Properties, set the Name for this new button to btnWalkTo. then set its Image -- in the sprite-chooser, take the first of the two "boot" images from the "Verb Mode Buttons" set (the one with its heel flat on the ground). choosing this image will automatically set the button's Width and Height properties to the size of the sprite. (AGS helps you out here, unlike when you set the background image of the GUI itself...)

also, set the PushedImage property to the second "boot" image, the one with its heel raised off the ground.

you can adjust the position of the button by dragging it with the mouse. avoid the bottom-right red dot, though, or you will resize the button instead of moving it. get it about here:
 

once you are happy with the position, set the button's Locked property to True. it's a good idea to do this whenever you've added something -- it just means you can't accidentally move/resize the button in the visual editor (easier to do than you might think...)

next create an OnClick event for the button, and set it to this:now repeat the process for creating three more buttons, for the other modes - btnLookAt, btnInteract and btnTalkTo. space them out a little bit:
 

the OnClick event handlers for these new buttons should look like this:
 if you run the game now, you should be able to use the buttons to switch between the different mouse modes:
 
 

next we want to add the three "system action" buttons - btnSave, btnLoad & btnQuit... similar thing to the verb buttons, except of course they are stacked vertically, and there are three sprites for each one. for each button you should set the Image property to the first sprite, Mouseover Image to the second, and PushedImage to the third.

here are the OnClick event handlers for you to set up with these buttons:this will bring up the standard built-in dialogs for saving, loading and "are you sure you want to quit?"-ing. (if we did QuitGame(false); instead of QuitGame(true); the game would close immediately, without confirming) of course you can make your own fully-customized versions of those dialogs too... but let's leave that for another time...

now let's add the inventory item window. in the icon bar click the little coffee cup icon, and drag out a rectangle that covers the dark rectangle on the right hand side of the panel:
 
 

again, don't worry too much about getting the shape exactly right first time, you can always adjust it using the Properties. they should be:
 

• Left: 188
• Top: 0
• Width: 120
• Height: 42

while you're there, set these as well:

• Name: invMainInventory
• ItemWidth: 30
• ItemHeight: 42

the final two buttons we need to create are the little arrows on the left and right side of the inventory window. name these btnInvLeft and btnInvRight, use the sprites from the "inventory item stepper" section for Image/MouseoverImage/PushedImage, and set up these OnClick events for them:...and that's it for the GUI!

now let's make ourselves an inventory item... right-click Inventory items and select New Inventory Item
 

give the new item these properties:
 

• Name: iEnergyDrink
• Description: energy drink
• PlayerStartsWithItem: True
• Image: (select the image we added to the "Inventory" sprite folder earlier)
• CursorImage: (same as Image)

also, click somewhere on the top left rim of the can in the "Mouse cursor image" preview, to set the hotspot

open the Events for the item and create a new event for Look at inventory item

set the handler function to this:
 see here that to do double-quotes " inside a line of gametext, that is itself enclosed in double-quotes, you need to put a backslash \ just before it... i.e. \"HOT-KICK\" here will appear as plain old "HOT-KICK" in the game


anyway, run the game now and donny should be carrying the can of energy drink!!

h'okay...! phew! that's it for now...