Creation of a platform game using FlashPunk – step 2

Let’s add some new features to the FlashPunk platformer prototype we discussed last week.

This time we’ll add sprite maps and double jump. Uh… and this time I will be using Flash Builder 4 rather than Flash Professional CS5.5

Sprite maps

Sprite maps or sprite sheets are single images which includes all the frames needed to display a character.

This picture should give you an idea of what I am talking about:

On the left of the image, we can see all the frames of Princess Zelda animation. FlashPunk can import and use such sprite maps to animate Entities.

Remember: ripping sprite maps is not legal as it infringes copyright. That’s why I am using this awesome sprite map:

This absolutely fantastic sprite map features two images: one for the player going left, and one for the player going right. There’s not that much to draw as the main concept can be explained just with this couple of frames.

The code

There’s nothing much to change from the previous step, so we just need to add a line to the main class flashpunk:

At line 4 I am declaring export options as I can’t set them from the Flash IDE (remember I am using Flash Builder 4).

The interesting part comes with thePlayer class:

Let’s see what’s interesting in it:

Lines 2-7: import required classes. Look at line 5 which imports Spritemap class used to handle sprite maps.

Lines 16-17: variables to see if the player is jumping and if it can perform a double jump.

Line 20: defines a new sprite map on the PLAYER class (image). Look at the arguments: we have the source, and the tile width and height, both in pixels. This way our player.png image is divided into tiles of 13×26 pixels. As in an array, the first tile has index 0, the second has index 1, and so on.

Lines 25-26: add method adds an animation to the sprite map. The arguments are the name (a string), the frames (in this case each animation has only one frame), the frame rate (which is not important in this case as we only have one frame), and a Boolean variable to tell FlashPunk if the animation should loop (not important in this case).

We have successfully defined goingLeft and goingRight animations.

I’ll skip all the double jump feature as it’s only an if-then-else and has nothing to do with FlashPunk.

Look at line 62 how the player is moved with moveBy method using xSpeed and ySpeed as horizontal and vertical offsets and checking for collisions with wall group.

This single line replaces the whole moving routine I showed you in previous step and has been told me by Chevy Ray Johnston (FlashPunk’s author) itself so you can trust this way of moving entities!

Lines 63-68: show the proper animation according to player horizontal movement.

Lines 70-75: overriding moveCollideX and moveCollideY functions allows me to do something when the player hits a wall while moving horizontally or vertically. In my case, I set the speed to zero.

And this is the result:

Move the player with arrow keys and see how it changes appearance as it moves left or right. To perform a double jump, press UP arrow while the player is already jumping.

