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

Now that we’ve created our first room, let’s add a second one. Really, this will be the other side of the same room, but since ALPACA doesn’t allow for scrolling backgrounds yet, this is our best way to make the environment feel a bit more expansive.

Since this is an extension of the first room and will share a lot of the same details, like the floor, we’ll just duplicate the room1 symbol to save time. Select it in the library, Duplicate it, and name the new version room2. Remember to export it for Actionscript.

Now play around a bit with the details - we can remove the left wall and the window, extend the detail on the walls, and add a new curved wall on the far side (don’t forget to make that wall a symbol so the player can’t walk past it).


Move the startPoint over to the left, where the player will be entering the room, and change its instance name to startPoint_room1. Now ALPACA will know to place the player here when they’ve entered from room1.

In the userInterface folder in the library you’ll find a symbol called exitArrow. Drag that onto the stage, rotate it so it points left and scale it up a bit. Give it an instance name of EXIT_room1 and place it over startPoint_room1.

We’ve almost connected our two rooms now; we just need to add the connection points to our original room. Open up room1 again and place another startPoint and an exitArrow on the right side. Name these startPoint_room2 and EXIT_room2, respectively.

Go ahead and test the project, and you should be able to move from room to room. That’s all there is to it! You can add as many rooms as you like in this fashion, as long as you have exits and startpoints on either side.

We still don’t have much of anything in either room, of course. Let’s add our “door,” the one the player will need to find a “key” for. Since we have a sci-fi theme going, we’ll make it a teleporter instead of a standard door. Open up room2 again and create a new layer. On this layer, draw a circle with a metallic radial gradient. Make it large enough to fit JaNET on top, but not so big that she can’t maneuver around it.

Convert this drawing to a movieclip and name it teleporter. Go ahead and add some details to it to spice it up, and let’s add a button next to it for good measure. Once you’re done drawing, select everything and convert it to a movieclip within this movieclip. Name it teleporterProper in the library, and give it an instance name of proper. This will distinguish the actual visible part of the teleporter from all the other stuff we’re about to add to it.

If you run the project now, JaNET will be able to roll directly over the teleporter, since we haven’t set it up as an obstacle yet. To tell ALPACA this is an obstacle, simply open up the room2 movieclip, select the teleporter and change its instance name to teleporter_O. Go ahead and test the movie…

Oops, the game breaks. This is because we haven’t laid down the symbols we need in order for ALPACA to define the boundaries of the obstacle. We’re going to need to add four corner nodes, a depthSplit line, and a usePoint. If you get this error message in the future, it might be because you forgot to add one or more of these things to your obstacles.

Let’s open up teleporter again (not teleporterProper, mind you). Drag the depthSplit from the library and place it about halfway up the height of the drawing. Give it the instance name of “depthSplit.” This line is used to determine when the player should appear in front of the obstacle and when they should appear behind it. You might need to tweak its location if it doesn’t look right during gameplay.

Next, drag one of the black nodes from the library and duplicate it until you have four. Arrange them into a rough box shape around the teleporter. Try to take perspective into account here, but don’t worry about being too exact. Name their instances, clockwise from the upper left, nodeUL, nodeUR, nodeLR, and nodeLL (you probably noticed that’s Upper Left, Upper Right, Lower Right, and Lower Left).

Finally, drag the red usePoint out of the library and place it in front of the button. Give a little space, because JaNET is going to center her shadow over this, so it shouldn’t be too close to the obstacle itself.

Test your movie again. Not only should you no longer get an error message, but JaNET will maneuver around the obstacle on her way across the room and back. If the movement looks weird, try changing the location of the nodes or the depthSplit until it suits you.

So we’ve created an obstacle, but we can’t do anything with it yet. Change its instance name to teleporter_O_L. Just like with the window, adding the _L to the name will make it interactive. Before you test this, open up speechlines.js and add some lines about the teleporter.

Go ahead and run your game again, and you should be able to look at the teleporter and attempt to use it. Of course, you can’t use the door until you have the key, so in the next part of this tutorial I’ll cover how to add an inventory item and make a very basic puzzle.