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.

Planning it out

Like any flash game, proper planning is key to a successful game.

What will our game look like? We don’t need to know the exact details at this moment, but take a look at a simple project I made more than 2 years ago for a basic example of what we can accomplish: The World of Adventure.

It may look complicated, but to tell you the truth I created this game entirely by myself during the first month I started programming.

Our game will be fairly similar, except with much better gameplay because I back when I made the original I was still struggling with the basics of Flash. We will make a few changes, optimizations, and add-ons to the game to really make it shine!

DISCLAIMER: I am not teaching the most efficient, technically-accurate, professional way to make a platformer. Rather, I am going to show you how to make a game that is easy to understand, achieves quick results, and will teach you many concepts which are vital to understand if you wish to create a more complicated game.

The Theory

OK, so here is the basic theory behind the game code:

The entire background and platforms are contained in a single object. The player controls the actions and animations of the character with the arrow keys, but instead of moving the player around this actually moves the background around in the opposite direction. We will create some basic gravity, collisions, friction, etc., which will make the player act fairly realistically. Then we can create individual objects in the environment that the player can interact with. These could be enemies, collectible objects, water, quest-giving NPCs… really anything you can think of.

Setting Up

Unlike the first Pong tutorial, a sidescrolling game has too many game objects for us to set everything up in a single section… here’s a peek at my final project for World of Adventure…

…but we can at least start with the basics.

Create a new Project, go over to the Properties panel, hit “Edit…”, and set your dimensions to 640×480, your color to White, and your FPS to 30.

The Player

It doesn’t really matter if your graphics match up with mine, as long as they have similar dimensions and you can animate your own graphics when necessary. Otherwise just grab my source code at the end of each tutorial and you can copy-and-paste mine into your game.

Here is my dashing hero:

Which I then converted into a Movie Clip named “Player” with its registration set to the bottom-center position.

My player is 52 px wide by 120 px tall, but it doesn’t matter at this point.

The Background

I will start with a similar level of detail in the background. Just a black and white outline of the ground, some walls, and a couple platforms. Right now I will make mine about twice the width and height of the stage, just so we can use it for sidescrolling later (If you zoom out from the stage you can draw HUGE objects)

Here it is:

When you convert the background to a Movie Clip, use the upper left registration, and make sure you don’t also have the player selected or he will become a permanent feature of your environment….

If you run the game you will see that only the part of the background drawn over the white, rectangular stage will be visible. The rest of it will only show up if we use code to scroll the background.

I know we haven’t gotten into the good stuff yet, but as always feel free to grab a copy of the project on your way out.

If you have any ideas for the sidescroller game, just leave me a comment.

Check out Part 2 of the tutorial to program the scrolling background.