Tutorial: Create a Game Like Winter Bells in AS2 – Part 2


Written By MrSun at 8:02 am - Thursday, January 01st, 2009
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.

The Final Product

Source .fla File

«
»