Since my wall-o’-text documentation for ALPACA is probably not the friendliest introduction to the engine, I figured I would do a quick tutorial series showing how you can make a simple one-puzzle game using the engine. I’ll try to incorporate as many of ALPACA’s features as I can while still keeping things easy and accessible.

We’ll base this game around that adventure game puzzle you may remember as “basically every adventure game puzzle ever” - finding a key and using it to open a door.

To follow this tutorial you’ll need the latest (2.0) version of ALPACA, available here. Download and extract the ZIP file, then navigate to source->blank_project and open up alpaca_blank_2-0.fla.

This is a barebones project that contains just enough code and graphic elements to make an ALPACA game that actually loads. Go ahead and hit Cmd/Ctrl + Enter to Test Movie. You’ll find a not-very-exciting game with a bouncing ball for a main character and a single obstacle that you can pick up. But it works!

So let’s take this project and make it our own. First, go ahead and save it as an alternate filename, my_first_alpaca.fla or whatever you like.

Let’s start by creating a new, more interesting player character. Since animating a walk cycle is a lot of work, we’ll make our character a robot with wheels instead of legs. And since the Internet never gets tired of Portal references, let’s call her JaNET and base her off those wonderful turret designs from Valve’s magnum opus.

In the library, expand the playerElements folder and open up Player. The four required frames for the Player movieclip, labeled default, walk, talk, and grab, are already here, so we’ll just edit the movie clips contained in each frame. Right now we’re in the default frame, which contains the movie clip called “playerSide.” This is just a non-animated clip of the player character. Right now each frame contains a nested movie clip, which is a good way to embed more complex animations, but since we’re trying to keep things simple we can just build our whole player character right here.

Go ahead and delete the “player” layer and create a new one called “head.” Select the Oval tool from the tools menu and set the fill to white and the stroke to black. Put the stroke width value at about 2.00, and create a simple egg shape.

Click the middle of the egg shape once to select the fill. Then, in the Color window, change the setting from “solid color” to “linear gradient.” We’re going to give it a slightly more three-dimensional look. The default gradient should come up as black to white, so change the black to a slightly off-white gray value. Then use the Gradient Transform Tool to rotate the gradient so we have white at the top and off-white on the bottom, scaled to the size of the egg.

Next, use the line tool to draw a gray line down the length of the egg. Use the Free Transform Tool to drag the line into a curve, like so.

Now create a new layer above “head” and name it “mouth.” This is going to look more like an eye, but since it will glow when the player speaks, it’s a mouth as far as we’re concerned. Make a small circle in the middle of the egg, and set its fill to a dull blue gradient.

If you run Test Movie again, you’ll find that the demo is still functional. Now you play as a weird floating egg thing that doesn’t actually animate, but all the movement still works, and since you retained the “hitspot” shadow underneath the new design, you can still maneuver around the box. The only thing that doesn’t work is picking up the box, because the engine is listening for a sign that the “grab” animation is finished, and we don’t have that animation any more. We’ll add that shortly, but first let’s get the walking and talking animations looking prettier.

Navigate to the talk (third) frame and create a keyframe on the “mouth” layer. Make sure to create a keyframe on the last frame (grab) too, so the mouth change is restricted to this one action. Next, select the mouth’s fill and change the gradient colors to something brighter. You can add some glow around it as well if you’re feeling fancy.

Test your movie again and when you look at the box, JaNET’s eye/mouth will glow as she speaks. It’s not much, but a little visual cue that someone is speaking is always helpful, and this saves us from having to do lip sync.

Let’s add the wheels and their movement. Add a new layer between “mouth” and “labels” and name it “wheels.”

Next, draw an ellipse with a nice radial gradient. Add as many details as you want, but make sure you add something small along the rims that we can move around later to give the illusion of rotation, like these little circles.

You’ll have to cheat a bit to add the second wheel, since given this perspective it should really be behind the head - but that would require doing a second layer, and we’re trying to keep things simple. Just arrange it so that the incorrect stacking isn’t noticeable.

OK, now we need to make the wheels appear to spin. In order to do this we’re going to nest a movie clip within our timeline. Any animation we put within that clip will continue to loop automatically as long as the walk frame is active. Create a keyframe on the “wheels” layer at the walk frame (and don’t forget to put another one right after it on the talk frame). Click on the keyframe to select everything on the layer, then hit F8 and convert the wheels to a movie clip with the name playerWheelsMoving.

Now double-click on the new movie clip and we can start animating. Copy the dots, or whatever details you’re going to be animating, to their own layer on the top (you might need to fill in some gaps in the drawings that they leave behind). Create at least two more keyframes for the dots layer and move the dots in each keyframe as though they’re rotating around the edge of the wheel. Since this is going to be a quick animation loop, you don’t have to be too exact. Watch the animation in action by Testing Movie and moving your new character around the screen. You may have to play with it a bit before it looks right.

Once you’re satisfied with your spinning wheel loop, head back to the Player movie clip and we’ll add our final action, grab. Since JaNET is a robot, we can avoid having to do any complicated arm animations by giving her a robotic alternative; say, a tractor beam. Add a new layer above “wheels” and name it “beam.” Create a keyframe on the final frame.

Let’s give this action a distinct color so it doesn’t look too much like our “talk” non-animation. Change the color of the eye/mouth to a bright orange (there should already be a keyframe on this frame). Then, on the beam layer, make a rectangle with a gradient of roughly the same color, going from 75% to 0% opacity.

Using the Free Transform tool, adjust the vertices of the rectangle and curve the small end so it looks like it’s being projected from the eye.

Now we just need a nice sound effect to really sell this. I’ve created one you can use here, or just find/create your own if you prefer. Since we also need to nest a movie clip here in order to tell ALPACA when the grabbing motion is finished, we can solve both problems at once by selecting this frame of the “beam” layer and converting it to a movie clip called playerGrabBeam.

Open the clip and create a new layer called “audio.” Import the audio clip you’re using to your library, and then with the audio layer selected, drag it onto the stage. You’ll see a small piece of the waveform appear on your first frame. We’ll need to extend the clip in order to accomodate the audio’s length, so if you’re using the sample clip, set a frame on the audio layer and the beam layer at frame 9. Otherwise, play with the length until you find the point where your own audio clip ends.

Now for the important bit: create a new layer called “actions” and place a keyframe on your final frame. With that frame selected, open the Actions panel and place the following line of code:

parent.dispatchEvent(new Event("clipFinished"));

This is how we alert ALPACA that the grab animation is finished. You’ll need to do this in any custom animations you create.

One last thing: in the Properties window, you’ll note a line that says “Profile: Default.” Click on the Edit button next to it, and next to “Audio Event,” click “Set.” Change the compression to “Speech” and hit OK. This is going to make your audio higher quality; at the default quality, my custom sound effect becomes a static mess.

Now go ahead and Test Movie. You should be able to move JaNET around the screen and pick up the obstacle with all our new animations. Success! We’ve created our own player character. You can now delete all the original player elements from the library if you’d like; just make sure not to delete Player and playerHitSpot, which are the only movie clips we’re still using.

So we’ve got our new character, now we need to create an environment worthy of our little robot friend!

Next, in Part 2: creating a new room.

Feel free to leave any questions or issues in the comments.