Page 11 of 19« First...910111213...Last »

Tutorial: Create a Platform Game in AS3 – Part 3


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

Step 3: Programming the Level

Now that we’ve set up all of the blocks onto the stage, we can actually add some code to them. The first thing we’re going to do is to make it so the blocks are the only thing that the main guy can stand on. Replace this code in the mainJump() function:

//if main hits the floor, then stop jumping
//of course, we'll change this once we create the level
if(mcMain.y >= stage.stageHeight - mcMain.height){
	mainJumping = false;
	mcMain.y = stage.stageHeight - mcMain.height;
}

With this:

//if main hits a block, then stop jumping
//this loop will check a hit test with any block
for(var i:int = 0;i<blockHolder.numChildren; i++){
	//getting the current block
	var hitBlock:DisplayObject = blockHolder.getChildAt(i);
	//checking hit test and if main is above the brick
	if(mcMain.hitTestObject(hitBlock) && mcMain.y < hitBlock.y){
		mainOnGround = false;
		//stop jumping
		mainJumping = false;
		//and set the guys coordinates to be on top of the block
		mcMain.y = hitBlock.y - mcMain.height;
		//break out of the loop
		break;
	}
}

Now, we have to make the character fall when he isn’t on a block. First, define a variable, mainOnGround at the top, and set it as a false boolean. Then, set it to true if mcMain hits a block in the mainJump() function. Hopefully, I don’t have to walk you through this one. Next, add the following code to moveChar():

//checking if he isn't on ground
//run the loop checking if he's touching any blocks again
for(var i:int = 0;i<blockHolder.numChildren; i++){
	//getting the current block
	var hitBlock:DisplayObject = blockHolder.getChildAt(i);
	//checking hit test and if main is above the brick
	if(mcMain.hitTestObject(hitBlock) && mcMain.y < hitBlock.y){
		//this time, we just make mainOnGround true
		mainOnGround = true;
		//and break from the loop
		break;
	}
 
	mainOnGround = false;
}
 
//then we make him fall if he isn't on ground
if(!mainOnGround){
	mainJumping = true;
}

The next thing we’re going to do is make the guy bounce off of the bricks if he hits them below. Otherwise, he’d somehow get on top of the bricks from below, which we don’t want. To do this, we’re going to have to change the for loop in the mainJump() function. Here’s what you should replace it with:

for(var i:int = 0;i<blockHolder.numChildren; i++){
	//getting the current block
	var hitBlock:DisplayObject = blockHolder.getChildAt(i);
	//checking hit test
	if(mcMain.hitTestObject(hitBlock)){
		//if main is falling down
		if(jumpSpeed > 0){
			//stop jumping
			mainJumping = false;
			//and set the guys coordinates to be on top of the block
			mcMain.y = hitBlock.y - mcMain.height;
			//he's on solid ground
			mainOnGround = true;
			//break out of the loop
			break;
		} else {
			jumpSpeed = Math.abs(jumpSpeed);
			//making the main guy get away from the block
			mcMain.y = hitBlock.y + hitBlock.height + 1;
		}
 
	}
}

Now, if you test it out, the guy bounces when hitting the block. Now, the last thing we’re going to do is make the background move with the character if he moves too far to the left or right. In order to do this, I’m going to change around lvlArray1 so the changes are more necessary. Here’s what I’ll change it to:

var lvlArray1:Array = new Array(
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,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,0,0,0,0,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,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,X,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
	0,0,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,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
);

Now, we have to edit the createLvl function first it centers the main character and actually makes this code work. Replace the current function with this code:

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++){
		//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 ++;
		}
		if(lvlArray[i] == 1){
			//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;
	//then we center the screen on the main character
	//this variable will tell us how far away we have to move everything
	//250 is about centered for mcMain we'll use that number
	var mainMove:int = 250 - mcMain.x;
	//then move mcMain and the entire level to center on him
	mcMain.x += mainMove;
	blockHolder.x += mainMove;
}

This code makes me very happy. The screen will now center on the main character in every level, no matter where you place him. Next, we want the actual background to move instead of the character when he moves so we can keep track of him at all times. This’ll be easy. In the moveChar() function, replace:

if(leftKeyDown){
	mcMain.x -= mainSpeed;
}
if(rightKeyDown){
	mcMain.x += mainSpeed;
}

with this:

if(leftKeyDown){
	blockHolder.x += mainSpeed;
}
if(rightKeyDown){
	blockHolder.x -= mainSpeed;
}

Pretty easy, eh? Now there’s only one problem I want to fix before I end this lesson. The character doesn’t really jump high enough. So, we’re just going to recode this part a bit:

