Tutorial:Importing Animated GIFs

Currently, Resonite does not natively support importing animated GIFs. This open feature request is being tracked in ticket #1266.

However, you can import an animated GIF manually. This requires converting the GIF to a spritesheet and adding a few components to animate it. A spritesheet is a single image of every frame in an animation, laid out in a regularly-spaced grid.

An example of an animated GIF, made with Cool Text

First, you'll need an animated GIF, such as this one.

Converting to a spritesheet

This method requires each frame to be identical dimensions, so if you already have a spritesheet you want to animate, you will need to pad each frame out.

You can use Ezgif.com to convert an animated GIF to a spritesheet. The defaults are usually fine. Upload your GIF, click "Convert to Sprite Sheet!", scroll down, and save the resulting image.

The above gif converted to a five-frame 3x2 spritesheet

You can also use the `montage` command from Imagemagick if you're on Linux, for example:

montage cooltext-resonite.gif -tile x1 -geometry +0+0 -background "rgba(0,0,0,0.0)" -quality 100 cooltext-resonite.png

You'll need to know the total number of frames and the grid dimensions (in frames) of the spritesheet you've created.

Setting up the animation

Next, import your spritesheet into Resonite. It is recommended to import it as pixel art, to keep the pixels crisp. Open your imported image in an inspector.

Add an AtlasInfo, enter in your grid dimensions in GridSize and total frames in GridFrames.

Add a UVAtlasAnimator and drop the AtlasInfo component into the AtlasInfo field. Find the material on your spritesheet and put TextureScale and TextureOffset references in ScaleField and OffsetField, respectively.

Finally, for a basic looping GIF, add a TimeIntDriver. Put the Frame reference from the UVAtlasAnimator component in the Target field. Set Repeat to the total number of frames in your animation. Set Scale to the framerate you'd like your GIF to play at.