Skip to content

A5 - Importing Character Animations

Run update.bat - it will create a new folder within Unit 4 called anim-example. Open the folder in Visual Studio code, and run the file game.py.

Next, have a look through the game.py file. It should be pretty straightforward. You might notice, however, that game.py contains no information about the animations. For these, you'll need to open the anims subfolder, which contains two types of files:

  • spritesheets (files ending in .png)
  • configuration files written in YAML (files ending in .yml)

YAML is a popular language for writing configuration files. If you'd like, you can find more information here, but understanding the examples below should suffice for us.

The Slime Animation

You'll notice the slime references the visual anims/blue_slime.yml. If you open this file, you'll see the following YAML code:

type: anim
basePath: :resources:/images/enemies/
defaultFrameRate: 5
frames: [slimeBlue.png, slimeBlue_move.png]

This file contains four key/value pairs:

  • type: anim indicates that this sprite only has a single animation
  • basePath: ... specifies the folder where all images for the animation will be found
  • defaultFrameRate: 5 indicates that the animation will run at 5 frames per second
  • frames: [....] is the order of the filenames that will be used as animation frames.

The Bird Animation

Unlike the slime that uses two images built into the arcade module, the bird uses several frames from a spritesheet we downloaded. The YAML code for the bird animation is below:

type: anim
basePath: anims
defaultFrameRate: 8
spritesheets:
  birds:
    file: birds.png
    sprite_width: 64
    sprite_height: 64

frames: [$birds:5:0-3]

You'll notice some similarity to the slime animation file, but with some new additions:

  • There is a spritesheets section. Inside this section, we start a subsection for each spritesheet we use. In our case, we only have one. We can choose any name we'd like for it; in our case, birds is appropriate. We then need to specify the location of the spritesheet, and the width/height of each sprite within the sheet.

  • The most confusing part is the frames list, which here is $birds:5:0-3. This indicates that the frames we want are from the birds spritesheet, row 5, columns 0-3.

The Player Animation

This is the most complex one. Click on each icon below for a description.

type: anim_group # (1)!
basePath: anims
defaultFrameRate: 20
spritesheets:
  walk:
    file: player_walk.png
    sprite_width: 64
    sprite_height: 64

anims: # (2)!
  up: 
    frames: [$walk:0:0-7] # (3)!
  down: 
    frames: [$walk:2:0-7]
  right:
    frames: [$walk:3:0-7]


key_binding_config: # (4)!
  up: # (5)! 
    anim: up # (6)!
    freeze_frame: 0 # (7)!
  down: 
    anim: down
    freeze_frame: 0
  left: 
    anim: right
    hflip: True # (8)!
    freeze_frame: 7
  right: 
    anim: right
    freeze_frame: 7

  1. This file defines multiple animations for the same sprite.

  2. This section defines the animations the sprite will have. There is no left animation here, since it is just a mirror image of right.

  3. This line tells us that the up animation will use the walk spritesheet, row 0, columns 0-7.

  4. This section indicate which animation will play for each player direcion.

  5. Subsection for when the up key is pressed.

  6. The animation that will be played.

  7. The animation frame that we should freeze on when the sprite stops moving but is still facing upwards.

  8. The animation will be horizontally flipped (so the player faces left rather than right)

Your Task

Part 1

Replace the player animation with an animation you created in Vitruvian LPC Studio. All you should need to do is replace the player_walk.png file with the walk spritesheet you exported. You can keep the same YAML file.

Part 2

Create a new sprite, with an animation similar to the slime. Specifically, it only needs to have one animation, and it should use multiple images as opposed to a spritesheet.

Extension

Create a new sprite, with an animation similar to the blue bird. This will require you to find your own spritesheet, and to create a YAML file that works with it.

For more information about working with spritesheets, check out the Collecting Game Asses page.