Lets start the second part of the how to make a flash game tutorial. In this article I will continue working from previous tutorial with our ball character, controlled by the player. I will show you how to make the ball jump, with a real gravity behavior, bounce when hit the ground and limiting the player's ball within the screen.
Making a jumping ball. Creating the ball character
First we have to make the character, please refer to the previous tutorial where these steps are explained in details.
- Create the new project,
- Draw the ball circled character,
- Convert it to a Symbol with our instance 'ball'.
You should have something like this
Writing the script for jump handling
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 commented every line of the code so I don't think any further explanations are necessary.
You can test the flash on movie bellow or download the source code.
Flash Demo (click on the ball and press the space key to make ball jump)
Adding the bouncing behavior
Now we should add a little script to make a ball bounce back instead of sticking on the ground. You should remember that ball when bounce it will loose some energy so it will not reach the same height as before.. until it comes to rest on the ground. Here is a new code added in bold and 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 Demo (click on the ball and press the space key to make ball jump)
Adding the Left/Right Moving and Screen Boundaries
Adding the Left/Right moving script
I will just copy and paste the code from the first part, nothing new here. New code and the changes/additions will be bold and colored while the removed parts will be strikethrough.
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 Demo (click on the ball and press the space key to make ball jump)
Adding the Screen Limits
Now to add the screen limits we need to add a little script with some statements
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
}
}
//Moving code
if (Key.isDown(Key.LEFT)){
if((_x-5) > (_width/2)) {
_x-=5;
}
}
if (Key.isDown(Key.RIGHT)){
if((_x+5) < ScreenWidth-(_width/2)) {
_x+=5;
}
}
} |
|
You can also test this bellow |
Flash Demo (click on the ball and press the space key to make ball jump)
So, in this tutorial you learned the basic fundamentals of how to make a flash game. You are now familiar with designing of characters, programming its behavior, responding to different keyboard events.
Resources used:
http://www.tutorialized.com/
What is flash player?
How to make a flash game? Part 1
Download Final Source Code File ( .fla )
This blog is a big help on us and because of all the information we learned a lots of thing on how we can make a flash game. I am very thankful for sharing you this info with us.
ReplyDeleteLia | Flash Developer Philippines