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.
I try to open alpaca_blank_2-0.fla and I’ve got error message (Unexpected file format).
I use Adobe flash CS4. Pls help.
Ah, yes, the project files are all CS5 and they’re not backwards compatible. However, there isn’t anything in ALPACA that wouldn’t work in CS4 that I’m aware of, so you should still be able to make use of all the .as files; you’ll just have to create all the library items from scratch.
Let me see if I can figure out a workaround and post it on here. In the meantime, you can still make use of the ALPACA 1.0 download for CS3 that’s down at the bottom of alpacaengine.com. You just won’t have savegame functionality, and your external files will be in XML instead of JSON, but everything else will work the same, and you’ll be able to update your project file to ALPACA 2.1 once I get this figured out (or you get CS5).
Hi this is just what I’m looking for but I have a problem. I have done all the steps and test my movie. The robot moves fine, however when ever I try to grab the object it just displays the grab beam frame. The robot is there using the beam so to speak, but it’s stuck on that frame and the object doesn’t even disappear.
Did you make sure to add the line of code to the playerGrabBeam movieclip? It sounds like the rest of the game isn’t being alerted when you reach the end of the clip. Make sure that the last frame of the animation has this code with no spelling errors:
parent.dispatchEvent(new Event(“clipFinished”));
I have done that, It just does the same thing. If you have a email I’ll send you the flash document, as it’s pretty hard to explain.
OK, send it to help@alpacaengine.com and I’ll take a look at it.
thanks for the engine its really good and the tutorial too, ill show u my game when i finish it
Hello. The robot flashes light only for some time during talking. I want it to flash its light throughout the dialogue until the player clicks. How can I do it?
That’s a quick fix – open up the Subtitle class and around line 122 you’ll see this code. Just comment it out or delete it.
// Stop the player's mouth from moving once a reasonable amount of time has passed
// Only use this if there's no audio for the players' lines
if (!useAudio){
speakTimer = new Timer(65*textbox.length, 1);
speakTimer.addEventListener(TimerEvent.TIMER, speakTimeOut);
speakTimer.start();
}
Hi!
Thanks for this superb work of tutorial!
I would like to use the engine without a Player (Myst like), but well using the other functionalities (grabbing etc).
Is there a simple way to use it that way or is the engine in need of a Player to work properly?
What should I be aware of?
thank you,
jp
(using CS3)
I’m sure this can be done, you’ll just need to tinker with the code a good deal. You’ll pretty much be removing the Player class entirely and any references to it, since that only deals with the visible player onscreen. Unfortunately that means going through almost every class and retooling the code. If you want a quicker but messier option, you could also just go through the Player class and basically remove all the functionality but leave the methods – make startWalking just immediately call stopWalking, for example, and then remove all the walking code (which is most of the Player class). Then when one of the other classes tells the Player to walk somewhere, it’ll just interact with the object right away. It’s not very slick but I think it would work.
Yet another bit of clunkiness that I’ll address in future releases. Good luck!
OK I’ll try something like this, or if I get too confused (I’m not too strong in coding), I might use a Player anyway because it’s a cool part of the game
.
For the moment, I am not able to get the right subtitle when looking at an object (_L)
It’s giving me the default dialog “Nah, I don’t think…”
It is with the first version of the package, since I’m stuck with CS3.
Could it be possible that a mismatch happened since you replaced the .xml files with the .js files?
I’m editing the demo from the first package (AlpacaFullSource), but the tutorial is for the version 2.0 (alpaca_blank_2-0.fla) that I can’t open.
And I’m editing the file speechline.xml
Is there a future possibility that version 2.0 runs with CS3?
Thank you!
Actually, the 2.0 code works just fine with CS3 – only the project files require CS5. The catch is that, if you’re using CS3, you’ll have to create all of the base movieclips and everything from scratch. The CS3 sample project file contains all of them except for the new boxes and buttons associated with SaveRestore; I no longer have a copy of CS3 so I can’t down-save them, otherwise I would. But if you’re willing to rebuild that stuff on your own, then you should be able to run everything in CS3 with no problem.
I’m not sure about your problem; can you post the code you’re putting in the speechlines file? It should be the same process as in the tutorial, just with XML formatting instead of JSON.
So I’ll try building the boxes and buttons for the save function. I’ll let you know if it’s working. If I understood correctly it’s only those that are missing?
Here is the test code I put for speechlines.xml :
FIRSTLINE
I have no idea how I got on top of this cliff, but I’d better find a way off it. There’s no bamboo up here, and I’m an endangered species as it is!
MYOBJECT
Looking at my object…
and the rest of the file I left as it was…
So it’s your code; just adding the MYOBJECT stuff for testing.
but it doesn’t seem to find the look speech for the item MYOBJECT.
the instance name is myobject_L
I didn’t create a Proper version as I assume it’s not necessary for just looking.
Can I use the JSON file instead, only replacing the related lines of AS code in engine.as?
oups! I just see that the formatting of the text is gone in the previous message! so you can’t check that correctly.
Well actually I just copy and paste your lines and replace the names…
With the formatting, does it look like this?
<item>
<name>MYOBJECT</name>
<look>Looking at my object...</look>
</item>
You don’t want to copy and paste from the FIRSTLINE segment, because that works differently from everything else.
You could swap out all the XML code for JSON if you want, but you’ll need to change more than just the Engine class – Subtitle also uses XML in 1.0, and I think it pops up elsewhere, so all that would need to be changed too.
No, with formatting it looked different, but the message skipped all the html tags and all the text in between..
I’ll send it by email.
I’ll go on with the tutos and tests tomorrow because it’s late here (Belgium)
Thank you again for your valuable help
Well, I just refresh the page and now that I look again at your message the formatting is indeed exactly like you have written!
(before refreshing it had also no tags)
Can I draw the props, characters and backgrounds in another program? The thing is that I have an excelent program to draw an I would like to know if I can put my drawings in the game.
Sure, Flash can import pretty much any standard image format. For all the game movieclips, just create an empty movieclip and drag your image(s) from the library into it.
Hi, this is exactly the sort of thing I was looking for and I’m trying to use it for a game project for school. I’m having a problem with testing it though. It works fine for the initial demo, but when I replaced the ball with my own character and tried to test I got 12 errors:
1120: Access of undefined property restore1
1120: Access of undefined property restore2
1120: Access of undefined property restore3
Then repeated for each set of corresponding lines of the code. Then when the movie window pops up it, it’s completely blank.
@gm – restore1-3 refers to the buttons next to the save game slots in the Save/Restore menu; it sounds like those have gotten deleted or renamed somehow. Did you replace or remove any of the Save/Restore movie clips in the library?