Download the source code, ready to be imported into Flash Builder 4, libraries and assets included.

  • Why not just reverse the one image instead of using two images for the character?

  • Emanuele Feronato

    It was just to show how to use sprite maps, optimization was not the primary scope of this post.

  • sovik

    I have problems. I used FlashDevelop + Flash CS 5

    ArgumentError: Error # 1063: Inconsistency in number of arguments World (). Expected 2, got 0.
    at net.flashpunk:: Engine ()
    at flashpunk ()

    Why?

  • Emanuele Feronato

    probably it’s related to the built in “physics engine” included in Flash CS5+

    At least, these are the rumors you can find googling for it

  • patrik

    using flashbuilder 4 + flash pro 5
    same problems with Error #1063:
    :/

  • patrik

    oh. that was posted for tut#1. Not tried this source file

  • patrik

    How should i build this project in flash builder 4?
    Flex?

  • Rennan

    Thank you Emanuele for this tutorial. Some days ago I´ve tried to use FlashPunk SpriteMaps and nothing had worked. But by now, I could understand my mistake.

    Could you show us how to change screens?

    Regards

  • Maklaud

    Very nice, as usual! Emanuele, I don’t know did you see my comment or not, but can you review it and answer me, please? My comment at this article – http://www.emanueleferonato.com/2008/12/21/play-red-flowers/
    Thank you.

  • Emanuele Feronato

    Maklaud: I did not made the levels, I asked the permission to Locomalito, I am afraid you should do the same.
    http://www.locomalito.com/juegos_red_spheres.php

    Rennan: sure, changing screen will be one of the feature of next step

  • Mulder90

    Tutti ti ringraziano in inglese…io sono alternativo e i complimenti te li faccio in italiano!(in verità sono una capra a scrivere in inglese :D )
    Grazie mille per i tutorial e per il bellissimo libro!
    Ciao!

  • Maklaud

    Emanuele, yes, I know that. I already wrote him to the mail info[at]locomalito.com, but he didn’t answer me yet. May be you can give me another way to contact him?

  • Let’s say that you want the player to coast to a more gradual stop. With the current method a player can only move a full pixel at a time thus speed must me more than 1. Even if you lowered the dead zone for speed, for any value below 1, the player will move 1 pixel per frame/tick. What if you wanted the floor to be more slippery?

    It can be easily done with moveBy() while setting the walls as a collision but the problem is that, unless you modify the function to return collisions, you can’t kill the x or y velocity. (I suppose you could take the x and y you actually move to and compare that to a predicted location and determine collision based on that.)

    Regardless, what could be done to allow for a more gradual stop that will let the logic end allow the player to move at less than 1px/frame way?

  • Droxpopuli

    Alright never mind, I didn’t read the whole thing and was going off of the previous tutorial. Cool feature for the framework.

  • Pingback: Creation of a platform game using FlashPunk – Title screen()

  • Hi Emanuele

    I’ve been putting off trying FlashPunk for a while due to lack of times but finally playing with it to day and your tutorials are great. However, I’m hitting a problem when implementing the change to:

    moveBy(xSpeed,ySpeed,”wall”);

    When I drop that line in to replace the calls to the adjustXPosition and adjustYPosition methods I get “Call to a possibly undefined method moveBy”.

    Similarly if I drop the 2 override methods in I get:

    “Method marked override must override another method”

    Double and triple checked everything, and even tried downloading your source code and running that but still the same.

    Any idea what could be wrong? (BTW everything else is working fine and really easy to follow, just when I try to use Chevy’s suggested changes which you implemented yourself it falls over)

  • Teh SoTo

    @Billy, the problem with that code is that “A function marked override must exactly match the parameter and return type declaration of the function it is overriding.”

    In this case, the class “Entity” that has the original function moveCollideX is returning a boolean and the class thePlayer isn’t, solution: make the function moveCollideX and moveCollideY return a boolean and that’s it:

    override public function moveCollideX(e:Entity):Boolean {
    xSpeed = 0;
    return true;
    }
    override public function moveCollideY(e:Entity):Boolean {
    ySpeed = 0;
    return true;
    }

    (;

  • Andy

    Hi, if anyone can help me will be cool.

    I keep getting this error on thePlayer.as script:

    C:\Users\FujitsuUser\Desktop\Flash\Platformer\src\thePlayer.as(70): col: 28 Error: Incompatible override.
    override public function moveCollideX(e:Entity):void {
    ^
    C:\Users\FujitsuUser\Desktop\Flash\Platformer\src\thePlayer.as(73): col: 28 Error: Incompatible override.
    override public function moveCollideY(e:Entity):void {

    anyone knows how to solve..I’m new to this so I cant really solve it

  • Bryan

    First thanks alot for the tutorials on your page very helpful

    my question is Im using the “moveBy(xSpeed,ySpeed,typeArray);” method “typeArray” being and array of my collision objects. now every thing seems to work for the left and right but this code here is giving me problems for the jump…

    because it only checks the collision of one object.
    so when ever it checks the collision on the jump it doesn’t work with the other collisions other than the “wall”.

    if (collide("wall",x,y+1)) {
    ySpeed=0;
    isJumping=false;
    if (Input.check(Key.UP)) {
    ySpeed=-jumpPower;
    isJumping=true;
    }
    } else {
    ySpeed+=gravity;
    }

    is there an array that i can place instead of “wall” I have tried but it won’t let me I have even tried an “OR”(||) between like collide(“wall”||”secondCol”etc…) but it gives me some pretty strange results

    thanks for any help and keep up the amazing work
    Bryan

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

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

  • To @Andy
    I think the problem is that the functions moveCollideX and moveCollideY must return a Boolean. Something like this:

    override public function moveCollideX(e:Entity):Boolean {
    xSpeed = 0;
    return true;
    }