Tutorial: Create a Game Like Winter Bells in AS3


Written By MrSun at 8:01 am - Wednesday, January 07th, 2009
Categories: All Tutorials, AS3, Flash, Game Development, Intermediate Tutorials

Step 1: Basic Character Programming

Welcome, people, and get ready for yet another tutorial! In celebration of the winter season, we’re going to make a game like Winter Bells, in ActionScript 3.0. Let us begin, shall we?

The basic concept of Winter Bells is to get as high as you can by jumping on bells. It’s extremely addictive, and if you haven’t, you should play it now.

First of all, let’s set up our flash file. Keep the default dimensions of the file the same (550×400), but change the background of the stage to black, and make the frame rate 24 fps. This way, it’ll look nicer and smoother. The second thing we’ve got to do is create a character that we’re going to use. I won’t go overboard in detail on mine, so it’s going to be a simple 25×25 white circle. Next, convert it into a MovieClip called “mcMain”. Also, give it an instance name of the same thing, “mcMain”.

Next, set it so that the crosshair is on the center of the circle. You can do this by double clicking on the MovieClip to edit it. Then, change the circle’s coordinates to -12.5, -12.5. This will make it in the exact center of the MovieClip.

Now, let’s add some actions to this character. Create a new layer named “actions” and then add the following code to it:

var mainSpeed:int = 25; //how fast the character move side to side
 
 
addEventListener(Event.ENTER_FRAME, eFrame);
 
function eFrame(e:Event):void{
	//making the character follow the mouse
	if(mouseX > mcMain.x + 25){ //if the mouse is to the right of mcMain
		mcMain.x += mainSpeed;//move mcMain to the right
	} else if (mouseX < mcMain.x - 25){//same thing with the left side
		mcMain.x -= mainSpeed;
	} else {
		mcMain.x = mouseX;//if it's close enough, then make it the same x  value
	}
}

This code will simply make mcMain follow the mouse on it’s x value. That was pretty easy, right? Now, we have to make it so it can jump. First, we have to add some variables to the top of the stage:

var mainJumping = false; //whether or not main is in the air
var jumpSpeed:Number = 0; //how quickly he's jumping at the moment
var jumpSpeedLimit:int = 25; //how quickly he'll be able to jump

Next, add these two functions to the bottom of the stage:

stage.addEventListener(MouseEvent.CLICK, startJump);//if the user clicks
 
function startJump(e:MouseEvent):void{//then run this function
	if(!mainJumping){//main isn't already jumping
		mainJumping = true;//then we can start jumping
		jumpSpeed = jumpSpeedLimit*-1;//change the jumpSpeed so that we can begin jumping
	}
}
 
function mainJump():void{
	if(mainJumping) {//if jumping has been initiated
		if(jumpSpeed < 0){//if the guy is still going up
			jumpSpeed *= 1 - jumpSpeedLimit/120;//decrease jumpSpeed slightly
			if(jumpSpeed > -jumpSpeedLimit*.1){//if jumpSpeed is small enough
				jumpSpeed *= -1;//then begin to go down
			}
		}
		if(jumpSpeed > 0 && jumpSpeed <= jumpSpeedLimit){//if main is going down
			jumpSpeed *= 1 + jumpSpeedLimit/120;//incrase the falling speed
		}
		mcMain.y += jumpSpeed;//finally, apply jumpSpeed to mcMain
		//if main hits the floor, then stop jumping
		if(mcMain.y >= 387.5){
			mainJumping = false;
			mcMain.y = 387.5;
		}
	}
	if(mcMain.y > 387.5){
		mcMain.y = 387.5;
	}
}

I’ve tried to comment the code as best as I can. Hopefully, you can decipher this code. There is one final thing to do in order to make this code to work, however. In the eFrame() function, run the mainJump() function. Now, if you test the game, you’re character should be able to jump!!!

Well, this wraps up this part of the tutorial! Next, we’ll create “bells” to be added to the stage!

The Final Product

Source .fla File

9 Comments

Casey:

I love the tutorial, great layout… however, i need help on “[running] the mainJump() function”.


bob:

this is a great tutorial but i can not find a place to download action script 3


Trsto:

oy mate , great tutorial ( so far ) :]

you should just update the first [code] ( e.frame ) and add that mainJump(); there... i know its commented at the bottom, but its little confusing ...
also:
(can you comment why that function must be placed there :s ? )
please ?

thanks m8 !


Trsto:

ow right , cause it has to be initiated … stupid question … nvrmind


conor:

Hey, what do u mean by ‘In the eFrame() function, run the mainJump() function.’
please help i cant get mine to jump!!!


Rian:

sorry,guys…I am still unfamiliar with action scripts..
Just wanna ask about the //mainJump();// thing…
where should I put it? how will the code become?

Thanks beforehand!! :D


David:

I really like the winterbells game so I hope that I will be able to finish this with some nice touches :)

Anyways I found a nice way to make he walk faster if the mouse is farther away
if (mouseX > mcMain.x) {
mcMain.x += (mouseX-mcMain.x)/10;
}
else if (mouseX < mcMain.x) {
mcMain.x -= (mcMain.x-mouseX)/10;
}

Thanks for another great tutorial!


Aku:

Didnt work
I downloaded the souce aswell but it said extra } twice
then it said missing bracket then It didnt have errors but it still didnt work


martin:

There are still allot of errors in hit

the hit detection is in the bell class. So if the game is over all those bell eventlisteners are still running.

best thing to do is. When you put a bell on the screen push it in an array aswell and do an hitdetection in that arra on the time liney, so you can remove that peticular eventlistener


«
»