4 - Sprites and Animation

Edit

So we have a player sprite that moves around the screen. Great! But… we don't want it to just look like a block… so let's add some graphics!

First, you need to have the sprite's graphic. Using your image editor of choice, you can draw pretty much anything you want, and save it as a transparent .png. For our player sprite, we're going to have it be made up of 16x16 pixel frames, with two different frames for each of the 4-possible facing directions (left and right are used by the same 2 frames, since we will be flipping them later).

You can draw it yourself, if you want, or use this image, created by my friend Vicky Hedgecock for this tutorial:

Save your file in assets/images.

Now we need to actually load the player's graphic into the sprite. So, bring up your Player class again.

  1. Remove the makeGraphic() call from your constructor, and replace it with:

     loadGraphic(AssetPaths.player__png, true, 16, 16);
    

    This tells your sprite to use the player.png graphic, that it's animated, and that each frame is 16x16 pixels. AssetPaths is a class generated by a neat Haxe macro which builds its variables from the contents of your Project.xml's assets tag. Macros are a little complicated, but worth taking a look into at some point. In this case, we use AssetPaths as an easy way to reference our assets in code. Note that we could also just use a raw string path like "assets/images/player.png".

  2. Next, we want to allow the sprite to be flipped based on its facing value. This makes it so we only need sprites for one direction (left), and not two (left and right).

    Add the following:

     setFacingFlip(FlxObject.LEFT, false, false);
     setFacingFlip(FlxObject.RIGHT, true, false);
    

    All we're doing here is saying that we don't want to flip anything when facing left (because our sprite already faces left), and to flip horizontally when facing right. We could do the same for up and down if we wanted.

  3. Now, we need to define our animations. In our case, we want each animation to end with the player in their 'neutral' pose (legs together), that way each time we animate the player, it will return to the correct frame as soon as they stop animating. So, add:

     animation.add("lr", [3, 4, 3, 5], 6, false);
     animation.add("u", [6, 7, 6, 8], 6, false);
     animation.add("d", [0, 1, 0, 2], 6, false);
    

    We're finished with the constructor changes, the final step is to change our updateMovement() function to tell the player sprite which way to face. So, modify our section which deals with setting the player's angle to look something like this:

     var newAngle:Float = 0;
     if (up)
     {
         newAngle = -90;
         if (left)
             newAngle -= 45;
         else if (right)
             newAngle += 45;
         facing = FlxObject.UP;
     }
     else if (down)
     {
         newAngle = 90;
         if (left)
             newAngle += 45;
         else if (right)
             newAngle -= 45;
         facing = FlxObject.DOWN;
     }
     else if (left)
     {
         newAngle = 180;
         facing = FlxObject.LEFT;
     }
     else if (right)
     {
         newAngle = 0;
         facing = FlxObject.RIGHT;
     }
    
     // determine our velocity based on angle and speed
     velocity.set(SPEED, 0);
     velocity.rotate(FlxPoint.weak(0, 0), newAngle);
    
     // if the player is moving (velocity is not 0 for either axis), we need to change the animation to match their facing
     if ((velocity.x != 0 || velocity.y != 0) && touching == FlxObject.NONE) 
     {
         switch (facing)
         {
             case FlxObject.LEFT, FlxObject.RIGHT:
                 animation.play("lr");
             case FlxObject.UP:
                 animation.play("u");
             case FlxObject.DOWN:
                 animation.play("d");
         }
     }
    

    Every time this function gets called, it will check to see which of the directions the player is pressing, and, based on those, which way the sprite should be facing, and which animation should be playing..

  4. Save your changes and run your project, and you should see your player sprite animate while being moved, and facing the right direction!

Next, we'll talk about maps and collision!