Top

Paint Animations

Aseprite is an integral part of the Murder sprite workflow.

In this lesson, we will build animations for a character that moves around. Each direction of motion – up, down, left and right – will have its own associated animation sequence.

And the best way to build those animations for a Murder game is Aseprite.

Many graphic editors can handle everything from photos to illustration. Aseprite isn’t like that; it was created for the sole purpose of building pixel art animations for games. It’s available for a low cost – free, if you build it yourself from source code – and it’s well worth it for pixel art game development.

Murder’s resource workflow couples together nicely with Aseprite files. So, we’ll be using it for this demonstration.

In this chapter we’ll discuss:

  • Creating animation loops
  • Setting the pivot point
  • Saving the animation in the Resources folder.

Create Graphics

  1. Start by creating the animations for the character. As discussed in the previous section, you can build as many or as a few graphics as desired. Usually when building the first cut of a character, it’s fine to build just one animation frame for idle in each direction required.

    As we proceed through this lesson we’ll be developing a robot character in Aseprite. This robot has six animations:

    • Facing south (down) - 1 frame
    • Walking south - 4 frames
    • Facing east - 1 frame
    • Walking east - 4 frames
    • Facing north - 1 frame
    • Walking north - 4 frames
    • Facing west - 1 frame
    • Walking west - 4 frames

    Robot Walking Animation - Shows robot walking in four directions

    As the robot looks the same walking west as it does walking east, we make use of “sprite flipping” to cut the west frames out of the picture. This means that we used a total of 15 frames to build this robot character.

    The walking frames are considered to be a “loop,” as the four frames will repeat endlessly.

Create Loops

  1. Aseprite allows you to name and organize these loops using the F2 key. Assigning a name makes it easy for Murder to reference specific animations.

    Two “loops” named “idle_e” and “walk_e”

    Murder will import these loop names to assist in building these animations. It prefers certain names, so it’s good to name them according to these conventions. The robot character above has the following naming conventions:

    • idle_s - Facing south
    • walk_s - Walking south
    • idle_e - Facing east
    • walk_e - Walking east
    • idle_n - Facing north
    • walk_n - Walking north

    Suffixes - showing how “walk_e” is flipped for sprites facing left.

Slices and Pivots

  1. Aseprite also allows an artist to designate a “slice” with a pivot point. While Aseprite uses “loops” to divide animations over time, “slices” are used to divide animations up by visual space. Generally you will want the pivot point to be the bottom center of the character. For humanoids, this pivot would be between their feet.

    To set this pivot point in Aseprite, use the Slice tool, that looks like a utility knife. It might be hidden behind the Move tool. The keyboard shortcut for the slice tool is Shift+C.

    Slice tool in Aseprite

  2. Draw a rectangular “slice” around your entire character sprite.

  3. Then double-click the tool to edit properties.

    Slice Properties dialog in Aseprite

  4. Check the checkbox beside Pivot and enter the coordinates of the pivot point. It will show up as a light blue square in the window.

    If you made a slice that's too small, Aseprite might not do anything when you double-click. But fear not -- when the Slice tool is active, there's a dropdown at the top of the screen. You can select the slice with the dropdown, and then click the "Properties" button beside the dropdown to access the properties dialog.

    Slice Properties button in Aseprite

    When you’re done it may look something like this:

    View of robot graphic in Aseprite. A timeline is visible, showing four frames each for loops named idle_s, walk_s, idle_e, walk_e, idle_n, and walk_n. The fourth frame of walk_s (frame 8)is visible.

    Notice the small blue square – that is the Pivot for this sprite. Consider setting a pivot point at the base of the character’s feet: this will make manipulating the character easier within Murder.

    If you’re interested in getting this sprite, download it here:

    robot.aseprite

    Before you leave Aseprite, check to make sure the Color Mode is set to RGB Color. Murder Engine won't recognize your sprite file if it's set to Grayscale or Indexed.

    Aseprite menus showing that Color Mode is set to RGB Color

Save the Files

  1. When the Aseprite file is complete, it should be saved within the Murder project.

    In the root of The Hello Murder project there is a /resources folder. Any .aseprite files saved in this folder will automatically be imported into the game’s Atlas when the game application has window focus (i.e. after an Alt+Tab).

    Consider your game’s structure before saving files in this folder; a common practice is to organize files in a subfolder such as resources/images/characters.

    Depiction of the resources folder within the project folder.

Next steps

In the next section we will discuss the Atlas import process for Murder, and add the Sprite resource.