Tutorial: Create a Platform Game in AS2 – Part 2


Written By MrSun at 8:01 am - Saturday, January 03rd, 2009
Categories: Advanced Tutorials, All Tutorials, AS2, 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: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…

Final Product

Source .fla File

16 Comments

Evan:

hmm… mines not working… when i play it after part 2 theres no blocks and if you jump he falls out of the screen


Craig:

I have the same problem as Evan…


Joe:

worked fine for me


Michael:

I have the same problem with Craig and Evan….soz..


Anonymous:

How do you make a key for an array with different mcs in it


MegaVolt:

It falls through, cause in this part there is no collision detection code implemented. From part 3 onwards everything works good.
I made a game slightly based on this tutoral, and it works great.

Big thanks mr Sun.


Anonymous:

do u create all of this on another flash document? or…can someone tell me WHERE everything goes…i finished step 1 properly…like i can move and jump…im just stuck at this step


MegaVolt:

Nope. If You follow this tutorial then You should make the changes in the document You already created. (that’s what I did anyway when I was first trying it out).

It’s explained properly where You should make changes in this tutorial,
but You can also download a source if You still dont understand.


abinandhanan:

same prob as evan.


chris:

why is the colour of the text different to mine i even copied it but still blue… e.g this bit is green var X:String = ‘MAIN’; and not red like yours ? and the lvl array bit like 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
that bit is just all black
ps i have adobe cs4 flash


Anonymous:

On the “finished product” on this page, it wont stay on the blocks


Robert:

Hello. I can solve your problems with the collision on the box + move + jump.. Here is the script i came up with after an hour or two:

var mainJumping:Boolean = false;

var jumpSpeedLimit:Number = 15;

var jumpSpeed:Number = jumpSpeedLimit;

var yspeed = 1;
var gravity = 1;
var jump = -8;
onEnterFrame = function () {
mcMain._y += yspeed;
yspeed += gravity;
if(mcMain.hitTest(mcBlock)){
if(Key.isDown(Key.UP)){
yspeed = jump;
} else {
yspeed = 0;
}
}
}

Make that on the layer. And now is the thing. Go to the ball / mcMain (select the ball in actionscript) And when you have the box where you can write in the script then write in this:

onClipEvent (load) {
power = 6;
radius = 6;
_x = 290;
_y = 250;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
_x -= power;
}
if (Key.isDown(Key.RIGHT)) {
_x += power;
}

}

I hope that i solved your problems.


Robert:

Btw there is a small thing in the mcMain script. I have set cordinates on the script where the circle (Mcmain)

_x = 290;
_y = 250;

It puts the circle (mcMain) into a certain place in the game, you can change the cordinates (the numbers) or delete it :) Have a nice game


chester:

mine just dosint genarate at all


fjames0327:

so i type in the code exactly, and every time i try it out, my computer freezes up


Tile-Based Box2dAS3 game « GreenJay Blog:

[...] I would like to give a little credit to Emanuele Feronato for his many AS3 blog posts and to this Mr Sun Studios post on storing level [...]


«
»