How to Create a Platform Game in AS2 – Part 2

Part 2: Creating the Level

Now, we have to set up blocks on stage that will account for a level. We’ll use an array to accomplish this manly feat. We’re also going to create some other level variables. Place this code at the top:

//LEVEL VARIABLES
//the current lvl
var lvlCurrent:Number = 1;
/*The key for the level arrays:
1: Regular Block
X: Main Character
*/
//this variable will hold the character
var X:String = 'MAIN';
//the array for level 1
var lvlArray1:Array = new Array(
	1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
	1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,0,X,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
	1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1
);

This is a pretty big array, but it won’t be too hard to understand, I hope. The next thing we have to do is to actually make a function which creates the level. We’ll make some more variables for this as well:

//current row that we are creating
var row:Number = 0;

Next, we have to create a MovieClip that will act as the block. I’m just going to make it a 25×25 white square without borders. Name it mcBlock, then export it for ActionScript:
Exporting this square for ActionScript

Finally, we can do some more coding. Now, we have to define the function that will place the bricks on stage. Place the following code at the end of the frame:

//creating the level
//this empty movieclip will hold all of the blocks
_root.createEmptyMovieClip('blockHolder',_root.getNextHighestDepth());
function createLvl():Void{
	//finding the array of the current level we're on
	//this is just a way to dynamically select an Array within the document
	var lvlArray:Array = _root['lvlArray'+lvlCurrent];
	//we have to find how far this level will span
	//this will be used so we know when to move to the next row
	//there will always be 16 rows, so this is how we find it out
	//of course, this will make the level formatting very strict
	var lvlColumns:Number = Math.ceil(lvlArray.length/16);
	//now we can create the level
	for(var i:Number=0;i<lvlArray.length;i++){
		if(i/lvlColumns == int(i/lvlColumns)){
			row ++; //moving onto the next row once we're done with a column
		}
 
		if(lvlArray[i] == 1){
			//making a new block and adding it to stage
			blockHolder.attachMovie('mcBlock', 'Block'+i,blockHolder.getNextHighestDepth());
			//modifying this guy's coordinates
			blockHolder['Block'+i]._x = (i-(row-1)*lvlColumns)*25;
			blockHolder['Block'+i]._y = (row-1)*25;
		} else if (lvlArray[i] == 'MAIN'){
			//changing main's coordinates if we spot him
			mcMain._x = (i-(row-1)*lvlColumns)*25;
			mcMain._y = (row-1)*25;
		}
	}
	//reset the row for later use
	row = 0;
}
//finally, we run the function for the first time
createLvl();

This is some pretty intense code. Look it over for a bit and try to comprehend it. This type of code is what you need to make if you want to become a better developer.

This concludes this part of the tutorial. Next time, we’ll add some code to these blocks and make them interact with the character. Stay tuned…

Spread the Knowledge

  • Print
  • Digg
  • del.icio.us
  • Facebook
  • StumbleUpon
  • Twitter
  • Google Bookmarks
  • Design Float
  • DZone
  • Yahoo! Buzz
  • PDF
  • Reddit
  • RSS
  • Technorati

Preview

Download Source
(Requires Flash 8 or above)

Subscribe!

Subscribe!
Enter your email address:  

Awesome Tutorials