Tag Archives: flash game

Sidescrolling Platformer ~Part 6~ Parallax Scrolling and Multi-Layer Visuals

Welcome to the sixth installment of the AS3 Side Scrolling Platformer tutorial series.

The background scrolls. The player collides with walls, and can jump (and even double jump). Our laws of physics have been established, and the basic mechanics are coded. In other words, we have built a working prototype. In this tutorial, we will step our platformer up a notch by adding in fancier visuals, and even the capability for layers of parallax scrolling, which will give the game the sense of depth which it is lacking.

This is a pretty good tutorial, which will really improve your game if you’ve been following along. When all is said and done, this is what we will accomplish:

(click to activate, and control with the arrow keys)

[gigya src=”http://dl.dropbox.com/u/8935299/AS3GameTuts/Sidescroller/Sidescroller_AS3GameTuts_6_1.swf” quality=”high” width=”640″ height=”480″ ]

Continue reading for a step-by-step guide on making this game

AS3 Health Bar Tutorial (Mini-Lesson)

I’ve received a request to teach how to make a health bar in actionscript 3. Health bars can be found in all sorts of games, so I decided not to confine it to a single tutorial series. Instead, I’ve made this the first of a new section of Mini-Lessons on this site, to cover miscellaneous small game mechanics which can be used in a variety of games.

This tutorial is heavily image-based :-)

Here’s the demo of what we are going to create in this tutorial.

Easy to make. Easy to customize.

[gigya src=”http://dl.dropbox.com/u/8935299/AS3GameTuts/Mini-Lessons/HealthBarTutorial_AS3GameTuts.swf” quality=”high” width=”640″ height=”480″ ]

Pretty cool, huh?

Continue reading →

News! Birthday, domain name, stats, and more!

This is the final month of this site’s first year. That’s right, next month, on March 5, AS3GameTuts is turning 1! (Feel free to wish us a happy birthday!)

Thanks to all of your amazing support over the past year. With little advertising at all, this site has been viewed over ten thousand times since its creation, mostly during the past few months.

Check out the graph of the site views over the past year,with February only 6 days under way.

If you’ve visited this site before, you would have seen the URL listed as as3gametuts.wordpress.com.

But check it out — we now have a brand new domain name: AS3GameTuts.com

You can think of this as marking the graduation out of the “beta” version of the site :-)

The first year has been great, with 3 tutorial series and a couple of extra posts thrown in for fun. But the next year will be much, much greater for AS3 Game Tuts. Stay tuned for even more tutorials, including the conclusion to the platformer, a turn-based RPG, an overhead shooter, an overhead adventure (think classic Legend of Zelda), as well as a plethora of mini lessons, extra tips, and maybe even some guest posts. Stay tuned. (I’ll try to keep to this promise… if I’m falling behind, feel free to give me a gentle reminder.)

The goal of this site is to help you all learn to make the games you’ve dreamed of creating. Hopefully my choice of tutorials which I plan to write accomplishes this, but if there is anything you would like to know, I am completely open to suggestions and requests.

So please, if there is anything you wish for me to write about, or even if you just have a general comment or suggestion about the site, fill out the following form. Thanks!

← Back

Thank you for your response. ✨

Sidescrolling Platformer ~Part 5~ Double Jumping

I know, in Part 4 I promised to cover the fancy visuals and parallax scrolling next, but here’s one more nifty game mechanic I wanted to add in first. (It’s quick.)

Double Jumping! Perhaps the greatest — most unrealistic — most lovable game mechanic ever.

This isn’t necessary for all games, and maybe you don’t want to add double jumping to your platformer game. But if you do want to add it, all that it requires is a bit of logic and a couple of Boolean variables. Plus, it will allow you to design cooler environments because the player will be able to reach more places than before.

This is what it will look like:

(Click on the preview below to activate it, then use the arrow keys to move around. Press the up arrow twice to double jump.)

[gigya src=”http://dl.dropbox.com/u/8935299/AS3GameTuts/Sidescroller/Sidescroller_AS3GameTuts_5_1.swf” quality=”high” width=”550″ height=”400″ ]

Continue reading →

Sidescrolling Platformer ~Part 4~ Gravity and Jumping

In Part 3 we took a simple, scrollable background and added a layer of realistic player interaction by adding collisions and smoother movement. But we didn’t have the time to finish our player interaction by adding gravity and jumping, so that’s what we’ll do in this part. We are also going to add a few small tweaks to earlier game mechanics so that everything runs better.

Get ready for another great tutorial. I put more time into this one than I expected to.

Gravity

Adding gravity is actually really easy. If you have any experience with Physics, you know that gravity causes an acceleration on objects. And an acceleration is nothing more than a change in speed. In an ideal situation on earth, an object’s velocity downwards increases by 9.8 meters per second for every second that it’s falling. So in our game, we will increase the speed of the player by a certain number for every frame that he is falling.

Continue reading →

Sidescrolling Platformer ~Part 3~ The Player

In our last tutorial we programmed the background so that it scrolls when we control it with the arrow keys. But as cool as that is, it isn’t enough. Right now the player is nothing more than a a static object on the side of the stage. What we’re going to do in this tutorial is program the player to interact with the background.

Player Mechanics

What code do we add for the player? That’s a BIG question… the fate of our entire game pretty much depends upon how the player interacts with the environment. In order to stay organized, I’ll outline all the basic concepts the player should follow:

  • Smooth Movement: The player should accelerate smoothly upon pressing the arrow key, and glide to a stop due to friction when the arrow key is released.
  • Collisions: The player should not be able to walk through walls, fall through the ground, or jump through ceilings.
  • Gravity: The player should be pulled downwards unless he is standing on the ground.
  • Jumping: If the player is standing on the ground, he should be able to jump upwards.

Continue reading →

Sidescrolling Platformer ~Part 2~ Scrolling the Background with the Arrow Keys

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.

Keyboard Controls

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:

Continue reading →

Sidescrolling Platformer ~Part 1~ Setup and Planning

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.

Continue reading →

Pong ~Part 6~ Scoring Points

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.

Continue reading →

Pong ~Part 5~ Collisions!

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

Part 2: Programming the Ball

Part 3: The Player’s Paddle

Part 4: The CPU’s Paddle

—

Let’s get started.

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.

Hit Testing

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.

Continue reading →