top of page

How to loop any PNG sequence in Spine 2D

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

the process of importing png sequence into spine
Import PNG sequence into Spine 2d

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


animating png sequence in Spine 2d by keying loop feature of the sequence attachment
Animating PNG sequence in Spine 2D

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

fading in and out a PNG sequence in spine
Fading in and out

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

shows how to loop a png sequence in spine by duplicating the slot and offsetting the fading in and out
Looping the sequence
 

Check full tutorial on Youtube


 

Project file available for sale


653 views0 comments

Recent Posts

See All
bottom of page