Working with Flipbook Components in Blueprints is very similar to working with other types of Components in Blueprints. After adding a Flipbook Component to a Blueprint, you can specify the Source Flipbook asset to use, define the Flipbook's Play Rate or adjust the Sprite Color used in addition to standard options that are available to all components such as Transforming.
Inside the Graph tab, you can directly access and modify the properties of the Flipbook Component through your script. This includes things like adjusting the Play Rate, Playing, Stopping or Reversing the Flipbook, or even changing the Source Flipbook to a different Flipbook asset (useful for when you want to switch between Flipbook animations for a character for example).
This page will show you how to add, access and modify Flipbook Components in a Blueprints. For more information on Flipbooks themselves, see the Paper 2D Flipbooks documentation.
Adding a Flipbook Component
You can add a Flipbook Component to a Blueprint from the Components window of a Blueprint.
-
Inside a Blueprint, Left-Click the Add Component button inside the Components window and search for and add a Paper Flipbook.
-
After adding the Flipbook Component, you will be prompted to enter a name for the component.
You can then begin adjusting the Properties of the Flipbook Component inside the Details panel.
You can also add Flipbook Components to Blueprints by using Blueprint/Add Script option.
-
With a Flipbook placed inside your level and selected, head to the Details panel.
-
Click the Blueprint/Add Script button.
This will create a new Blueprint (prompting you to enter a name) and assign the Flipbook selected as a component of it automatically.
Flipbook Component Properties
There are several properties that can be adjusted inside the Details panel for a Flipbook Component, however the most critical are found under the Sprite section. It is here you define the Source Flipbook that should be used, define the initial Play Rate and Sprite Color for the Flipbook to use.
Click the None drop-down box to assign a Flipbook.
Any Flipbook assets will be available for selection in the pop-up window or you can create a new Flipbook asset from the option at the top.
You can enter a numerical value for the initial Play Rate inside the Play Rate box.
And finally, set the color for the Sprite to use with the Sprite Color option.
Collision Properties
Although it is possible to apply collision directly to a Flipbook (see Flipbook Editor Reference for more information), it is recommended that a collision shape be used instead for performance reasons. For example, you can use a Box, Capsule or Sphere Component in conjunction with a Flipbook to provide the associated collision results you need.
For example, clicking the Add Component button inside your Blueprint and search for Collision:
You can now apply different shapes to use as the collision for your Flipbook rather than specifying it on the Flipbook itself.
An example of such is indicated below.
Above we've created a simple blinking box Blueprint and added a Box Collision component to provide the collision for the box by changing the Box Extent values to encapsulate our box and changing the Collision Presets to Block All to provide the actual collision.
Working with Flipbook Components
When you are ready to start working with your Flipbook Component, you can head to the Graph tab and see it listed under the Components section of the MyBlueprint window, along with any other Components that were added to the Blueprint.
To access or affect the Flipbook Component in anyway, you will need to hold Ctrl and Drag-Drop the Flipbook Component into a graph.
This will Get the Flipbook Component at which point you can drag off it and call any number of Events or Functions on it.
You will see that there are some actions that can only be taken with Flipbooks if you search in the Context Menu for Flipbook.
This is where you can perform actions such as determining if the Flipbook is currently Playing, getting its current Play Rate, setting a new Play Rate, Starting, Stopping or Reversing etc. You can also get the current Source Flipbook asset as well as set a new Source Flipbook asset to use, which will switch the animation.
You can also access this by searching for Sprite which provides options for changing the Sprite Color as well.
Switching Flipbooks
An example of using the SetFlipbook node is provided below which is used to update the Flipbook motion being played.
Only works if the Mobility property on the Flipbook Component is set to Moveable or is called during construction of the Actor.
In this example, when the player character performs any movement, a Custom Event called Update Animation is called.
This Custom Event uses SetFlipbook for the Flipbook Component called Sprite (which is our player character) to Select either an Idle Animation or Running Animation based on whether or not the character's Velocity is above 0, meaning they are moving. If they are moving, the Running Flipbook is set as the Source Flipbook and if they are not, the Idle Flipbook is set as the Source Flipbook.
The result is the switching between Flipbooks animations as seen below.
You can also see this exhibited inside the 2D Side Scroller project template from the Project Browser under New Project.
Setting Play Rate
An example of using the Set Play Rate node to increase/decrease the playback speed of a Flipbook Component is illustrated below.
Above, inside our Character Blueprint we use a Left Shift Key Event to update the Max Walk Speed value (the speed of Character Movement) based on whether or not shift is held or not. We then update the Play Rate of our Sprite Flipbook Component (which is our playable character), doubling it when shift is held and setting it back to normal when shift is released.
The result is a character that moves faster when shift is held (along with the speed of the Flipbook).