Tutorial: Create a Platform Game in AS3 – Part 7


Written By MrSun at 8:06 am - Saturday, August 30th, 2008
Categories: Flash

Step 7: Finishing Touches

As I’ve done with most of my previous tutorials, this “Finishing Touches” part of the tutorial will mostly be me telling you what to do, but not how to do it. Of course, if it’s new or advanced material, I’ll definitely give you the code. Let’s get started, shall we?

The first thing we need to do to our game is show the score to the user. Just create a dynamic text field somewhere at the top of the stage and make some code that will update it with the text “Score: 0”. Of course, the 0 would be replaced with whatever the guy’s score is. I suggest placing it somewhere in the moveChar() function so that you don’t have to create a totally new function for it.

The next thing I want to do is reset the score whenever the player dies. This actually will be a little bit tricky because we use the same resetLvl() function both when the player loses and when the player beats a level. This can be accomplished pretty easily. First of all, just set the score to 0 at the end of the resetLvl() function. Now, find the code where we reset the level when the player won. It should be at around line 30 in the “Goal.as” file. Change it to this:

//advancing a level
_root.lvlCurrent ++;
var lastScore:int = _root.mainScore;
_root.resetLvl();
_root.mainScore = lastScore;

This just saves the score that we have before advancing a level and then re-applies that score after it’s reset. Pretty cool, eh?

Next, we’re going to add a background to the game. The background will be a bit darker so we can distinguish it from the game, and it’ll also move slower than the game background to create an illusion that it’s farther away. The first thing we have to do is create another holder for the particles within the level holder. Do it just like how we did it for the bumpers and trampolines. It should be called bgHolder and you should place it before all of the other elements so it’s under everything

Next, add this code to the end of the createLvl() function:

//creating random background particles
//we'll create 1 particle for every block
var newPart:Shape = new Shape();
newPart.graphics.beginFill(0x222222);
newPart.graphics.drawRect(0,0,int(Math.random()*10)+1,int(Math.random()*10)+1);
newPart.x = int(Math.random()*lvlColumns*50)-550;
newPart.y = (row-1)*25;
bgHolder.addChild(newPart);

Next, we have to make them move slower than the game background. You can do this in the moveChar function. Find this code:

//if certain keys are down then move the character
if(leftKeyDown){
	lvlHolder.x += mainSpeed;
}
if(rightKeyDown){
	lvlHolder.x -= mainSpeed;
}

and replace it with this:

//if certain keys are down then move the character
if(leftKeyDown){
	lvlHolder.x += mainSpeed;
	bgHolder.x -= mainSpeed*.5;
}
if(rightKeyDown){
	lvlHolder.x -= mainSpeed;
	bgHolder.x += mainSpeed*.5;
}

The final thing we need to do for the background is to reset it’s x value whenever the level is reset. Just set it to x either in the createLvl() function or resetLvl() function, whichever works best for you. I’m going to do mine it the createLvl() function.

Well, that’s basically all that I’m going to do for the finishing touches. Enjoy your new game!

The Final Product

Source Files (zipped)

38 Comments

hector:

where do i get as3 for free


Jason:

This is probably the best AS3 game programming tutorial out there. Certainly the best I’ve seen.


Mr Sun:

@hector:

By as3 I think you mean Flash? Flash is the program that lets you develop games in AS3. You can’t get it for free, but there is a free trial available at http://www.adobe.com

@Jason:

Thanks 🙂


Hectichermit:

I sorta found a glitch in your Demo basically if i press left or right then right click you ball just keeps goin in that direction until you refresh it. Good tutorial


Anthony:

Hi, This tutorial is really thorough. I was wondering if you were planning on adding parts that would help to input art. IE: Appropriate Character Animations playing when I run left or right, perhaps projectiles? I guess I’m looking for calling up the right movie clips, etc. I’m new to AS. Bleh!

If anybody knows of anything leave a coment and I’d really appreciate it!

Thanks!


Cichon:

Mr. Sun,
You rock! Cool website, great tutorials. Thank you.


bob:

I really appreciate it and it helped me a lot…very nice tutorials. Would like to know if you’re planning to push it farther up to saving high scores, high scores with user names. Crossing platforms from as3 to sql database, so the users can compete. Would like to ask though about scrolling backgrounds for this game. Thanks!


bob:

Would also like to know if you have a similar tutorial for Actionscript2 for flash 8. Thanks!


Bryan:

Super Tutorials!!
Maybe you could make a tutorial about animation?
For example:
if you walk to left you see legs moving 🙂

would be cool. 🙂


zhr07:

nice work


alok sonu:

