Click here for part 1 of the Create your First ALPACA Tutorial

We’ve got our character, our environment, and our primary goal. Now we just need to add a simple puzzle and we’ll have a complete (albeit super bare-bones) game. The player needs to get a keycard in order to use the teleporter. We could just make a keycard and put it on the floor; this would be the same process as making the teleporter, except we’d have to give the keycard a “_G” tag in order to add it to the inventory (in other words, its instance name would be keycard_O_G, making it an obstacle and a Gettable object). But let’s make the first room a little more interactive instead. This will also give us an opportunity to create a Usable object.

Open up the room1 clip and add a new symbol to it. Design a keyframe dispenser within the symbol and give it the instance name dispenser_U within room1.

Up in the timeline, add two frames with the labels “closed” and “open.” Make sure to put the stop(); action on each frame as well. This will allow us to change the movie clip slightly once the player has used the dispenser. In my case I lit up on of the display lights on the dispenser to show that it had dispensed a keycard.

Add a usePoint at floor level in front of the dispenser. This is all you need to add, since the dispenser is not an obstacle.

Open up speechlines.js and add some lines about the dispenser so the player can interact with it.

Test your movie. Notice that, when you choose to use the dispenser, JaNET automatically moves to it and uses her grab animation. But nothing actually happens beyond this - and her “use’ line from the speechlines file doesn’t play. That’s because we need to add this special functionality within the Puzzle class. This will the be first real coding we have to do in our ALPACA project.

In your com/laserdragonuniversity/alpaca folder, open up Puzzle.as. Scroll down to the bottom of the main Puzzle function and add these two lines after allPuzzles = new Object; allPuzzles.room1 = new Object; allPuzzles.room1.usedDispenser = false;

This will give us a property we can use to tell ALPACA whether or not the player has used the dispenser. You’ll see how this plays out in a moment. Next, scroll down to the usedItem function. This will be called whenever the player uses any item with the _U tag in its instance name. In the switch statement, above the line that reads default:, add the following code: case "DISPENSER": var dispenser; for (var i in Engine.usableItems){ if (Engine.usableItems[i].displayName == "DISPENSER") dispenser = Engine.usableItems[i]; } dispenser.gotoAndStop("open"); speech = new Speech(stageRef, dispenser, "use"); allPuzzles.room1.usedDispenser = true; break;

What we’re doing here is locating the dispenser movie clip in order to control it (I was never able to find a more elegant way to do so than by scanning all the usable items for it, which is clunky, but it works). Then we’re switching it over to the “open” frame that we created earlier. After that, we set JaNET to speak the appropriate line, and we change the puzzle property we created earlier to reflect that the player has used the dispenser.

Test your movie. Now the dispenser changes when the player uses it, and we get the appropriate line.

EDIT: I totally forgot one thing - the keycard dispenser needs to become unusable once we get the keycard (since multiple keycards are of no use in this example). So add a couple lines of code to the block we’ve just edited, right before the break:

dispenser.usable = false; dispenser.lookTag = "2";

The “lookTag” means that when we try to use the dispenser again, the engine will use the line “use2” instead of “use” within speechlines.js. So add a line in the speechlines file under the “DISPENSER” block:

"use2":"I already got the keycard."

OK, there’s just one thing we’re missing - the keycard itself. First we have to make one.

Draw a keycard in a new symbol. Name it keycardProper and make sure to export it for Actionscript. Next, create a new blank symbol, call it keycardInv, and place keycardProper in it. This second symbol is the one that will appear in the player’s inventory - it’s a separate symbol in case you want to change the appearance of something after the player picks it up.

Now go back to Puzzle.as and add these lines to the switch statement we just edited, between the lines allPuzzles.room1.usedDispenser = true; and break; var keycard = new keycardInv; keycard.displayName = "KEYCARD"; inv.addInvItem(keycard.displayName); This will create a new instance of the keycard and place it in the inventory when the player uses the dispenser. Test your movie. Now it works!

You’ll get errors if you try to use or look at the keycard in your inventory, because we haven’t set up any speechlines for it. Open up speechlines.js and add some.

Note the lines “useDISPENSER” and “useWINDOW” - those will tell ALPACA what to have JaNET say when we try to use the keycard with the dispenser and window, respectively. Right now you can’t use inventory items with each other, but it wouldn’t be too hard to add that functionality.

