Spritesheet animation glitch on loop

Hi Team,

I’m learning how to create sprite animations, and I have gotten as far as importing a png as a background image and selecting Create Sprite Sheet. Then I converted it to a Symbol and looped the Symbol timeline. However, the animated loop isn’t seamless when I preview it in the Browser. There is what looks like a white flash in one of the frames, possibly between the end and start of the loop. I’ve tried various methods to remove it, but it’s still there. I’ve tried using your antelope spritesheet png example and also a sprite sheet I generated from an online sprite character builder. Same results, a flash that makes the loop stutter and not appear seamless.

Can you offer any suggestions on how I can remove the glitch?

Thanks

#update#
I exported to HTML5 and when I view the exported HTML5 the animations are glitch-free.
Okay, so the glitch is only on preview inside Saola Animate.

Hi Evan,

Previewing animations on the Canvas in Saola Animate isn’t as smooth as those in the browser.
If you find it has a lot of glitches, you can send the project package via support@atomisystems.com so that we can check.

Regards,
Quynh

Hi Quynh,

When I run play in the timeline to preview on the Canvas the spriteAnims don’t run through their loops at all.

When I hit CTRL+F5 to preview in the Browser the anims run their loops but with the glitch.

However when I play the exported HTML5 file in the browser the spriteanims loop as they should and without the glitch.

Initially, I thought it was my graphics card showing its limitations while using Saola Animate… or maybe I just haven’t got the loop triggers set up quite right and the errors show up in the CTRL+F5 preview but not in the final export?

Hi Evan,

Preview in Canvas doesn’t support triggers, events and actions, you should preview in the browser or export to HTML5 for looping to work.

Maybe your preview just the current scene of the symbol document, or the current scene of the main document so the result is different from viewing HTML5 output.
Please exit symbol editing mode (to go to the main document) and press F5 to preview entire the main document to see if the glitch is removed.

Regards

Hi ToanLS

Maybe I am not explaining myself clear enough because what you are explaining for me to do is exactly what I am doing, I think?
Running F5 or Ctrl+F5 (doesn’t matter, only 1 scene) from the Scene Canvas/ main document (not the symbol edit mode) to access preview from the Browser. The Glitch is evident, I don’t think I imagine it, but then again, I could be?

It doesn’t matter; no worries, it’s not a biggy. It’s just a minor bug I will deal with by exporting to HTML5 to check that the sprite animation is running glitch-free every time I add a new animation to a project.

Like I suggested earlier, it could be my graphics card or something I’ve added to the looping that errors in preview but doesn’t in export? hmm

BTW I’m really enjoying learning how to use this program!

I’ve attached 2 little video captures. The first one is a capture from F5, preview in browser, from the main document, and the second one is captured after I have exported to html5.

Hopefully, you can see the glitches I can see.

1 Like

Yes, I can see the glitch but I’m not sure why it only occurs in preview.
You can ignore it if it doesn’t matter, otherwise you can send your project to our support email for further checking.

Regards

Hi Evan,

I’ve checked your project and see that the Start Symbol action is used to loop the animation.
This action will recreate the entire symbol and request the spritesheet image again.
Due to the implementation of Saola Animate preview server, the spritesheet image is fetched from the server (instead of fetching from the browser cache) in this case.
So the glitch occurs at that time.

To fix this issue, you can use the Start Timeline action to loop the animation.

Regards

Thanks for your prompt review, the glitch is now gone!
Oh, the subtleties!