Creation of a platform game using FlashPunk

During these days I am playing a bit with FlashPunk and I want to share with you a couple of examples.

We are going to build a simple platform game.

Getting the required software

While most developers use Flash Builder or FlashDevelop, I will use Flash Professional CS5.5, so the first thing you should do is getting a copy of it. You can get a fully functional 30 days trial at this page.

Then, download the latest release of FlashPunk from this page, and you are ready to go.

Preparing the worspace

All in all, FlashPunk is just an AS3 library, and although it has been developed for being used outside the Flash IDE, you just have to copy the net foder into your project folder and you are ready to go.

Hello FlashPunk

At this time in your main class (I called mine punk), enter this code:

I said FlashPunk has been developed for being used outside the Flash IDE, and that’s it… we haven’t Sprites or Movieclips, but the class extends Engine FlashPunk’s class.

This line

Calls the constructor of the extended class, that is Engine constructor, with these arguments:

width: the width of your game in pixels

height: the height of your game in pixels

frameRate: the game framerate, in frames per second (default: 60)

fixed: true if a fixed-framerate should be used, false (default) otherwise.

Test the movie and you will see a dark background color, no matter the Stage color.

Your FlashPunk project works!

Adding some walls

When it’s time to add graphics to our FlashPunk games, we have to draw them with our preferred paint software. Using Photoshop, I made a 32×32 pixels square and called saved it as wall.png in a newly created assets folder in the same level of net (the one which contains FlashPunk library).

Then change punk.as this way:

What happened? We added a new function called init, overriding the init method of Engine(). This will allow us to initialize the game. FP.screen.color lets us set the background color, specified as an hexadecimal value.

Then, we define world, the main game container, with theWorld class. This class will contain the game itself.

Let’s see the content of theWorld.as:

There isn’t that much to say, we are just creating a lot of theWall instances. So the interesting part comes with the creation of theWall.as:

As you can see, the class extends FlashPunk’s Entity class.

At lines 5 and 6 the wall picture is embedded into a class called WALL.

Then the constructor wants the column and row position as arguments.

Line 8: Assigns the wall picture to theWall entity. This way, at every theWall instance, our wall.png pucture will be added to stage.

Line 9: setHitbox method defines the hit box around the entity, useful when we’ll have to deal with collisions. It works in the same way as the hit box used for collision tests with AS3.

Line 10: type property is useful to group entities. This way we’ll only have to check for collision with wall group rather than for each theWall entity.

Lines 11-12: simply placing the entity in the world.

This is our game at this step:

Only a bunch of walls. Let’s add the player.

Adding the player

Using Photoshop, I created a cyan 13×26 pixels box and saved as player.png in assets folder.

Just like I added the walls, I am adding the player in theWorld class at line 5

thePlayer class will extend Entity and it’s the latest class we will add in this tutorial. It’s a bit longer than the previous classes, but not that hard to understand:

First, let’s have a look at the class level variables:

power is the thrust for the horizontal speed
jumpPower is the thrust for the jump
hFriction is the horizontal friction
vFriction is the vertical friction
xSpeed is the horizontal speed
ySpeed is the vertical speed
false otherwise
gravity is the gravity force

Then, in the same way as the wall, player.png image is embedded in a class called PLAYER.

At lines 18-21 I define player’s image, hit box and position in the same way I made with the walls.

The update function I had to override manages player movement:

Line 24: a local variable called pressed is created and takes a false value. This variable will be true if the player is pressing left or right arrow keys, false otherwise.

Line 25: here is how FlashPunk checks for pressed keys, in this case left arrow key.

Line 26: adjusts horizontal speed

Line 27: we now know the player pressed the left (or right) arrow key

Lines 29-32: same thing when the player pressed the right arrow key

Line 33: this is how FlashPunk checks for collisions: collide method wants three arguments: the entity or group of entities to check for the collision (wall group in this case, that is any theWall entity), and the x and y position where the entity is supposed to be placed.

In this specific case I am checking if the player, placed one pixel below its actual position, is colliding with the walls. That is, the player is on a platform.

If the player is on a platform, we set its vertical speed to zero (line 34) and check if the player is pressing up arrow key (line 35). In this case, the vertical speed is updated by subtracting jumpPower. This is how the player jumps!

If the player is not on a platform (line 38), the vertical speed is updated by adding the gravity.

Lines 41-43: stop player movement if it’s too slow and the player is not pressing left or right arrow keys.

Lines 44-45: apply friction to player’s speed.

Lines 46-47: adjust player x and y position according to its speed and the environment. This is made with adjustXPosition and adjustYPosition functions which work in the same way, moving the player in the current direction pixel by pixel until the movement is completed or the player hits a wall.

Let’s see how does adjustXPosition work:

Line 50: loop from zero to the absolute value of horizontal speed

Line 51: checks for collision with a wall one pixel on the left or on the right of the player, according to its horizontal speed. sign method returns 1 is its argument is positive, -1 if it’s negative and 0 if it’s zero.

Line 52: if there’s no collision, increases/decreases player x position according to its horizontal speed.

Lines 54-55: if there is a collision, set the horizontal speed to zero and exit the loop.

adjustYPosition works in the same way.

This is the final result:

Use left/right arrow keys to move, up to jump.

Download the source code, with FlashPunk library, and all the graphic assets.

