OK, we’ve created a new player character, so a big chunk of our work is already done. Now we need an appropriate environment for the game, something a little nicer than the default orange plain of nothingness. How about a futuristic-looking space station? We’ll go with the clean white THX-1138 look, because it’s cool, and more importantly, it’s easy to draw.
First, go to Insert->New Symbol (or hit Cmd/Ctrl+F8) and create a new movieclip called “room1.” Make sure to expand the advanced settings and check “export for Actionscript.” This will allow ALPACA to find this background in the library. You may get a warning message saying that Flash will automatically create a class definition upon export, but you can ignore this.
Now we have a movieclip that will contain our new background, the first room of a two-room space station. Let’s start by bringing in some outside graphics to use for our space view background. You can actually do all of your graphics this way, and avoid doing any drawing in Flash at all, if you prefer. It’ll generally make your game file larger (depending on your image compression settings), but it gives you more freedom in terms of your look. It also lets you save time by grabbing public domain images off the web, which is where I got this space scene. Download that image and grab it with File->Import->Import to Stage. This should place the image with the top left corner at 0,0 (right where the little crosshair is). If not, set its X and Y values to 0 in the properties window so it will line up properly with the screen. This image is 700x450 pixels, which is the same as the screen size of our project, so while you can place things outside the image area if you want, they won’t show up when you run the game.
Let’s create the walls and floor next. Draw a big rectangle over the top of the image like so, and give it a very light gray-white gradient and a dark gray stroke. You might want to put this on a new layer; splitting your composition across multiple layers makes it a lot easier to edit later.
Next, set the rectangle tool’s color to black and give it some rounded edges. Draw a black rounded rectangle over the wall (make sure this is on the same layer as the wall rectangle).
Select the rectangle and delete it, and now we have a window! Let’s make it look a little nicer by selecting the stroke around it and setting it to something around 4 pixels. Then make a new layer behind the wall layer and draw some dark gray rectangles to make a frame - this will give the window some appearance of depth.
Our last step on the window will be to give it some shine so it doesn’t just look like a hole in the wall. Put another rounded rectangle over most of the window’s surface.
Now set it to a gradient from white, alpha 100%, to white, alpha 0%. There - a nice glassy shine.
Go ahead and add some more graphical details to the wall as you see fit. Creating a wall on the left is a good idea, too, since it will make it clear that there’s nothing to explore in that direction.
Next comes the important part: the floor, which the user will actually interact with. Make a new layer just above the space image and draw a simple rectangle across it. Then select it and convert it to a movieclip called room1Ground. You don’t need to export this for Actionscript…
…but you do need to select it and make sure its instance name is “ground.” That’s how ALPACA knows that the user can move across it.
We just have a couple more steps before we’re ready to test out our new background. Create a new layer called “startPoint.” Then go to the Library, expand the userInterface folder, and drag the blue startPoint symbol to the stage. Put it somewhere in the middle of the room. Then set its instance name to “startPoint.”
Now we’ll need to duck out of Flash for a second to change the starting location to our new room. Open up the data folder within the blank_project folder and open up config.js. Locate the line that reads:
and replace it with:
Now return to Flash, Test your Movie, and voila! JaNET is now freely wandering our new room!
While our game is now technically functional, we’ve got a couple of problems to deal with. The first one you may have noticed was this error message in your Output window:
What’s that mean? Well, ALPACA is looking for something that’s not there; in this case, it’s the UseBox, that little two-option window that appears when you click on an interactive item. The UseBox isn’t there because we don’t have any interactive items. So let’s remedy that by making the window a Look-at-able item.
Select the shiny effect we put over the window and convert it to a movieclip called room1Window. Now comes the critical ALPACAfied part: give it the instance name of “window_L.” That underscore-L means that this is a Look-at-able item, and the “window” part will be its name onscreen.
Since it’s Look-at-able, ALPACA expects there to be a line for when the player looks at the window, and all those lines are stored in the speechlines.js file in our data folder. Open that up and place the following right after the line
"look": "Space, the glowy frontier!"
Now test the movie again, and not only should you be error-free, you can look at the window.
If you try to use the window, you’ll get the default “I can’t use that” line:
In order to get around this, you’ll need to put another line in the speechlines file:
"look":"Space, the glowy frontier!",
"use":"I don't think opening the window is a good idea."
Awesome, our room is part of the game! Go ahead and add other things to the background if you want the player to interact with them. Just make sure they’re movie clips with the proper ALAPCA-style instance names, and make sure you create dialog lines in the speechlines file to go along with them. Now we just have one more problem to deal with:
If you click too far to the left, JaNET can wheel right past the edge of the wall. This is a quick fix - we just need to make the back wall into a movie clip, so we can’t click on the floor through it. This won’t be perfect - JaNET can still wheel a little too far toward it and overlap the wall - but it’s better than it was before.
And just like that, we have our first room and our first bit of interactivity. You can go ahead and delete the default room now if you want to keep your library clean*.
Next, in Part 3, we’ll build a second room and link them together, and lay the groundwork for our first puzzle. Stay tuned!
*If you saved your game while running the original blank project, and then deleted the default background, you may get an error called “ReferenceError: Error #1065”, and your save/restore menu will not appear when you click on the icon. This is because ALPACA is trying to create a fake screenshot from a movieclip that no longer exists. In order to get around this problem, open SaveRestore.as in your com/laserdragonuniversity/alpaca folder. Scroll down to line 46 and uncomment the code that clears the save data:
// Un-comment this if you want save data to be cleared each time the SWF is opened
// Probably only necessary for testing purposes
shared = SharedObject.getLocal("alpaca");
Test your movie once, and you should no longer get the error message. Then comment these lines out again. Any time you need to clear your local memory, this will do the trick.