//then continue jumping if already in the air
//crazy math that I won't explain
if(jumpSpeed < 0){
	jumpSpeed *= 1 - jumpSpeedLimit/75;
	if(jumpSpeed > -jumpSpeedLimit/5){
		jumpSpeed *= -1;
	}
}
if(jumpSpeed > 0 && jumpSpeed <= jumpSpeedLimit){
	jumpSpeed *= 1 + jumpSpeedLimit/50;
}
mcMain.y += jumpSpeed;

Replace it with this code:

//then continue jumping if already in the air
//crazy math that I won't explain
if(jumpSpeed < 0){
	jumpSpeed *= 1 - jumpSpeedLimit/125;
	if(jumpSpeed > -jumpSpeedLimit/5){
		jumpSpeed *= -1;
	}
}
if(jumpSpeed > 0 && jumpSpeed <= jumpSpeedLimit){
	jumpSpeed *= 1 + jumpSpeedLimit/50;
}
mcMain.y += jumpSpeed;

Also, change the jumpSpeedLimit to 20, eh?

Now, we’re done with the intense block programming. Next lesson, we’ll add some stuff to the level, like ladders and other obstacles. We also have to make it so that when we run into a wall, we’re stopped by it. Stay tuned…

Final Product

Source Files (zipped)

Read More...

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

Table of Contents Basic Character Programming Creating The Level Programming the Level Adding Level Elements Adding Enemies Goals and Level Completion Finishing Touches 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 [...]

Read More...

Tutorial: Create a Platform Game in AS3


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

Table of Contents Basic Character Programming Creating The Level Programming the Level Adding Level Elements Adding Enemies Goals and Level Completion Finishing Touches Step 1: Basic Character Programming Well, here we are in our first advanced tutorial. This time we’ll be creating a platform game similar to my GlowSticks except in ActionScript 3 and coded [...]

Read More...

Where do Flash Game Developers Come From?


Written By MrSun at 8:06 am - Friday, August 29th, 2008
Categories: Flash, Game Development

Recently, I stumbled upon an interesting article from Mochiland that gives stats on where most flash game developers come from (who are signed up at Mochi). The top three countries are the United States (with 39%), United Kingdom (with 10%), and Canada (with 6%). It’s no surprise to see that most of the Western countries [...]

Read More...

The Myths of Developing a Popular Game


Written By MrSun at 7:58 am - Thursday, August 28th, 2008
Categories: Flash, Game Development

There are, and there have been, thousands, maybe even millions of very successful games that have been released to the world. Some of them fully deserve their popularity while others aren’t the best. But, the one thing they have in common with each other is that they are liked. There are many beliefs about making [...]

Read More...

The Video Game Name Generator


Written By MrSun at 8:00 am - Wednesday, August 27th, 2008
Categories: Game Development, Links, Tools/Services

Recently, I stumbled upon an interesting tool called the Video Game Name Generator. What it does is take a bunch of common words that are used in video game names and mixes them up to create an interesting title for your game. I think it’s been around for a while but it’s still a pretty [...]

Read More...

5 Ways to Make a Popular Clone


Written By MrSun at 8:00 am - Tuesday, August 26th, 2008
Categories: Flash, Game Development

We all know that clones are just copies of other games. But, it is possible to make one popular, even if it isn’t totally original. Just use these tips and maybe your game will be well-received. 1. Base It Off of a Current Event I cannot count how many game clones are based on current [...]

Read More...

50 Ways to Make Us HATE Your Web Design


Written By MrSun at 8:00 am - Monday, August 25th, 2008
Categories: Web Design

Make the text way too small (under 10px) Make everything a really bright color Make everything a really dark color Have an awful color scheme Don’t optimize the images Add flash animations everywhere Add background music Don’t make anchor tags look different from regular text Make it all aligned in a weird way Make the [...]

Read More...

Link Post Sunday 08/24


Written By MrSun at 12:00 pm - Sunday, August 24th, 2008
Categories: Link Post Sunday, Links

Flash How to Build an AS3 Videoplayer by The Tech Labs ActionScript Filters Assist by Web Klan AS3: Homegrown Particles by Brian Connatser Showcase | Visualizing Data Roundup by Flash Enabled Blog Web Design Why I am No Longer Supporting IE6 by Ryan Farley 5 Steps for the Perfect Tabbed Navigation Menu by The Usability [...]

Read More...

Tutorial: Make a Vertical Shooter in AS3 – Part 6


Written By MrSun at 8:05 am - Saturday, August 23rd, 2008
Categories: All Tutorials, AS3, Flash, Game Development, Intermediate Tutorials

Table of Contents Programming the Character Programming the Character – Part 2 Creating the Enemies Programming the Enemies Scoring Finishing Touches Step 6: Finishing Touches As always, the finishing touches of this game won’t be explained too much by me, in hopes that you actually can do some of this stuff by yourself. Of course, [...]

Read More...
Page 11 of 19« First...910111213...Last »