Platform Tutorial [FP1.00]

This tutorial is not yet completed... So you can either check out the one I wrote for FP0.87 or come back later

Hey there. This tutorial explains how to create a simplistic platform engine in Flash Punk V1.00/V1.10. If you have an older flash punk version, I would either get the new version, or you can check out the tutorial I wrote for FP V0.87.

Also, the reason I made this a separate topic instead of updating the old one, is because the difference between the versions (0.87 and 1.00) differ so greatly, it would take more time to revise the tutorial than to just create a new one.

INTRODUCTION

This tutorial explains how you can create a platform game that contains levels, a player, and walls for the player to walk on. This tutorial expects that you have a basic understanding of how Flash Punk and Flash Develop works, and that you have BOTH downloaded and running, ready to roll. If you don't, please refer to this before attempting to use this tutorial. Looking over this wouldn't hurt either.

The Final Product
When you're all done the tutorial, you should have a final product that looks something like this.

Hopefully you find this tutorial helpful Cheesy

TUTORIAL CONTENTS/INDEX

Part I: Project Setup

Step 1: Starting the project
Step 2: Creating the level class
Step 3: Finishing the Main.as
Review: review the Main.as and World.as

Part II: Walls

Step 1: Starting the wall
Step 2: Loading the image
Step 3: Setting the settings
Review: What the wall class should now look like

Part III: The Player

Step 1: Player setup
Step 2: Player variables
Step 3: Keyboard and sprites
Step 4: Make that player move!
Review: What the player should now look like

--More, just haven't gotten to it yet.

PART I: PROJECT SETUP

Step 1: Starting the Project
Create a new project in Flash Develop and call it whatever you want (in my case, I'm calling in "Platform Tutorial"). Once you have completed, this, put the Flash Punk code into your game folder. Remove the "lib" folder and the "src" folders as we will not need them for this game. After you have removed these two folders, create a new folder called "game". The folder containing your project should now look something like the following:

"Your project folder..."

Now, within Flash Develop, go to Project >> Properties and set it to run in Flash Player 10. While you're here, lets resize the game window to 320x240, rather than 800x600 (which is way too large for our little game). Hit OK.

Once you have done this, create a new .as file called Main (assuming it doesn't already exist). To create a new .as file, right click on your project (in the right panel in Flash Develop) and go Add >> New Class. Make this class Always Compile (Right Click >> Always Compile).

Open up Main.as, and replace any code in there with the following:

Code:

package
{

import net.flashpunk.Engine;

public class Main extends Engine
{

public function Main()
{
super(320, 240, 60, true);
}

}

}

If you followed Chevy's Basic Tutorial, you'll already know this bit. It's just best to cover it so we won't miss anything out. I'm not going to go into any detail on how the super function works, and what those values are.. you should already know this (and if you don't...).

Step 2: Creating the Level.as
Now we need to create the level world - or a place to create the soon-to-be player and walls. Flash Punk has a handy dandy World.as that does just the trick for this sort of thing. So, right click on your game folder (from the right panel in flash punk) and add a new class called Level.

Now, within Level.as, at the very top we want package to be "package game". This is just so we can reference other classes from within this one, and so that it knows what folder it's in, etc. Once you have done that (if it isn't already there) you need to import a few things from Flash Punk:

Code:

import net.flashpunk.World;
import net.flashpunk.Entity;
import game.*;

These will be used so we can extend the world class, create new entities, and create 2 particular entities in the game folder at a later time (the player and wall, once we create them).

Finally, make sure the Level.as extends World.

Step 3: Finishing the Main.as
We must now head back over to our Main.as and make a few changes. Firstly, we want to make it also import the following:

Code:

import game.Level;
import net.flashpunk.FP;

This will allow us to go to the Level.as world when the game starts.
Now, to actually MAKE ourselves go to the Level.as world, we want to put the following line of code under the super function:

Code:

FP.world = new Level;

Pretty self explanatory.

Review
Your Main.as should now look something like this:

Code:

