Hi

Animated gifs will not show as animating when drawn into a HTML5 canvas.

If you wanto to have an animated sprite, you need a PNG file where all the frames are next to each other, like this

I think animizer (as many others) offers the option to convert an animated gif into something like this picture above.

This video here (watch from about 3:05) explains how to add that as an animation of your sprite.

Maybe it's sudden , but I would try to use SVG file  with the  <animateTransform> element  

The result you can see here

But it work not everywhere.

I tested only in:

chrome 61.0.3122.0  canary (64 bit)  +

chrome 58.0.3029.110 (64-bit)  +

chrome  59.0.3071.86  (64 bit)  +

opera 45.0.2552.888 (PGO)  +

firefox 53.0.3 (32-bit)  -

Also strongly must be a wade.forceRedraw(layerId) function, in update function or only one svg be animated

I would like to know what thinks Gio about it

Thanks Gio,

Finally got it working. Animizer has option to "download as sprites" which gives the desired set of images in one file.

Also autoplay does not seem to work in my version (3.6.1). Documentaton says it should start if it is the only animation.

I had to add

this.hexSprite.playAnimation("sparkle");

Thanks again for your help

@Krumza

That's really cool. Unfortunately, like you said, browser support for that isn't very good at the moment, it only works in some browsers.

Currently you need to call wade.forceRedraw but that's only because of a bug, that is being fixed in version 3.7. You really only need to set the sprite(s) to AlwaysDraw.

@Adrian Browne

Thanks for pointing that out - I think we need to update the documentation. The recommended way to get an animation to auto-play is to set its Active flag.

Technically it is true that if there is only one animation it will play, however depending on how you create the Sprite, it is very easy to end up with a default static animation without realising it.

We are updating the whole documentation system for the next release, hopefully it will be easier to find this information.