In the Align panel, turn on the Align to stage option 1. Then click on the Align horizontal center 2 and Align vertical center 3 buttons. Your circle will now be perfectly centered in relation to the movie clip registration point. This is the little cross in the center of the stage. Remember, you are still working inside the pac-man movie clip. You will now have three identical keyframes on the first layer of the timeline. These three keyframes will be the three main states of the pac-man animation: the little dude with the mouth full open, half-closed and completely closed munch!
Now click anywhere on the stage to unselect the circle. In the Properties panel, set the line thickness to hairline. Choose a color that will be in good contrast with the circle and the stage background, to more easily see what you are working on. This will constrain drawing to 0, 45 and 90 degrees. Just make it a little bit bigger than the circle. Now, do not click anywhere! Otherwise you'll lose the copy you just made. There are now two lines on the stage, although it seems there is only one.
This is because you just used the Paste in place command which puts the copy exactly over the original. If you followed everything exactly as I said up to this point like a good student that you are : , you should have the same situation as on the image above.
And the Selection tool V will still be selected. Start dragging. When you get close to the other line's tip point, a circle will appear, indicating that the line you are dragging will snap into place. YOu can clearly see this on the image sequence below. In the Align panel, click the Align vertical center button see step 7 and then the Align left edge button the first button in the first row.
The lines will now fall nicely in place to suit your needs. Click on the yellow portion between the lines. Hit Delete to erase it. Select the lines and delete them. You just created the wide-open-mouth state of the pac-man.
You'll now create the middle state - the one with the half-open mouth or half-closed? Again, select the Line tool N. In the Rotate field, write 22 and hit Enter to confirm. The line will now be inclined by 22 degrees. Then erase the yellow segment in the middle and the lines after that.
The middle position of the pacman is finished. You won't touch the third keyframe because this is the closed-mouth position and it has to stay that way. That's fine, but something needs to be changed - look how the pac-man appears if you animate it now. Looks like he's in need of a pill badly! I grew up playing games. However, most of my early experiences with video games were limited to arcades, friends' houses, and trying to convince my parents that an Atari was something no family should be without.
One of my favorite early games and sources of inspiration was a simple, random-generated maze titled Diamaze , designed by Steve Herring. Tile-based games have been around for a very long time and can serve as a clever way to build a game environment without consuming too much memory. The main aspect of this technique involves slicing up your game background into reusable square blocks.
Then you place them together tile using code in order to build a map that acts as the data structure for the game. This technique is similar to the concept of using reusable symbols in your Flash movie to save time and space.
This game is constructed using tiles also known as cells , which are square graphics stored as movie clips. These are "tiled" using ActionScript to generate the game environment: a top-down maze. Complete with sound effects and a scoring feature, users are able to use the arrow keys to move the character and collect balloons.
Here are the basic steps of the project:. Write a custom collision-detection script that calculates the position of the main character against the bounds of the tree tiles and the balloons. Keep game score by counting the number of collisions with collectable items and displaying the output in a text field. See how many balloons you can collect.
I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time. Pearson Education, Inc. This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.
To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:. For inquiries and questions, we collect the inquiry or question, together with name, contact details email address, phone number and mailing address and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.
We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes. Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites.
Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey. Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing.
Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.
If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask peachpit. On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. In this maze game, we've determined there are 16, each with an instance name of m1, m2, m3, m4, etc. And don't forget that we have the red circle movie clip with an instance name of winBox you're welcome to hide the stage box layer, it is no longer necessary.
MovieClip this. So let's take a closer look at our level's class. The class defines two public variables, a custom class which is the level1 movie clip from our FLA library and an array. The function 'loadMe' adds the movie clip of our level to game. It then proceeds to add each and every one of those maze pieces to the array.
Finally, it adds an event listener to itself which means it will only loop while this is a child of 'main'. The other public function, 'checkWin' is exactly what it sounds like. It's checking every frame for whether or not the player has won the level. In other words It checks if there has been a collision between the hero of the main class, and the winBox of the level1 movie clip.
If there has been, then remove the looping event. Stop the player from moving using the same thing we did for the collision on borders Trace to my output that the player has won Finally, invoke a function that's located on our parent, and it's called 'levelCompleted' So that's basically the only thing that the level class has to handle.
It sets up the level to work, and it tells us when we've won. Like I said before, you can create level two in much the same way. Give the class for level two it's own 'loadMe' and 'checkWin' functions and you'll be golden. Public Function: Level Completed So in our game, we can start it, we can move around the stage, we're still going through the maze pieces, and we are stopped if we hit the red circle.
Let's make it so that something happens when the red circle is touched. Let's create the function that gets called from the level class. Our 'levelCompleted' function. But the first thing this code does is that it removes your stage listeners for the key up and key down. This takes away all keyboard input from the game. So let's break down what the if statement does what happens if there is another level available :.
Add a button as a child Give that button an event listener so it will do something when it's clicked. Sounds simple enough. Now let's look at the else statement what happens when there are no more levels available :. Trace to my output channel that there are no more levels. So yeah, that's pretty simple too. So when the game is over, it stops you from playing, and displays one of two messages, depending on whether or not you have additional levels.
And regardless of which ever message pops up, both buttons will invoke the same function, 'nextLevel. Since I'll never know what level or message popped up at any given time, I can't just say "removeChild gameOverBtn " because it won't work if it was the if statement that invoked this function previously, and vice versa. However, I know that they'll always be added to the game in the same order, which means all of the levels will be added as a child and will have the same index number.
Well the children 0 through 3 remember, array's start their count at 0, 1, 2, 3, and those are four objects are my borders on the stage. Children 4 through 7 are the pushers on the stage. Object 8 is the graphic shape I used for an outline that's on the stage outline layer. Object 9 is the player I added first on my script. Object 10 is the level that was added through 'loadLevel'. Object 11 is the button that was added from completing the level.
So no matter what, by removing the children that's located at 10 and 11, I will always be removing whatever button and whatever level got added to my game at those index numbers. The next part of the script should be familiar to you. We're essentially restarting the game. Placing our hero at the 20,20 coordinates on our screen, setting those variables, his 'dir', and adding our keyboard event listeners back to the game.
The next part just increases the curLevel variable by 1. So now, everything will read curLevel as a 2 instead of a 1. And then it invokes the loadLevel function. Which, if the game was over, our curLevel was set to 0, and the last line just turned it to 1, so it will be loading level 1 again. If it was level 2, the last line just turned it to level 3, and if those levels existed, the loadLevel function would do something about it.
Let's see what it'd do. Did the hero collide with p1? Is dir set to the string 'up-move'? Run interior code. Get the y coordinate of the child that's at index 10 which we know will always be a level object, but we won't know which level object and add the value of 'moveSpeed' to it and since 'moveSpeed' is set to 5, this means that the level object will move up 5 units Call 'checkMazeCol' Set the mazePos variables to their respective x and y coordinates same plan as what we did with the player when we moved the player Now, this baffled me a while.
When I would include a for-loop for both the maze objects and the borders, for some reason, the pushers would override the collision with the maze objects, so I could walk right through them. It was tracking the maze's position on the stage the same way we track the player's position that made it so both scripts could work together.
The function, 'checkMazeCol' is separate from the actual collision function because we don't know what level is currently on the stage, and the maze pieces are held in the individual class files. So if we added another level, we'd have to alter the maze collision function as well. Does the interior code make more sense to you now? We're telling the player and the level to return back to the old position, which we've been logging every frame that those move variables are set to true.
At this point, you have finished the tutorial and you should have a working little maze game. Hopefully you'll be able to use the knowledge you've learned here for your future projects! Resources Quality Assurance. List of Tutorials Not Made by Tessa but still awesome. Tessa on Stack Exchange. Like Tessa. Did you find one of my tutorials helpful? If so, like my page and spread the word! Connect with Tessa. Do you want to join my network?
Connect with me on LinkedIn! Follow TessaTechArtist. Interested in updates about my projects? Follow me on Twitter! Have questions or want to see a specific tutorial?
If you'd like to request a specific tutorial to be made, please feel free to contact Tessa. Please keep in mind that she makes these tutorials in her free time and that they will never take priority over her work or projects.
Tessa will do her best to respond to every email. All rights reserved. Here's the example of the final game that we'll be working toward: This example above is the finished product for this tutorial only ever having a single level. This particular game's dimensions are pixels wide and pixels tall. It should look something like this: The 'Properties' tab while viewing the main timeline with nothing selected.
You can access those same dialogues through the wrench icon in the properties window. But more importantly, type the name of your main class where it says "Class:". If you click on the pencil icon, it should bring up the script we wrote earlier. If not, then double check the name of your class it should be the same name as the file and where you have your source files point to.
Below is the maze I created using only the blue box and red circle movie clips: Inside the Movie Clip 'level1' of the maze game. The instance name of the movie clip holding the red circle is called "winBox" You can see in the following image that you can assign an instance name in the properties tab if you have the instance selected: The properties tab while viewing the inside of the movie clip 'level1' with the movie clip of a red circle graphic selected.
The name of the movie clip of the entire maze is called 'level1' and it is available for exporting to ActionScript. Once all of these assets are created, it's time to return back to the main time line. Below is a picture of the breakdown of my main timeline and stage: The stage and timeline of the main timeline in the FLA file of the maze game.
Since the stage component boxes are invisible, I have "See Outline" turned on so I can see where they're located. I have 4 of those boxes on my border layer. Their instance names are b1, b2, b3, and b4. I will be using those boxes to detect collision to keep the player from leaving the stage.
I have them covering about 5 pixels from the edges they're the ones outlined in green. When your variables are set it, it's time to start making functions! So for right now, go ahead and make a function like this: main.
You should see the button, the player It's the trace statement we wrote earlier your level's class file. If your level's class is functional, then you're good to continue. This is what the finished constructor function looks like for the maze game: main. Private Function: Key Down There are many ways to write a function that determines what occurs when the user presses a key. So here is the finished function that handles when a button on the keyboard is pressed, or held down: main.
Those case numbers are the appropriate key codes for each key it's what the computer system recognizes the keys as , and I'm only doing two things when the key is pressed. Private Function: Key Up The key up function is very similar to the key down function. Here's what the finished function looks like: main. Here is the final game loop function: main. You might look at this and not understand a thing. That's ok, I'll explain it to you either way.
So what happens if a value is true? Let's inspect the first if statement. Private Function: Check Collision I like having shorter function names, so that's why I named it 'checkCol' instead of 'checkCollision.
First, here's the snippet that checks for our stage borders the ones that will limit the player to the stage : main. So edit your function to do this instead: main. Private Function: Collision Type Here is the finished code for the function that gets invoked every time there's a successful collision: main. I like orange. This is called a parameter, and 'colType' is a word I made up.
It's a variable, actually, and it's a variable that is local can only be used by this function and is mostly undefined. I could have typed colType:String to define it, but it works without it too. There are only two functions to this entire class, 'loadMe' and 'checkWin'.
The reason is because the checkWin function utilizes the code 'MovieClip parent ' to reference the variables in our main class. This also means we need to alter our 'loadLevel' function in the main class like this: main. Finally, it adds an event listener to itself which means it will only loop while this is a child of 'main' The other public function, 'checkWin' is exactly what it sounds like.
Now that you're done with this class, it's time to resume your work with the main class.
0コメント