How to Create a Platform Game in AS3 – 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:int = 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:int = 0;

Now, we have to create a class that will have all of the code for the blocks. Create a new external ActionScript file called “Block.as”. Then, place the following code into it:

package{
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.events.*;
 
	//sprites are just movieclips without any frames in them
	public class Block extends Sprite{
		//_root will signify the root of the document
		private var _root:Object;
 
		public function Block(){
			//this code will only be run once
			addEventListener(Event.ADDED, beginClass);
			//this code will constantly be run
			addEventListener(Event.ENTER_FRAME, eFrame);
		}
 
		private function beginClass(event:Event):void{
			//defining the root of the document
			_root = MovieClip(root);
		}
 
		private function eFrame(event:Event):void{
 
		}
	}
}

We’ll add on to this later but for now, we have to define the function that will place these bricks on stage. Place the following code at the end of the frame:

//creating the level
//this guy will hold all of the blocks
var blockHolder:Sprite = new Sprite();
//then we add him to stage
addChild(blockHolder);
function createLvl():void{
	//getting the current level that we are on
	var lvlArray:Array = MovieClip(root)['lvlArray'+lvlCurrent];
	//we have to find how far this level goes
	//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 lvl formatting very strict
	var lvlColumns:int = Math.ceil(lvlArray.length/16);
	//now we must create the level
	for(var i:int = 0;i<lvlArray.length;i++){
		if(lvlArray[i] == 1){
			//checking if we move onto the next row
			//this checks if i is divisible by the # of columns
			if(i/lvlColumns == int(i/lvlColumns)){
				row ++;
			}
 
			//making a new block
			var newBlock:Block = new Block();
			//drawing the block
			newBlock.graphics.beginFill(0xFFFFFF/*The color for shape*/,1/*The alpha for the shape*/);
			//turning the shape into a square
			newBlock.graphics.drawRect(0,0,25,25);
			//change the coordinates of the block
			newBlock.x = (i-(row-1)*lvlColumns)*newBlock.width;
			newBlock.y = (row-1)*newBlock.height;
			//then finally adding it to stage
			blockHolder.addChild(newBlock);
		} else if (lvlArray[i] == 'MAIN'){
			mcMain.x = (i-(row-1)*lvlColumns)*newBlock.width;
			mcMain.y = (row-1)*newBlock.height;
		}
	}
	//reset the row for another use
	row = 0;
}
 
//running the createlvl funciton
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 CS3 or above)

Subscribe!

Subscribe!
Enter your email address:  

Awesome Tutorials