After setting up the basic outline of the platformer in Part 1, we will create a scrolling effect for the background in this tutorial which will be controlled by the arrow keys.
One of the most useful things to be able to do with AS3 is to use the keyboard to control the game. It requires a bit of code, but once you learn to do it you will have a very important building block for any game.
Start out by adding the following code to the Actions panel on frame 1 of the timeline:
Welcome to my new tutorial series: how to make a simple art-based sidescrolling platformer game! You guys requested it, so here it is:
(This tutorial will be a bit more advanced, but still very understandable for a beginner or intermediate programmer. If you are completely new to programming check out my quick Getting Started series, and then try out the Pong tutorials for more experience.)
Why make a sidescroller?
Because they are awesome. In terms of how fun a game is, sidescrolling games are pretty much as good as you can get, at least in the 2D game world. This can be seen in the wild popularity of the original Mario, Metroid, Megaman, or Sonic the Hedgehog titles, as well as modern classics like the Fancy Pants Adventures. If you can master the basic mechanics behind a side scrolling game, you will have a versatile game engine from which you can build tons of awesome games.
Without further ado, let’s get into our game.
Welcome back to the AS3 Game Tuts pong tutorial series. So far in this series we’ve created a working pong game complete with a ball and two paddles. In this tutorial we are going to add a scoring system to the game.
This is it. The tutorial you’ve all been waiting for. The tutorial that will bring everything together. The tutorial which will make you cry out in joy– OK, maybe not, I’m getting a little too excited… but seriously this is a good one.
If you haven’t read the whole series yet, I recommend starting at the beginning.
Part 1: Setting up the Project
—
So far, we’ve got the ball to move and bounce off walls. We’ve made the playerPaddle be controllable by the mouse. And we’ve told the cpuPaddle to move up or down depending upon the position of the ball. It’s time to turn this into a “real” game by letting the ball be blocked by the paddles.
The way Flash handles collisions between two objects on the stage is called hit testing. The way it works is that Flash keeps track of invisible bounding boxes around every object on the screen. These bounding boxes are the smallest possible rectangle that your object can fit inside. So for our paddles, the bounding box is exactly the same shape. But for the ball, instead of using the circular 30px by 30px shape we drew, Flash uses a 30px by 30px square.
Welcome to part 4 of the Pong tutorial series. Please make sure you have read Part 1, Part 2, and Part 3.
Step Four: Program the Computer-controlled Paddle
OK, so the last tutorial was pretty short and sweet. So lets waste no time getting into the next step. This step is pretty important because we begin to look at a very important step in game programming: AI (which stands for Artificial Intelligence).
Artificial Intelligence
Any time when the computer itself needs to control something (like an enemy in a game) and perform certain actions depending on certain conditions, we call this AI. Now, our AI is fairly basic. We need the computer’s paddle to move up and down to try to block the ball from getting past. It would be easy to make the cpuPaddle ALWAYS block the ball — all we would do is constantly set the cpuPaddle.y to the ball.y position. But how do we give the computer the intelligence to act like a normal player, sometimes succeeding and other times failing?
(This is part 3 of the Pong tutorial series. Please read Part 1 and Part 2 if you haven’t done so already.)
Step Three: Program the Player-controlled Paddle
We got the ball to move and bounce off of the walls in our last tutorial. Now it’s time to program the player-controlled paddle. What does the playerPaddle need to do?
This will be a pretty simple tutorial section.
When you first start learning to program, there are a bunch of easy mistakes that make you waste time or lose motivation. Here is a list of my Top Ten Tips for new game programmers, which might save you a lot of time and trouble:
Welcome to Part 2 of the Actionscript 3 Flash game tutorial series for Pong!
Make sure you check out Part 1 if you haven’t done that already. And if you are completely new to programming, my Getting Started tutorials are the place for you.
Enough talk, let’s code.
Step Two: Program the basic game loop and the ball
First things first, we need to name each instance of our game pieces — this is what we’ll use to refer to each object in the code. Name the paddle on the left “playerPaddle” (no quotes), the paddle on the right “cpuPaddle”, and the ball can just be named “ball”.
In 1972 Atari pioneered the video game industry with the release of Pong. If you think of classic games, Pong is almost always near the top of the list. So it is fitting that Pong should be at least one of your first flash games you make. In this tutorial, we are going to create a complete Pong game from start to finish.
This is intended for beginners, but if you have never programmed at all before you should check out my Getting Started tutorial first.
This is what we are going to create over the next 6 tutorials:
This is part 2 of 2 of the Getting Started with AS3 series. Click here to view part 1.
The final part of code we are going to look at right now is what I call the “action” code — the code that actually does things. Now, in a game, what we could do with action code includes basically anything you can think of: you can move and animate objects, perform calculations, manipulate variables, call functions, and “trace” out data to your output window, just to name a few.
AS3 Game Tutorials 