Tuesday, September 27, 2011

How to make a flash game? Part 2



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 )

1 comment:

  1. 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.

    Lia | Flash Developer Philippines

    ReplyDelete