Atlas Textures and SubUV/Flipbook animation in material blueprints.

[Cestarian]

There is now a proper guide here: How to use Texture Atlases and Flipbook animation | Community tutorial

So I wanted to figure out how to do SubUV/Flipbook animation from a material blueprint, i knew it could be done with the niagara particle system very easily. But I wondered about doing it on the material itself, just for the purposes of displaying GIFs in the engine somehow…

Why? Well I just wanted to know if I could. I knew that atlas textures can be extremely useful for various things i plan on doing, and there are a lot of use cases for rendering gifs or short animations on materials like that (for instance for billboards, as in actual 3D billboards as part of an environment, not billboard sprites just to name one)

Information on the topic was surprisingly scarce, this video was all I could really find on using atlas textures and this on flipbooks. Which was enough to get me started but I encountered a lot of problems along the way.

• I had to figure out a way to convert GIFs or videos into spritesheets/atlases.
• I had to figure out a way to manipulate the UV paramaters to focus in on the correct parts of the spritesheet (luckily one of the videos covered that)
• I had to figure out a way to then animate it (luckily flipbook covered that and the other video taught me the basics).
• I also had to figure out a way to set custom FPS, how to specify an end frame (cut the animation short essentially, because sometimes the spritesheets have blank frames in them)
• I also wanted to figure out a way to prevent the animation from looping, e.g. just play the animation once and stop.

The data for how to do most of these things was already there on the internet, but I really had to dig a bit to find it so I’m dumping it here just to help others looking for the same I suppose. A mini tutorial if you will.

1. Convert a GIF to a Spritesheet
   Install Imagemagick, run this command: montage -tile x -geometry '1x1+0+0<' -alpha On -background 'rgba(0, 0, 0, 0.0)' -coalesce -quality 100 in.gif out.png and that’s it, you’re done. Works on video files too.
2. Basic UV Manipulation.
   You only need the custom primitive data parts if you intend to manipulate the material on a per-actor basis, as opposed to per material instance.
   
   
   
   
   
   
   The Uoffset and Voffset (Upos/Vpos) are out of frame but they are created exactly the same way as Htiles and Vtiles with a default value of 0.
   And that’s it, now you can set the rows(horizontal tiles) and columns(vertical tiles) using a scalar or custom primitive data to focus the material on the first tile, then use the UV Offset settings to specify which frame/tile you want to see.
3. Animating it
   This part was tricky as hell, because I wanted to be able to set FPS and skip those last few blank frames on my spritesheet, and this is how I ended up doing it.
   
   
   
   
   
   
   
   
   
   And now we have an animated sprite with a scalar or custom primitive data setting to skip the last X frames, set FPS and toggle animation on and off.
4. Lastly, to stop the animation from looping (play once)
   I tried to do this in the material blueprint but I just couldn’t figure out a way with the limited tools available in there, I was able to get the value of where to stop the animation just fine (you can see it with the unused endframe named reroute in the animation code above) but I couldn’t actually figure out a way to do anything with it. So I just did it in regular blueprint instead.
   
   
   
   I created a map with the default settings I want.
   
   
   
   Applied them (this is necessary because of how custom primitive data works, it doesn’t have any default values, only the values you feed them at runtime. therefore when using them you must always set every last one of them as you want for things to work right).
   
   
   
   Set the UVOffsets to the last frame of the spritesheet
   
   
   
   Counted the number of frames the animation will play.
   
   
   
   Used it to calculate animation length in seconds.
   
   
   
   Start the animation before this delay node, the delay node waits the same amount of time as we calculated the animation will take, then after the delay it stops the animation using the custom primitive data of the material bp and since we set the uv offset for the still image to the last frame it’ll look like it stopped on the last frame.

And that’s it, that’s how you can do it, I’ll just leave this lying here and hope it helps somebody.