2D Animation with Flipbooks

Flipbook is a feature of Paper 2D used for creating 2D animation with Sprites. In this article we will see how to use Flipbooks to animate a fighter.

Let's use the image below that contains the Sprites of a fighter doing various movements. This fighter is from an old version of MUGEN.

Click to enlarge

Create a new empty project without using the Starter Content and create a new empty level. In the Content Browser, create a folder named "FighterSprites" and import the image above into this folder. Rename the texture to "Fighter". Right click the texture and choose "Sprite Actions -> Apply Paper2D Texture Settings". Save the texture.

(version 4.8)

Choose the option "Sprite Actions -> Extract Sprite" :

In the "Sprite Extract Mode" select "Grid" and put in the size of sprites 104x124:

Click to enlarge

Now let's create the Flipbooks with some animations of the fighter. Select the sprites with indexes from 0 to 5 (Fighter_Sprite_0 to Fighter_Sprite_5). Click with the right button and choose "Create Flipbook":

Click to enlarge

Rename the Flipbook created to "IdleAnim". This is the animation that the fighter will use when it is not moving. Double-click the flipbook to open the Flipbook Editor:

Click to enlarge

On the property "Frames Per Second" put the value 10. This needs to be done for all Flipbooks we will create in this article.

You need to make some adjustments in the sequence of sprites of "IdleAnim". The animation uses sprites in that order { 0,1,2,3,4,5,4,3,2,1 }. So we have to duplicate the sprites 1 to 4 and put them in reverse order at the end of the animation. To duplicate, click with the right button on a sprite of the animation and choose "Duplicate":

Then just click and drag the sprites to the correct position. The "IdleAnim" looks like this:

Click to enlarge

In the Content Browser select the sprites with indexes 6 to 21 and create a flipbook named "WalkAnim". Change the "Frames Per Second" to 10.

Select the sprites 34, 35 and 36 and create the flipbook "PunchAnim". The sequence of "PunchAnim" is {34,35,36,36,35,34}. Note that the sprite 36 occupies two frames of the animation. The Flipbook editor lets you define how many animation frames a sprite takes:

Click to enlarge

The flipbook "KickAnim" is much like the "PunchAnim". It uses sprites 37, 38 and 39 and the animation sequence is {37,38,39,39,38,37}.

Now let's create the fighter's Blueprint. It will be of the type "PaperCharacter":

Click to enlarge

Put the name of "FighterCharacter" for this new Blueprint and open the blueprints editor. A "PaperCharacter" has a flipbook component with the name "Sprite". Select it and choose "IdleAnim" as "Source Flipbook":

Create the following Boolean variables:

To control the fighter, we will use the right and left arrows to move, the left Shift to punch and the left Control to kick. The image below shows the Input events:

Click to enlarge

The animations that we will use have different characteristics. One will run in reverse and some remain in loop. To simplify, create a Macro named "Play2DAnimation" and set the following parameters:

The "Flipbook Component" parameter is a "Paper Flipbook Component". The "Animation" parameter is a "Paper Flipbook".

The Macro has the following actions:

Click to enlarge

The Fighter actions are handled at the "Tick" event. If the fighter is attacking, then no new command will be done until the attack animation finishes. The images below show the actions of the "Tick" event.

Click to enlarge

Click to enlarge

You can add a background and a camera in the same way that was done in the article "Paper 2D Game: Sprites and Camera". The "Fighter" blueprint can be defined as "Default Pawn" in a "GameMode". If you do this, do not forget to put a "PlayerStart" in the level to indicate where the player will start.

A "PaperCharacter" is already configured to use gravity automatically. If you do not want to use gravity, just put the value "0.0" on property "Gravity Scale" of the component "CharacterMovement":

Next: 2D Levels with Tile Maps
Prev: Paper 2D Game: GameManager and GameMode 
Table of Contents