Tutorial: Create a Platform Game in AS2 – Part 7


Written By MrSun at 8:06 am - Saturday, January 03rd, 2009
Categories: Advanced Tutorials, All Tutorials, AS2, Flash, Game Development

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 onEnterFrame() 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 wins, where we create the actions for the goal. Change it to this:

if(this.hitTest(_root.mcMain)){
	//go to the next lvl
	lastScore = _root.mainScore;
	_root.lvlCurrent ++;
	_root.createLvl();
	_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. Do it also again within the resetLvl() function

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

//creating random background particles
//we'll create 1 particle for every block
lvlHolder.bgHolder.createEmptyMovieClip("bg"+i, lvlHolder.bgHolder.getNextHighestDepth());
var bgX:Number = int(Math.random()*lvlColumns*50)-550; //the x value of this shape
var bgY:Number = (row-1)*25; //the y value of this shape
lvlHolder.bgHolder["bg"+i].beginFill(0x222222); //this just determines the shape's color
lvlHolder.bgHolder["bg"+i].moveTo(bgX, bgY); //moves the shape
//creating 4 random points to make a random shape
lvlHolder.bgHolder["bg"+i].lineTo(bgX+int(Math.random()*25), bgY+int(Math.random()*25));
lvlHolder.bgHolder["bg"+i].lineTo(bgX+int(Math.random()*25), bgY+int(Math.random()*25));
lvlHolder.bgHolder["bg"+i].lineTo(bgX+int(Math.random()*25), bgY+int(Math.random()*25));
lvlHolder.bgHolder["bg"+i].lineTo(bgX+int(Math.random()*25), bgY+int(Math.random()*25));
lvlHolder.bgHolder["bg"+i].endFill();//finishes up the shape

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

if(Key.isDown(37) || Key.isDown(65)){ //if the "A" key or Left Arrow Key is Down
	lvlHolder._x += mainSpeed;//then the move the guy left
} else if(Key.isDown(39) || Key.isDown(68)){//if the "D" key or Right Arrow Key is Down
	lvlHolder._x -= mainSpeed; //then move the guy to the right
}

and replace it with this:

if(Key.isDown(37) || Key.isDown(65)){ //if the "A" key or Left Arrow Key is Down
	lvlHolder._x += mainSpeed;//then the move the guy left
	lvlHolder.bgHolder._x -= mainSpeed*.5;
} else if(Key.isDown(39) || Key.isDown(68)){//if the "D" key or Right Arrow Key is Down
	lvlHolder._x -= mainSpeed; //then move the guy to the right
	lvlHolder.bgHolder._x += mainSpeed*.5;
}

This just slows down the movement of the background. Well, that’s basically all that I’m going to do for the finishing touches. Enjoy your new game!

The Final Product

Source .fla File

20 Comments

confused:

… ok yeah for most of the tutorial i got lost….. mostly becuz i couldnt find the area you kept on telling me to change….. it should be alot more organized….. or u could at least tell where all the coding is at the end (copyable) cuz this is ridiculous…. im still trying to find the part im supposed to change for jumping so my char doesnt float in midair… and when i do change it there is like 6 errors…


tom:

love this one!
how can i use a pre designed layout instead an array which sets the position of the elements?
thanks


Raymond:

wonderful tutorial, but it is not completed… you just make the character hit the goal, but after hitting the goal, can u pls add a tutorial about a button come out or something else to tell the player the game is completed?
thanks


helpplease:

good tutorial but how do you get the character to look the way that you wish to move.


MegaVolt:

@helpplease
You can create additional boolean variable for example named ‘isLeft’ and change it depening on the key hit. Then draw the character depending on this variable.


a duck:

@Raymond: after hitting the goal, all u need to do is redirect the timeline to a specific frame or scene which contains the message. then just add a button redirecting the player to the next level. common sense is crucial when coding…


catsup:

Hey I have a few questions.
How would I add an extra angled block with collision detecting involved?
Also how can I change the background to a background I’ve created?
How do I change the size of the Array as I get errors when I do this normally.
And how would I redirect the game to a different frame once the game is completed?
Thanks in advance.


Heath:

@ catsup
Can’t be arsed to actually think of how to solve the other problems, but the redirection to different frame when you’ve completed it, if(this.hitTest(_root.mcMain)){
gotoAndStop(the frame number where you want to go)
}
“this” being the final goal, the blue square.


omg:

i dont get this tutorial at all when i put the 1st code i dont even move wtf help plz


T1mur:

AWESOME!!!
but it laggs like hell when i creat a new lvl^^

stupid arrays :P


T.J.:

U R A GOD
Thanks a lot
I was searching the whole net for so many days 2 find D correct scripts & here it is


zap:

omg, this sucks, i didnt even get the the second bit in making it, a the ver first step, u have t put the code in the frame, but then in frame 2, it dosnt say where to put the code, get a life dude


Michael:

Dude I made this flash and turned it into a mario game


OskarsR:

This is really great tutorial! I’m using this as a guide in making a c++ game.


Fez:

Does anyone know and tutorials where I can make a high score table for this?


julian:

where do i copy all of this?


JDGAMES:

@helpplease if you want the guy to face where you make him go put:
if(Key.isDown(keynum)) {


JDGAMES:

fuck i clicked enter…
anyway:
if(Key.isDown(Key.RIGHT)) {
character._x += speed //stuff like that, then
character._rotation = 270 //if character is default facing down


Gytis:

Hey! Goooooooooood tutorial! But, how can i add sound when i jump? or kill enemy?


«
»