Tutorial: Create a Game Like Winter Bells in AS2 – Part 2
Categories: Flash
Step 2: Programming the “Bells”
Let’s get right to it. In this part of the tutorial, we’re going to add the “bells” to the stage. They’ll be 100% randomized so we can continue playing the game forever (You’d like that, wouldn’t you?). Anyway, we first have to create a new MovieClip to symbolize the bell. Because I ain’t the greatest artist, mine is going to be a 25×25 square. When you convert it into a MovieClip called mcBell, also Export it for ActionScript, so we can add it to the stage through ActionScript.
Do the same thing we did with mcMain and set it to be the precise center of the MovieClip.
Now, we can add some intense actions. Are you ready? Let’s first define some variables at the top of the stage:
var bellTime:Number = 0;//how many frames have elapsed since the last bell was made
var bellLimit:Number = 20;//how many frames it takes to create a new bell
var bellTop:Number = -50;//the y coordinate that it'll have when we add it to stage
var bellTotal:Number = 0;//how many bells have already been added to stage
I’ve explained in detail which variable does what. Now, add this function to the bottom of the code:
_root.createEmptyMovieClip('bellHolder', _root.getNextHighestDepth());//create a MovieClip that will hold all of the bells
function makeLvl():Void{
bellTime ++;//increment the time
if(bellTime >= bellLimit){//if the time for bell creation has been reached
bellTotal ++;//increase the amount of bells created
bellHolder.attachMovie('mcBell', 'bell'+bellTotal,bellHolder.getNextHighestDepth());//add a bell to the bellHolder
if(bellTotal == 1){//if it's the first bell created
bellHolder['bell'+bellTotal]._x = Math.random()*525;//place it in a random spot on the stage
} else {//otherwise,
//In order to keep the next bell from being too far away from the previous bell, place it up to 250px away
bellHolder['bell'+bellTotal]._x = bellHolder['bell'+(bellTotal-1)]._x + (Math.random()*500)-250;
if(bellHolder['bell'+bellTotal]._x > 525){//if it is off the stage to the right
bellHolder['bell'+bellTotal]._x -= 250;//set it inside the stage
} else if (bellHolder['bell'+bellTotal]._x < 0){//same with too far left
bellHolder['bell'+bellTotal]._x += 250;
}
}
bellHolder['bell'+bellTotal]._y = bellTop;//set the y's value off the stage
bellHolder['bell'+bellTotal].onEnterFrame = function(){//set some functions for this bugger
this._y += 3;//move the bell slowly downwards
if(this.hitTest(mcMain)){//if this touches the main character
_root.mainJumping = true;//make him jump
jumpSpeed = jumpSpeedLimit*-1;//reset the jumpSpeed
this.removeMovieClip();//and finally remove him from the stage
}
}
bellTime = 0;//reset the time for another creation
}
}
That's some pretty intense code, eh? In order to make it function right, we have to run it in the main onEnterFrame() function. Now, it should be functioning (no pun intended) pretty well. Now, if you've ever played Winter Bells, you should know that the greatest point booster of the game is the bird that doubles the score. We're going to create one of those in our game as well.
First of all, let's create a "bird" MovieClip, eh? Mine is simply going to be a sideways triangle pointing right that is 25px wide and 12.5px high. I guess those are pretty good dimensions. Next, convert it into a MovieClip and Export it for ActionScript as mcBird.
Now, let's add some actions to this birdy. Add this code to the bottom of the makeLvl() function:
//every 20 bells, we'll create a bird, not including the first one
if(int(bellTotal/20) == bellTotal/20 && bellTime == 1 && bellTotal != 0){
bellHolder.attachMovie('mcBird','bird'+bellTotal, bellHolder.getNextHighestDepth());//attach a bird to the stage
bellHolder['bird'+bellTotal]._y = bellTop;//set the bird's y value
bellHolder['bird'+bellTotal]._x = -50;//set the birds x value at first off the stage
bellHolder['bird'+bellTotal].speed = 5;//set the speed
bellHolder['bird'+bellTotal].onEnterFrame = function(){//set some actions for the bell
this._x += this.speed;//move the bird based on the speed
if(this._x >= 525){//if the x value is too far right
this.speed = -5;//change the speed to negative so it moves left
this._xscale = -100;//turn the MovieClip around
}
if (this._x <= 0){//save with too far left
this.speed = 5;
this._xscale = 100;
}
this._y += 3;//move the bird slowly down
if(this.hitTest(mcMain)){//if it touches mcMain
//basically do everything that happened to the bell
_root.mainJumping = true;
jumpSpeed = jumpSpeedLimit*-1;
this.removeMovieClip();
}
}
}
It's basically the same thing we did for the bell, except now it moves from side to side.
Well, here concludes the 2nd part of the tutorial. Next time, we'll make this level playable.