Repository navigation
03. Setting up the animation objects
The first step when creating a new character, is to create what’s called an Animation Source. This object works as the source of animations that the AnimationBlueprints can use to render the character and control its playback.
By default PaperZD comes with a “Flipbook Animation Source” which lets the system know how to manage and render flipbook animated characters, but other different sources can be created which can have other features (like being skeleton based and thus, being able to opt-in for blending support). First, right click on your content browser and go to the PaperZetaD section and create a new Animation Source:
ℹ️ Note: If there aren’t any extra Animation Sources supported besides Paper2D Flipbooks, the system will now create a new asset, otherwise it will ask you to first identify which type of Animation Source you want to create.
With the newly created Animation Source, which we named “MyAnimSource” we will begin the setup of the animations for our character:
The AnimSequence is the object that contains the Animation to be rendered, and any metadata pertaining to events inside it (like AnimNotifies). AnimSequences live inside an AnimationSource and thus, we need to specify one when creating a new AnimSequence.
One can create a new AniSequence either by right clicking on the content browser and selecting from the drop-down, like in the previous step, or inside the Animation Source Editor (TODO: Ist this the Animation Editor or the Animation Bliueprint Editor? Either way, add link).
When creating an AnimSequence from the drop-down the system will ask the user to specify to which Source this sequence should be attached. The type of the AnimSequence to be created depends on the AnimationSource you select, selecting an AnimationSource for Paper2D Flipbooks (TODO: Check if this is an actual THING in UE) will create a specialized AnimSequence for them, the user doesn’t need to worry about it.
We’ll call this AnimSequence “MyFirstAnimSequence”
After that, double click on either your AnimationSource or your AnimSequence, to enter the Animation Editor .
When first opening the asset, you’ll find yourself with the following view:
To the left, an asset browser will display all the AnimSequences that are currently parented to this AnimationSource, a single one should be displayed if you proceeded with the creation of your first AnimSequence in the previous step
Clicking on this AnimSequence will open the asset for edition, you should see a new tab appearing on the bottom-center part of the screen.
To the right side of the screen the Asset Details tab should also have been filled with the pertaining information of your AnimSequence.
Now, let’s specify the Flipbook that we want to use for rendering this sequence. We’ll use the Paper2D example content project animations, and select the Idle animation. After we select the animation, the Viewport and Timeline on the center should reflect the newly created Animation
We now have a simple AnimSequence set up, we can proceed and create another one for the walking behavior. Instead of creating it from the content browser, we can create one directly in this editor, by clicking on the +Add New button on top of the AnimSequence list.
This will create and select a new AnimSequence with a default new name
We can then set its Flipbook to be the Walking animation
ℹ️ NOTE: By default the AnimSequences created via this method are stored in a folder called AnimSequences which will be created on the same level as the AnimationSource. This behavior can be changed in the PaperZD Editor section in the Projects settings.
We can also proceed to rename our AnimSequences with a more recognizable name, let’s call them Idle and Walk respectively. Renaming can be done in the Animation Editor by simply clicking the animation and pressing F2.
With this we have the backbone for creating our animation logic, while there are other things we can do in this part of the editor, we’ll get back to those in later chapters.
For now, we will create our Animation Logic, by creating a new AnimationBlueprint that uses our AnimationSource as the base. As always, right click on your content browser, and select the following option (when prompted, choose your AnimationSource as the base).
We’ll call it “MyAnimBP”
This asset will open the “Animation Blueprint Editor”
When opening the Animation Blueprint Editor for the first time, you’ll see a familiar Blueprint Editor window, with an Event Graph and an added Animation Graph
Double clicking the Animation Graph enables you to modify the logic that the blueprint will follow to render the final animation.
As a simple approach, we will use a Select node to switch between our two already created animations, depending on the velocity of the Character, displaying the Walk animation when moving and the Idle animation when not.
Other nodes can also be used to specify more complex behavior, like using animation state machines. Those will be explained in later chapters. (TODO: Link)
With the animation logic created, we need to now specify that we want to use it with our character, for this PaperZD comes with a PaperZDAnimationComponent that can be added to any Class/Object to drive their animations.
The AnimationComponent requires the following data to be set to ensure correct behavior.
- AnimInstanceClass: This is the class of the AnimationBlueprint you have created and that you wish to use for driving the animations of this component.
- RenderComponent: The PrimitiveComponent that will be rendering the actual animation, for default behaviors (using Paper2D), this should be a FlipbookComponent.
Note: The RenderComponent should be compatible with the AnimationBlueprint that you specified.
For default Paper2D characters, PaperZD comes with a PaperZDCharacter that already sets up the RenderComponent to the main PaperFlipbook. If your goal is to create a simple Paper2D character, then inheriting from this class is a good option.
For example purposes, we’ll grab a default PaperZD Character and create a subclass of it. The character will simply route the Left/Right inputs
and we’ll set the AnimInstanceClass to point to our created AnimationBlueprint.
If we now hit play, we should be able to see the animation changing between Walk/Idle when moving and standing still.
