Tutorial: Create a Platform Game in AS3 – Part 2


Written By MrSun at 8:01 am - Saturday, August 30th, 2008
Categories: Advanced Tutorials, All Tutorials, AS3, Flash, Game Development

Step 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…

Final Product

Source Files (zipped)

24 Comments

joe:

“This type of code is what you need to make if you want to become a better developer.” Thanks
There are some things I don’t understand here… Perhaps you can help me so I can become a better developer…

var _root:Object;

So we are creating an object and putting a movieclip in it

MovieClip(root);

but what is the “root” argument all about?


Mr Sun:

we are just creating an object that takes the place of root. Instead of having to type MovieClip(root) every single time we have to access the root document, we can just type in _root, which is what was used in AS2


Peter:

I keep getting an error stating:
1046: Type was not found or was not a compile-time constant: Block.
1180: Call to a possibly undefined method Block.
I have created the .as file called Block and it’s target is my flash document. What could I be doing wrong?


fercho:

you have to save the *.as file in the same folder or youll get that error


passerby:

Allo, I have to say I really like your movement code and appreciate this tutorial. I wanted to ask about the way you make the level though, the array seems kind of limiting and I was wondering if you thought it would be possible to use the hittest code and just apply that to a movieclip with a basic invisible fill to denote collisions for a more complex background image like a photo or drawing. I’m kind of new to as. I understand the basic functions but picking out what applies to what and keeping a general map of things in my head takes getting used to.
Thanks for the tut again.


alex:

i get error 1083 syntax error on the package line?
how do i fix it?


stybbe:

you prob wrote no package atop of the .as file or misstyped it


Pig:

Is there really no other way to do this? A boxish array? Can’t you make objects define bounds and obstacles? I’ve searched, but there are barely any AS3 tutorials.


Chris:

I just want to say I f***in love your tutorials. Ahhqwohhotgrkeopgkekgope it makes me excited to be a flash developer and I’m learning so much! Thank you thank you thank you.


Kid:

I’ve been working on this FOREVER…im using Tutorialized.com for your tutorial, which may not be the site you used… but for some reason, i cannot copy and paste the action script… its really kinda annoying… and now, i’ve asked my teacher and everything, how the heck do you make an external file? this is confusing…=[


Ben:

I used to get the 1046 and the 1180 error, and I saved the external Block.as into the root folder of the program but I still get the error, any ideas?


kennith:

my character starts off on the block but when i jump he will jump but then go right through it. how can i fix this problem?


Yewhral:

Is there another way? Hitdetecion, collisions? Writing milions 0 and 1 would be painful.


Yewhral:

And this 0 and 1 makes impossible to add some nice looking textures.
You can make only one colour bricks…


APGamerZ:

Make sure you capitalize the “B” in the Block.as file. You probably have to rename it outside of Flash.


Kamica:

“5007: An ActionScript file must have at least one externally visible definition.” is the error I get, even when I copy everything to the right places, it says that about “Block.as, Line 1″
Still, thanks for the tutorial, it’ll help me greatly =D.


Kamica:

Nevermind, forgot to save the Block.as file >.< works fine now =D.


Marcos:

Hi, I get this error message every time I try to test this movie

1180: Call to a possibly undefined method addFrameScript.

I copied your script exactly, even in the end tried copy and pasting and I still get this error, I have the class in my main file as Block, and I have gone through your instructions, multiple times, any assistance would be greatly appreciated, thank you.


oly:

I get an error that says: Packages cannot be nested. package{


Anonymous:

Hey, this is a great tutorial, but I’m having a problem with it. If the player and the enemies are not 25*25, the tile-based placement does not work. Is there some way around this? If you’re still paying attention to these posts and have a solution, pleas comment back.


Mortrax:

Hello, I’ve seen alot of people who are haveing problem with the 1046 and 1180 error. I used to have the same problem and this is what I did to get it working:

1. Make sure that you have the main file and the external as file in the same folder (I’m not sure if it is good to have other things in that folder or if it doesen’t matter. I’ve got them in a folder of their own)

2. Make sure that you named it: Block.as and not block.as

I hope that will be of any help.


lolfish:

um hey where do i put all this code?


Elvira:

I’m getting the same error as Marcos, can you help me?


SwiTcheD:

Hi, how do you replace the code under ‘if(lvlArray[i] == 1)’ so that you can use your own custom movieclip from the library? E.g., instead of white bricks, put your custom bricks in place..

Thanks a lot in advance :-)


«
»