Is there any other feature you would like to see?

  • zency
  • Emanuele Feronato

    it was working a couple of hours ago…

  • Dan

    I’ve been looking at your site for a while – you’ve got some really inspiring examples, and I’m trying my own stuff out. I’ve installed Flashpunk but only used it with Flashdevelop so far – would this example have been as easy to write with Flashdevelop?
    Keep up the good work!

  • Shawn Greene

    I just started with the flash game tutorial, with AS2, which I find is great! You should make a tutorial on how do that, unless you did and I missed it!

  • CC

    I tried downloading your source code, but it won’t compile. I get a Error #1063:Argument count mismatch on World(). Expected 2, got 0.

    I’m pretty sure this is a naming conflict with that abortive physics engine that was shipped with CS5 but is undocumented. How did you get your version to compile? Is there a way to keep Flash from considering that library?

  • same error

  • Emanuele Feronato

    I used CS5.5 trial and everything worked.

    I’ll try to run it with other Flash versions and see what happens.

  • I don’t like the CS5 part. Other than that I like the logic of the demo :)

  • I liked it a lot. Can you Emanuele teach us how to build a game using “item shop” assets and DB?

    Regards

  • Emanuele Feronato

    why don’t you use some 3rd party API such as Mochi Coins? Or do you mean to add items dinamically from a MySql db?

  • Good tutorial, nice introduction.

    It’s worth noting that in your functions adjustXPosition() and adjustYPosition(), FlashPunk actually has built-in logic to handle moving flush against objects if you want to use it. Instead of calling:

    adjustXPosition();
    adjustYPosition();

    You could just do this:

    moveBy(xSpeed, ySpeed, “wall”);

    That tells FlashPunk to move the Entity, but stop flush against any “wall” entities it detects. And if you have logic you want to resolve in the collision (such as setting the speed to 0 when you hit a wall) you can override Entity’s moveCollideX/Y() functions, like this:

    override public function moveCollideX(e:Entity):void
    {
    xSpeed = 0;
    }

    override public function moveCollideY(e:Entity):void
    {
    ySpeed = 0;
    }

    The moveBy() function will call these functions if it collides with a “wall”, and will actually also pass the wall instance they collide with into them (e:Entity), so if you have further logic you want to evaluate (eg. hitting on a trampoline if ySpeed > 0 and e is trampolineClass, bounce) then you can do so.

    Cheers on the tutorial, and good luck to folks picking up FlashPunk :)

  • Emanuele Feronato

    Thank you Chevy, I’ll follow your tips at once!!

  • CC

    I was using the paid-for version of CS5 (11.0.2.489). It’s possible that the shipped version of CS5 had the physics library in it, but the trial does not, which might explain why it worked for you and not for me…

  • Emanuele Feronato

    I am buying CS5.5 in a few days, once the trial is expired, then we’ll see what happens. Meanwhile during next step I’ll post a Flash Builder version too.

  • Hmm interesting.

    Other feature what we like to see?

    Stupid enemies, shooting, gravity, maps, other stages in game, bosses? :D

  • rreis

    Other feature what we like to see?
    A paralax scrolling like “Nintendo Super Mario Bross.” games.
    Could you hel us how to implement it using FlashPunk?

  • gdhyyanglang

    ?FlashPunk???????

    I was using the FlashPunk, it was working well.

  • Pingback: Weekly Digest for June 2nd | BiscuitJam Blog()

  • Hi, I just tried your tutorial but something didn’t worked: I keep getting error 5000 the class ‘punk’ must subclass ‘flash.display.MovieClip’ blah…blah…blah…

    I already unchecked the ‘Automatically declare class instances’ in publish settings but I kept getting that error. Is it because I’m using CS3? (which I hope not.)

    thanks

  • Redkast

    Why didn’t you save memory and just use the built in tilemap class with the grid mask?
    http://flashpunk.net/docs/net/flashpunk/graphics/Tilemap.html
    http://flashpunk.net/docs/net/flashpunk/masks/Grid.html

  • FlashPunk has a built-in entity method that does what your adjustX/YPosition methods are doing. You can just do:

    moveBy(xSpeed, ySpeed, “wall”, true);

    This will step pixel by pixel on first the X axis, then the Y axis, until it hits something.

    When it collides with something, it will call the moveCollideX and moveCollideY functions on your entity. If these functions return true, the collision occurs; if they return false, it ignores that collision. You can override these in your entity to clear xSpeed and ySpeed when you hit things.

  • Please delete/ignore that last comment. I didn’t realize there were other comments until I posted mine.

  • Russ

    Hi, I’ve been trying to follow the tutorial, but am currently stuck at the first section “Hello Flashpunk”!

    When I test the movie, the stage looks exactly like what I’ve drawn on it, instead of the dark background as described.

    I think I’m selecting the wrong type of file when I create a new document and am unsure which one to pick. I’m assuming I pick New ActioScript File or New Flash Project.

  • Russ

    Ignore last comment. I was using CS4 and couldn’t find the correct project type. Tried it again with Flash Develop and it worked fine.

  • Pingback: Fast Game Prototyping with Flashpunk and Minimal Comps | wasted potential()

  • Pingback: ????::: ?????????? && FlashPunk ::: | #redefy()

  • Warren

    Hey guys, I would like to start programming with flashpunk. But the official FlashPunk Site is down now for a while…
    Could somebody upload the files I need? Or could post a Link?

    Would be great.
    Ty

  • flashpunk

    i think you can still donwload everything here https://github.com/ChevyRay/FlashPunk
    site is still down, so you can’t access the wiki. but there is some other documentation on another site: http://flashgamedojo.com/wiki/index.php?title=Category:FlashPunk

  • Dustin

    Hey man, just wanted to say thanks. this code helped me out alot with the game I am trying to build. I’m still really shaky with basic platforming, but this has given me something really sturdy to build off.

  • Kari Glenn

    I don’t understand the world.as code for the level can you please explain this in more detail.

  • I’d like to know how to develop my own level, because you added the wall instances with some weird numbers, and I’d like to know how they work so I can design my own levels xD

    I just didn’t find neither in FlashDevelop and FlashPunk API’s :(

    Other than that, thanks for the tutorial, got me started with my platformer :)