package
{

import net.flashpunk.Engine;
import game.Level;
import net.flashpunk.FP;

public class Main extends Engine
{

public function Main()
{
super(320, 240, 60, true);
FP.world = new Level;
}

}

}

And your Level.as should look like this:

Code:

package game
{
import net.flashpunk.World;
import net.flashpunk.Entity;
import game.*;

public class Level extends World
{

public function Level()
{

}

}

}

PART II: THE WALL Shocked

Step 1: Starting the Wall

I bet you're eager to create the player, but that's gotta wait Grin

Before we create the player, we have to have something for the player to WALK ON, and I like to call it the Wall (pretty creative name, eh?).
Now, first things first. We need a wall sprite. Either create one yourself, or use the one below. Make sure the wall is 16x16 in size (as that's the size we're going for in this tutorial)

wall.png

Now, once you've created this sprite, place it in a NEW (yes new) folder called data. data will contain all of our images in the game (and if you were to add music later on, then music as well).

Once the wall.png is in the correct place, we're going to create a new class in the game folder. This class is going to be called Wall.as (big surprise there, eh?). So, create Wall.as in the game folder, and then open it up.
Now that it is created, make sure the package is "package game" so that it knows where it is.

Finally, make the Wall.as import the following:

Code:

import net.flashpunk.Entity;

And make it extend this Entity we just imported.

Step 2: Loading the Image

We've created the Wall.as, and made a wall.png sprite for it... Now we have to load the image into the game.
So, open up Wall.as (if it isn't still open) and place the following code that should go below the Wall class (or rather within it, but above the Wall function)

Code:

[Embed(source = '../data/wall.png')]
private var imgWall:class;

This, put quite simply, embeds the wall.png and creates the imgWall class that contains the embedded information. Yay Tongue

After that code, we're going to actually create an "image" that we will set the graphic of the wall to. If the wall had more than one frame, I would actually use a Spritemap (which we will for the player), but in this case it's easier just to use an Image. So, place the following code below the embed line:

Code:

public var sprWall:Image = new Image(imgWall, new Rectangle(0,0,16,16));

This creates a new Image called "sprWall" with a width of 16 by 16 (notice how we have the rectangle there?).

Finally, you need to import two more things at the top:

Code:

import net.flashpunk.graphics.Image;
import flash.geom.Rectangle;

And onto the next step Cheesy

Step 3: Setting the settings

Now that we have embedded the image, and created a variable that contains the image, we need to actually set the graphic of the wall TO that image. Entities have a variable called "graphic" which is automatically drawn every frame. We can set the graphic to an image to make it appear on the screen.

To set the graphic, we need to place the following code within the function of the wall public function Wall():

Code:

graphic = sprWall;

We're almost done. We've set the graphic of the entity to the wall, but while we're here we should add a few more things. Firstly, we want to create a hitbox area so that we know how big the entity is (when the player collides with it). So, add the following code, below the graphic:

Code:

setHitbox(16,16);

That just sets the hitbox area to 16x16 (the size of our sprite).

And the last thing we need to do is set the collision type, so the player can actually check if it is having a collision with the wall:

Code:

type = "Wall";

And we're done the wall!

Review:

Your wall class should now look something like this:

Code:

package game
{

import flash.geom.Rectangle;
import net.flashpunk.Entity;
import net.flashpunk.graphics.Image;

public class Wall extends Entity
{

[Embed(source = '../data/wall.png')] private var imgWall:Class;
public var sprWall:Image = new Image(imgWall, new Rectangle(0,0,16,16));

public function Wall()
{
graphic = sprWall;
setHitbox(16, 16);
type = "Wall";
}

}

}

PART III: THE PLAYER

So a lot of the stuff back there you may have already known about if you've gone through A simple game in Flash Develop or the Quickstart topic. However, this next part deals with things that should be new. We're going to create a play that can jump, run, variable jumping, friction, gravity, and pixel perfect collisions. So, without further talking....

Step 1: Player Setup

So, first off, you're going to need to create the player class. So, create a new class called Player.as in your game folder.

... writing ... writing ... writing ...

September 02, 2010