nice tutorial for the game. Very thankful to you, as it is rare to find on net such a good help.


Torre:

how can i make my own enemy or my own wall? or own trampoline??? etc.???
can anybody help me?


Onions:

thanks this tutorial is great! i cant wait to make my own game with this coding and i love how it has scrolling terrain!!!!!!!


onions:

wait what as3?!! plz tell me its flash 8 or that i can make a game with this tutorial on flash 8 plz someone answer my question!!!!!!!plz


Why Me?:

Onions-

I don’t believe you can program in AS3 with Flash 8, I think you need Flash CS3 or CS4.


keir:

Hey – excellent tutorial. You need Flash CS3 or CS4 to do this, Flash 8 doesn’t come with the req ActionScript 3 code.

To the people asking about animating things, etc…. this tutorial is pretty advanced stuff, I mean it’s programming a game already. If you’re trying to do this, but don’t know how to animate in Flash, you should be starting waaay earlier on the tutorial circuit. There’s a ton out there – learn to animate, then learn basic AS3 coding… then come back to this excellent tutorial.


???walls???:

how do you make walls… i go right throw them!


tom:

hey

nice game! is there a version fpr flash 8 available? that would be awesome!

thanks


Eddie:

I dont know if there is a version for flash 8 (as2) but u can use other tutorials such as http://www.kirupa.com/developer/mx2004/platform_game.htm which I used, Works pretty good


Duran:

Hi,
Your tutorials are just amazing. This is the best AS3 game programming info I’ve ever seen.

I would like to ask for a tutorial for a Pacman game. If you can produce such tutorial I would be most grateful. Thanks.


Jimmy:

Great tutorial which has taught me alot! just wondering, would it be possible to make the ball rotate as the user goes left and right, for example the game Rolando does a similar thing. Thanks,


genius:

Are you going to make an extention to the tutorial, that teaches how to make moving platforms and doors, and walls?


julian:

you can’t get AS3 for free,
its apart of ‘adobe flash CS3 pro’


Yewhral:

It’s a good tutorial but I think levels could be done in an easier way.


Acheronz:

Great Tutorial!! Thanks for writing and sharing it!!!

Using the source.zip file I am getting the error copied below when testing the game (does not prevent the game from working, but makes it a bit slower). NOTE: This error ONLY occurs when you have died at least once and get the coins again.

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Coin/eFrame()

Why is this? My best guess is that the resetLvl() function needs something else, (can we reset/are we reseting the coin and enemy classes?) but I can’t figure how out how to do it properly…
Can anyone share how to work around this issue?


Anonymous:

ive been looking for a tutorial like this for awhile now. great work, thank you for taking the time to put this together.


Eddie from FGA:

Great tutorials here. I’m sick of running into limitations with as2. Keep it up!


bee-k:

These are great great tutorials, though i am not advanced enough to handle at this time i have done the code and got certin things to work. once i get better at flash period this will take me a long way i thank you for not keeping this a hidden skill and sharing it with others your badd ass.I want to learn AS not just copy it but learn what everything means in AS so that i can better program later on down the road.Badd ass!!


Gingifruden:

Hello i’m here to say a real thank you for this tutoriel.

It’s really well done.

Never the less i’ve a but. It’s seem that the ladder have some bug when they are biggger than four block. I can’t find why.

Do you have the same problem? Do you find a way to fix it.

I’m really gratefull for your work and i’m sorry for my english. (i’m not english, that’s a lame excuse never the less).


Terapi:

well, u technicly can get flash cs3 for free, but its illegal 😛


Mike:

With no coding experience I had to learn Actionscript and code a full game in about 4 weeks. Without this site as a starting point it would have never happened.

Fantastic site, thanks alot!


Flash Newbie:

Terrific! The best and most wonderful ActionScript 3 tutorial I’ve ever seen! Helpful in learning AS3! Good job, Mr Sun! May you continue to shine here!


Flasher:

Hi, could anyone tell me how do I disable the “Forward” and “Backward” when right-clicking? This is really a serious Glitch in all the games I made with more than 1 frame.


Hannah:

Hi! Great tutorial!
I get this error (from the source files) when the level resets:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Coin/eFrame()

Do you know how to get rid of that?


mike:

thanks for the tut 😉 hope to see more like this!!


Fonz:

I wanted to know. Is there a possibility to arrange the score in front of the background? I noticed the small blocks are in front of the score instead of vice versa.


anonymous:

i glitched through the floor =.=


One:

This is a nice tutorial. But,I recommended you to program the script in OOP. You should create several classes that handle every object and function. For example class Hero, enemy, level, and gameItSelf. But, Thanx so much for the tutorial..


«
»