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) {vartmpY;if(Jumping==true){ //if jumping... JumpSpeed += Gravity;// Apply gravity force tmpY =_y+ JumpSpeed;//Calculate new y position //check if have touched back to the groundif(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 groundJumping=false;//disable jumping since we have returned to ground JumpSpeed -= BounceEnergyLoss;//decrease speed//check if it must stop bouncingif(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 bellowFlash 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}

You can also test this bellowFlash 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 bounceScreenWidth = 550;//Screen width}

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.