Tutorial: Create a Game Like Winter Bells in AS2
Categories: Flash
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 2.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:Number = 25; //how fast the character will go
_root.onEnterFrame = function(){
//making the character follow the mouse
if(_root._xmouse > mcMain._x + 25){ //if the mouse is to the right of mcMain
mcMain._x += mainSpeed;//move mcMain to the right
} else if (_root._xmouse < mcMain._x - 25){//same thing with the left side
mcMain._x -= mainSpeed;
} else {
mcMain._x = _xmouse;//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. In order to do this, create a MovieClip the same size (550x400) and color (black) as the background with an instance name of mcBg. We'll use this so that if clicked, the user will 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:Number = 25; //how quickly he'll be able to jump
Next, add these two functions to the bottom of the stage:
mcBg.onRelease = function(){//if the user clicks
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 >= Stage.height - mcMain._height && totalHeight <= 0){
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 main onEnterFrame() 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!
ur a little jerk i wanted to know the whole code
February 23rd, 2009 at 11:14 am
There are 5 parts to the tutorial with source files for each. Just look at those for the code.
February 23rd, 2009 at 11:17 am
thank you so much for the tutorial – all five of them! i found them easy to follow and very helpful, well organized, and creative! =)
March 5th, 2009 at 10:27 am
i dont understand, top and bottom of the stage???
where do i need to put the last 2 codes???
March 7th, 2009 at 1:07 am
I hope you are making a lot of money for all these great tutorials! They are wonderful, easy and GREAT!
March 22nd, 2009 at 10:09 pm
The code for mcBg doesnt work. It comes up with:
Statement must appear within on/onClipEvent handler
June 15th, 2009 at 3:37 pm
And
Statement must appear within on/onClipEvent handler
June 15th, 2009 at 3:38 pm
Why can’t i download the source file :/?
November 29th, 2009 at 12:24 pm
So, i did almost all of it but am still struggling with this part:
“In the main onEnterFrame() function, run the mainJump() function. ”
Help?
January 14th, 2010 at 8:35 am
Gr8! But im still waiting for part 2 🙁
January 16th, 2010 at 9:56 am
i don’t get on the part when it says, we have to make it so it can jump. In order to do this, create a MovieClip the same size (550×400) and color (black) as the background with an instance name of mcBg. how do you make a new movie clip.
March 7th, 2010 at 1:46 am
The source files for all your tutorials do not download. They come up with errors… can you fix please?
June 3rd, 2010 at 1:48 pm