We see you're using Internet Explorer. Try Firefox, you'll like it better. · FireFox is easy to use,
practical and with a lot of helpful extensions. · It's more stable,
secure and fast. · It looks better
and has many themes to customize it as you wish.
Click the button on the right to download Firefox. It's free.
Tutorial Topic : Adding jumping, gravity, bouncing and screen boundaries to the game
1. Introduction
Welcome to the second part of the Basic Game Development tutorial series. This tutorials will explain the basic principles about game development using Adobe Flash 8.
In this tutorial i will continue working from the previous tutorial with our ball as a character , controlled by the player. I will show you how to make the ball jump , with a realistic gravity feel , a bounce when hit the ground and limiting the player within the screen.
Now , i will create the character and do what i want to show you and then add the code from the previous part just to keep thinks more clear and easy.
1 ) Create the new project, 2 ) Draw the ball, 3 ) Convert it to a Symbol with instance 'ball'
And you should end up with something like this
1.1 Writing the jump handling code
onClipEvent (load) { GroundY = _y;//so we know where to end the jump Jumping = false;//is player jumping? JumpPower = 30; //Initial power of the jump, the more the higher it goes JumpSpeed = 0; //jump direction , =0 is Still , >0 is going Down , <0 is going Up Gravity = 3.5; //This is the force of the gravity pulling it down }
onClipEvent (enterFrame) { var tmpY; if(Jumping==true){ //if jumping... JumpSpeed += Gravity; // Apply gravity force tmpY = _y + JumpSpeed;//Calculate new y position //check if have touched back to the ground if(tmpY >= GroundY){ //Player is back to ground tmpY = GroundY; //set player to the ground Jumping=false;//disable jumping since we have returned to ground } _y = tmpY;//Set the new players position
}else{ //if not jumping.. if(Key.isDown(Key.SPACE)){ //if Space is press JumpSpeed = -JumpPower; //Initialise speed ( negative because we are going up ) Jumping=true;//Activate jumping } } }
I comment every line of the code i don't think any further explanations are necessary. You can test the flash bellow or download the source and see it.
Flash Demonstration ( Press the Space bar to make ball jump ) Download Source of this flash ( final version source at the end of page )
2. Adding the bouncing
Now all we need to do it to is add a little code to make the ball bounce back instead sticking to the ground.. What you need to remember is that the ball will bounce and it will loose some energy so it will not reach the same height as before.. until it comes to rest on the ground
I will write the new code and the changes/additions will be bold and colored while the removed parts will be strikethrough and everything that has not changed will be gray colored
onClipEvent (load) { GroundY = _y;//so we know where to end the jump Jumping = false;//is player jumping? JumpPower = 30; //Initial power of the jump, the more the higher it goes JumpSpeed = 0; //jump direction , =0 is Still , >0 is going Down , <0 is going Up Gravity = 3.5; //This is the force of the gravity pulling it down BounceEnergyLoss= 5; //Energy lost during bouncing MinimunBounceSpeed = 1; //If the speed to bounce back is less than this then don't bounce }
onClipEvent (enterFrame) { var tmpY; if(Jumping==true){ //if jumping... JumpSpeed += Gravity; // Apply gravity force tmpY = _y + JumpSpeed;//Calculate new y position //check if have touched back to the ground if(tmpY >= GroundY){ //Player is back to ground tmpY = GroundY; //set player to the ground Jumping=false;//disable jumping since we have returned to ground JumpSpeed -= BounceEnergyLoss; //decrease speed //check if it must stop bouncing if(JumpSpeed < MinimunBounceSpeed){ //stop bounce Jumping=false; } JumpSpeed = -JumpSpeed; //change direction ( to bounce up again ) } _y = tmpY;//Set the new players position
}else{ //if not jumping.. if(Key.isDown(Key.SPACE)){ //if Space is press JumpSpeed = -JumpPower; //Initialise speed ( negative because we are going up ) Jumping=true;//Activate jumping } } }
You can also test this bellow
Flash Demonstration ( Press the Space bar to make ball jump ) Download Source of this flash ( final version source at the end of page )
2. Adding the Moving ( Left/Right) and the Screen Boundaries
2.1 Adding the Left/Right moving code
I will just copy and paste the code from the part one, nothing special here
I will write the new code and the changes/additions will be bold and colored while the removed parts will be strikethrough and everything that has not changed will be gray colored
onClipEvent (load) { GroundY = _y;//so we know where to end the jump Jumping = false;//is player jumping? JumpPower = 30; //Initial power of the jump, the more the higher it goes JumpSpeed = 0; //jump direction , =0 is Still , >0 is going Down , <0 is going Up Gravity = 3.5; //This is the force of the gravity pulling it down BounceEnergyLoss = 7; //Energy lost during bouncing MinimunBounceSpeed = 1; //If the speed to bounce back is less than this then don't bounce }
onClipEvent (enterFrame) { var tmpY; if(Jumping==true){ //if jumping... JumpSpeed += Gravity; // Apply gravity force tmpY = _y + JumpSpeed;//Calculate new y position //check if have touched back to the ground if(tmpY >= GroundY){ //Player is back to ground tmpY = GroundY; //set player to the ground JumpSpeed -= BounceEnergyLoss; //decrease speed //check if it must stop bouncing if (JumpSpeed < MinimunBounceSpeed){ //stop bounce Jumping=false; } JumpSpeed = -JumpSpeed; //change direction ( to bounce up again ) } _y = tmpY;//Set the new players position
}else{ //if not jumping.. if(Key.isDown(Key.SPACE)){ //if Space is press JumpSpeed = -JumpPower; //Initialise speed ( negative because we are going up ) Jumping=true;//Activate jumping } }
//Moving code if(Key.isDown(Key.LEFT)){ _x-=5; } if (Key.isDown(Key.RIGHT)){ _x+=5; } }
You can also test this bellow
Flash Demonstration ( Press the Space bar to make ball jump and Left/Right Keys to Move ) Download Source of this flash ( final version source at the end of page )
2.2 Adding the Screen Limits
Now to add the screen limits we just need to add a little code with some if statements and that's it
I will write the new code and the changes/additions will be bold and colored while the removed parts will be strikethrough and everything that has not changed will be gray colored
onClipEvent (load) { GroundY = _y;//so we know where to end the jump Jumping = false;//is player jumping? JumpPower = 30; //Initial power of the jump, the more the higher it goes JumpSpeed = 0; //jump direction , =0 is Still , >0 is going Down , <0 is going Up Gravity = 3.5; //This is the force of the gravity pulling it down BounceEnergyLoss = 7; //Energy lost during bouncing MinimunBounceSpeed = 1; //If the speed to bounce back is less than this then don't bounce ScreenWidth = 550;//Screen width }
onClipEvent (enterFrame) { var tmpY; if(Jumping==true){ //if jumping... JumpSpeed += Gravity; // Apply gravity force tmpY = _y + JumpSpeed;//Calculate new y position //check if have touched back to the ground if(tmpY >= GroundY){ //Player is back to ground tmpY = GroundY; //set player to the ground JumpSpeed -= BounceEnergyLoss; //decrease speed //check if it must stop bouncing if (JumpSpeed < MinimunBounceSpeed){ //stop bounce Jumping=false; } JumpSpeed = -JumpSpeed; //change direction ( to bounce up again ) } _y = tmpY;//Set the new players position
}else{ //if not jumping.. if(Key.isDown(Key.SPACE)){ //if Space is press JumpSpeed = -JumpPower; //Initialise speed ( negative because we are going up ) Jumping=true;//Activate jumping } }
Thank you for reading it and please excuse my English
For any problems or question please don't hesitate to post them in our forums and i ( or anyone else who can answer them ) will reply as soon as possible
Keywords : flash , tutorial , flash tutorial , online tutorial , Actionscript , game , game development , game tutorial , flash game tutorial
Comments
VirusFree - 4/18/2007 7:25:44 AM
Post here any comments about the tutorial
jnarcum - 5/28/2007 2:04:40 AM
Does this jumping actionscript have a copyright, or can it be used in things for commercial purposes?
VirusFree - 5/28/2007 8:29:02 PM
use it as you wish.. no copyrights
although giving credits to the one who wrote is always good programming ethics.. your choice
Qazt - 6/17/2007 8:16:36 PM
Do you know a code for a good hit-test so i can make a side scrolling game which would be a bike going over different heights and slopes, or a way of doing so? if tried like atleast 10 different ways an none work properly.... i would find a good one, but would not support slopes and therefore you go through or a glitch happens!
VirusFree - 6/17/2007 8:47:28 PM
the collision detection you want, with slopes and stuff is pretty advanced stuff. if you wanted box collision or circle collision then that would be easy. i don't know how you could do slope collision detection flash, in other languages i would use perfect pixel collision detection but it don't think that would work for flash ( too slow for that )
try searching google.. i am sure you will find something useful ( post it here if you find what you are looking for, others may have the same problem )
Qazt - 6/17/2007 8:55:10 PM
ok, i was thinking there would be a simpleer way, mabye making a bigger cyrcle and using the middle pixel to do hhit test with, but this would be clear cirlce so u couldent see.... the best hittest i had so far made it look like it was going up stairs!
Qazt - 6/17/2007 8:58:05 PM
if it is to advanced what program do people use to make this type of game? like wone, or something, there has to be a way to do it!
VirusFree - 6/18/2007 9:52:15 AM
well.. i was right after all.. they do use pixel perfect collision detection
i googled for your problem and found a site where the guy made a collision detection class, that takes the 2 clips , blends them using the difference blend, and check for and pixel with a special color
which in other words this is what pixel perfect collision is
of course because the player handles the blending and the heavy stuff the thing is fast enough.
Thanks im gona check it out now, but i still wana know what program people use to make games like that!
mockster - 6/20/2007 6:11:38 PM
How would make stickman movements instead of ball I have animated some good movies but im confused about how to make my stickman run and move
mockster - 6/20/2007 6:25:02 PM
and what I mean is like when he jumps how would I add my animation jumping
Silinter - 6/21/2007 3:29:34 PM
Let's say I make a stickman animation, and i know how to animate it, and make it move (with the code above or with other codes) and i wanted to make the stickman turn the side he wants to move to, when you press either the left or right buttons, and when hes done his animation, and got to where he wants to go, he turns back. Now i know how to animate him to turn and make him walk, but i can't figure out how to make him turn back when he's done. Can you help me witht his?
VirusFree - 6/21/2007 10:59:48 PM
well that's what i will explain in part 3,
but as a tip to make a clip look like it's mirrored then try setting the x scale to a value lower than zero
let's say your clip is width = 100 , if you set it from the code to be clipname._xscale = -100; then it will flip horizontally
i hope that answers your question
pynaple - 9/12/2007 12:25:22 AM
Are you also going to be explaining how to do things like make platforms we can jump onto and stuff?
Somthing I'm having a different problem with is vocabulary. I didn't have any trouble with the tutorials (thanks, by the way, they were great), but I can never figure out what to call things in Flash. I'm looking for the name of self controlled enteties that do their own thing within certain perameters, like go left until it reaches the edge, then travels right. I think somthing close might be "bots", but I'm getting no where with that. Are you going to do a tutorial on somthing like that, like enemies in a game?
Post Comment You need to be a registered user to post a comment
Your Comment :
Your post may only contain the [url],[img] [quote] tags and smiles.
