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:
You can tell I spent A LOT of time drawing him…
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:
Wow! I should be a professional level designer!
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.
AS3 Game Tutorials 
This looks brilliant! I look forward to the next parts!! :D
Thanks, stay tuned for part 2, coming soon!
peace
Nice tutorial.. how about an AI programming ????
Sure, I’d be happy to do an AI tutorial in the future. Perhaps after I go through the basics of this sidescroller we can add intelligent enemies to the game.
Yes!! Dude you have not idea how long I’ve been searching on the internet for a tutorial like this! I’m new (very new) to AS3 and this is exactly what I’ve been looking for. It has everything thing I was pulling my hair out try to figure out. Haha. I’ll be checking back daily for the other parts! And the AI (after all this) would be awesome! Thanks so much in advance!
Awesome, glad to be of assistance! For some reason I hadn’t seen this type of tutorial out there when I was learning flash, so I decided to write my own. Sidescrollers can be built in many levels of complexity — the way I have done it definitely doesn’t have the prettiest code, but it is simple to learn and actually works. I’ve been busy recently but I’ll try to have part 2 up by the end of this week.
You’re the first non-tile based platformer I’ve found xD Can’t wait for your next part. Please tell me the next part will be up soon.
The next part is being published tomorrow :-)
Hi Ben,
I’m aca certified in adobe cs5 flash but of course the certification test didn’t involve any “as” knowledge. I have begun work on a game in as3 and I have been having major issues with ai attacking and my v-cam works but it moves everything I place on the stage. I believe you have a section on the scrolling effect and I plan to check it out, but I was wondering if you were going to go into ai development if you do you can plan on me checking it out.
Thanks, Josh
Hey Josh, I hope my scrolling section helped you out. As far as AI is concerned, I’m only proficient with the basics, so any tutorial I write about it will be limited to relatively simple AI. However, you are the 3rd or 4th person to request such a tutorial, so it might be time for me to write about it. I’ll see how things go :-)
In your World of Adventure it is giving this error after we complete the game:-
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at TheWorldofAdventure_fla::movingPlatforms_8/frame1()
Hi Ben
I am a great fan of yours. Thanks for all the tips I got from your site.
Anand
[…] presents Sidescrolling Platformer ~Part 1~ Setup and Planning posted at AS3 Game Tutorials, saying, “Tutorials to create your very own platformer video […]
Dude, I found you after a day of searching… Im going to follow the rest of your tutorial. Im a starter in flash game development. RPG will be my first target. You saved me from wrinkles.
Awesome — glad to be of assistance!
Some examples aren’t working here either
Thanks again for alerting me. I switched the host location of my flash files, but forgot to update the post with the new embed paths. Everything should be working now.
[…] the RPG or platformer genres. As far as platformers go, there’s some great tutorials on AS3 Game Tutorials on how to make an art-based platformer (as opposed to tile-based). Now that I have Flash that would […]
Hey there, i just have to say your tutorial has helped me a lot in my project, however i wanted to know if you could help me with a formula. You see, i’m talking about the bullet spawn location. In your example the character never leaves the center of the screen relative to the X-Axis so the bullets always spawn from there in relation to the player’s position – scrollY for the Y-Axis positioning. That’s all fine and dandy, but the modifications i made allow my player to move along the X axis and only start moving the background when the layer hits a certain coordinate like for instance, when moving left (backward), the background will only move to suit when player.x = 0, and when moving forward, it will move to suit only when player.x = 320. Basically Mario type X-axis background and player movement.
This however has led me to a problem, since the background coordinates in the MC (visuals, collisions, etc) never move, and the player moves along the main stage instead constantly changing its X-Axis, i was wondering if there was a formula that would allow me to pinpoint the player’s-X axis coordinates in relation to where he is positioned on the background, which will always allow me to spawn bullets from the player himself. Sorry if i typed a lot, i was trying to explain it as clear as i could. Do you have any ideas?
Sorry if i posted it in the wrong section, i swore i was posting in the shooting episode.
Reblogged this on lizaamini and commented:
This ActionScript 3 tutorial website is awesome :D Simple and Easy to understand for kids and new programmers :D
[…] game tutorial to see what I could come up with. I followed a written tutorial. This can be found here. I only followed it so far though because I came to a fault I didn’t know how to correct, I […]
[…] in Flash and I’m not great using actionscript 3 so needed the help, the tutorial can be found here. So i was following the tutorial and i got my character walking and jumping on platforms, also got […]
I have learned a lot form you, Thanks!
But I could not figure out how the “revolutionary platform” is done.
Is it a part of the “back” object? how?
Please help me or tell me where to find articles about this issue.
[…] existing Flash tutorial for our own needs. Taking a platformer game tutorial found at (https://as3gametuts.com/2011/11/11/platformer-1/) as my starting point, I was able to work with the availible code and Symbols to create my own […]
did you got the answer for your error?
nice game
Can a I apply this to make iPhone games? Thanks for this
[…] https://as3gametuts.com/2011/11/11/platformer-1/ […]
Hmm is anyone else experiencing problems with the images on this blog
loading? I’m trying to determine if its a problem on my end or if it’s the
blog. Any feedback would be greatly appreciated.
Add some bad guys.
I went through your whole tutorial for one of my school assessments, this has seriously been a life saver. Thank you so much for sharing your knowledge with all these people including me. It’s so informative, detailed and easy to understand, especially with the source code as well. Just wanted to write about my gratitude. Thank you so much!
Thanks for your feedback! I love hearing stories like this — it motivates me to keep writing new tutorials :-)
sir please help, iam not getting how to detect those collision points which you explaind in green and red dots.. sir please help me out of this .. just tell me how to detect those points in case of my character
your website helped me out so much with figuring out actionscript 3. thank you
[…] Sidescrolling Platformer ~Part 1~ Setup and Planning […]
How would you go about having a frame in front of the game with a start button or something like that?
Since this relies on the fact that Flash continuously loops through that one frame, adding another frame would break the game, would it not?
Sorry, I have no idea what I’m talking about when it comes to AS3. Any help would be appreciated.
hey being scouring the internet for ages trying to find a good tutorial after following youtube tutorials which don’t even bloody work, this is actually gold for me, making a game in my last year of uni but with a twist as to control the game you will be using the muscles in your arms as i am hooking it up with muscle sensors and arduino. Thought it would be something you would be interested to know, thanks very mch for the tutorial, hopefully have my game made by the end of the week. your a legend!! haha
You’re welcome, and good luck with your game!
hey ben… Thanks for the tutorial, by the way may I have the source code of your world of adventure game? I need it for reference to make more advanced platformer game.
I saw this after the end:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at TheWorldofAdventure_fla::movingPlatforms_8/frame90()
OMG!! it’s very delicious for me, thanks brooo ^_^
[…] https://as3gametuts.com/2011/11/11/platformer-1/ […]
iam not getting how to detect those collision points which you explaind in green and red dots.. sir please help me out of this .. just tell me how to detect those points in case of my character