Welcome to this tutorial! Today, we will be exploring how to animate a fire PNG sequence using Spine 2D. By importing the sequence and animating it, we can create a seamless loop. To achieve this, we will duplicate the sequence and overlap it with a half cycle offset. So let's get started and make some magic together!
Import PNG sequence into Spine
Copy the sequence into your Spine project directory
In Spine drag the first image of the sequence which will create an image attachment
Select that attachment and convert it to sequence attachment
Remove the index from the attachment's name and add it in the properties panel
Animating PNG sequence
Simple animation
Switch to Animate Mode
Set desired FPS, Spine by default uses 30 FPS
On frame 0, select the attachment and key the loop under sequence parameter
Move the playhead on the frame that matches the sequence length and key the loop again, this will make sure we have exact length of animation we need for our sequence
Fading in and out
Fade In
On the 0 frame select the slot that contains the attachment and set the opacity to 0. If you have autokey enabled that will create a key for us automatically, otherwise create it manually
Move the playhead few frames and change the opacity back to 100
Fade Out
Move the playhead at the end, leaving few frames to fade out and key the slots opacity, this will make sure the attachment will be 100% visible up until here.
At the final frame select the slot and set the opacity to 0
Looping PNG sequence
Change back to setup mode
Select the slot and duplicate it
Select yes in popped up window to copy animation as well
Go back to animate mode
Select duplicated slot
Rearrange color keys
Lastly offset the sequence animation half a cycle
Check full tutorial on Youtube
Project file available for sale