You’ll also note that if you leave the room and come back, the keycard dispenser goes back to its default (“closed”) state. We can fix this by adding the following code within Puzzle.as, in the newBackground function: switch (thisBack){

case "room1": if(allPuzzles.room1.usedDispenser){ var dispenser; for (var i in Engine.usableItems){ if (Engine.usableItems[i].displayName == "DISPENSER") dispenser = Engine.usableItems[i]; } dispenser.gotoAndStop("open"); dispenser.usable = false; dispenser.lookTag = "2"; } break;

This method gets called whenever the player enters a new room. We’re making use of the usedDispenser property to maintain the change to the dispenser. You’ll want to do this for anything you change in a background as a result of player actions.

OK, now for the final step: creating a custom movie clip for when JaNET uses the keycard on the teleporter. Right now, nothing will happen if you try this. When you try to use an item on another item, ALPACA will check to see if there is a movie clip in the library pertaining to that action. Once we create it and name it properly, it will show up automatically when we play the game.

Create a new movie clip and name it action_KEYCARD_TELEPORTER (export for Actionscript, you know the drill).

Drag teleporterProper from the library into the clip. Now here’s the important thing: ALPACA will remove the player and the teleporter from the stage when this clip is activated, and replace it with the movie clip for the clip’s duration. That means that you need to make sure that the items in the movie clip are properly lined up, so the user doesn’t see a sudden jump when the movie clip starts.  To do this, open up teleporter (the version with the obstacle nodes in room2) and check the properties of theproper movie clip. Note its x and y value. Open up action_KEYCARD_TELEPORTER, select the teleporterProper instance, and set its x and y to those same values. This will keep it properly lined up with the teleporter in room2.

Test your movie. Now you can use the keycard, but JaNET just disappears and nothing happens.

That’s because ALPACA is replacing JaNET and the obstacle with our new movie clip, which only contains the teleporter. ALPACA is waiting for the movie clip to report back that the clip is finished with the ”clipFinished” event, and since the movie clip never sends that message, it will stay on the stage indefinitely. Let’s fix that.

First, let’s put JaNET in the clip. In teleporter, make note of the x and y values of the usePoint. Drag Player from the library into our new clip and set it to those x and y values. You’ll also need to apply a flip horizontal transform so she faces the right way. Put JaNET on a separate layer within the movie clip and use Modify->Break Apart to turn it from a symbol into a graphic (this is important - otherwise there will be more than one Player object in the scene and that will create a conflict). JaNET’s shadow will still be a movie clip, which is fine - place that on another layer behind her.

Break Apart the teleporter as well. Add a keyframe at frame 30 (two seconds, since the project is set to 15fps by default). Change the gradient in the middle to something brighter and glowy. Select the space on the layer between the keyframes and add a Shape Tween, so we get a nice fade from gray to glow.

On a new layer, add a glowy rectangle. Use shape tweens to make it expand outward and upward over the course of a few seconds.

Create a keyframe for JaNET in which she has floated up and rotated a bit into the glowy portal, then apply a Classic Tween in between the keyframes.

On the frame where she reaches the portal, make a big flash. Use shape tweens to make it start small and expand quickly, like an explosion. Play round with this animation (press Enter to preview it) until it looks like JaNET being drawn into the portal to your standards.

Now we need to add an actionPlayerspot instance from the library. Name the instance playerspot. This indicates where the player will be placed after the movie clip has ended. Since we’re ending the game after this clip, it doesn’t matter where we put it, but you should get in the habit of using it.

Our final step is to create an action layer, add a keyframe on the final frame, and then add the following lines of code on that keyframe:

stop(); dispatchEvent(new Event("clipFinished"));

Test your movie. It works, but JaNET just reappears at the position of our playerspot. We still need to add the code that ends the game here; back to Puzzle.as! In the performedAction functon, add the following within the switch statement: case "[object action_KEYCARD_TELEPORTER]": stageRef.dispatchEvent(new Event("endGame")); break; Once again, test your movie and solve the puzzle. Now we get a generic ending! Woohoo!

All you have to do now is spice up your opening and closing titles and you know have a (barely) functional game!

Play our sample game here. (The whole thing breaks mysteriously when I try to embed it here in Wordpress. Something to look into, no doubt).

Download the full project files here.

All right, this concludes the basic ALPACA tutorial. At some point soon I’ll post some supplementary tutorials dealing with the other aspects of the engine, like the conversation system, and using audio for the speech lines.