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 } }
discuss this topic to forum