Flipbooks, a.k.a. Animated Textures, for particle emitters, are now available as a beta in Roblox Studio. This allows you to use so-called flipbook textures (a.k.a. sprite sheets) to animate a particle’s texture over its lifetime.
Here’s the .rblx file from the video above, demonstrating the various features:
particle-flipbook-demo.rbxl (37.7 KB)
Enabling the Flipbooks Beta
To enable this feature, open up the “Beta Features” dialog, scroll down to “Particle Flipbooks” and enable it.
Then, restart Roblox Studio and you’re good to go.
If you want to quickly get your feet wet, open the demo .rbxl linked above to see the scene in the video at the top.
Using Particle Flipbooks
When you first insert an emitter into the scene, you’ll see the following new property:
As the property suggests, the particle emitter in its current form is not flipbook compatible. Therefore, the actual flipbook properties won’t display.
To remedy this, you’ll need a 1024x1024 texture with some flipbook frames, as either a 2x2, 4x4, or a 8x8 layout.
I’ll discuss the rationale for the size and layout limitations at the end. I’ll also provide some guidance on how to create these textures.
For now, let’s assume we have a flipbook compatible texture, like this 8x8 flipbook of an animated explosion:
Assign this to the particle emitter’s texture property, and you’ll notice the FlipbookIncompatible property disappears, replaced by the following FlipbookLayout property:
Great, we have a flipbook compatible texture now. However, we haven’t told Studio to interpret it as a flipbook yet. After all, you might be using a 1024x1024 particle texture that isn’t a flipbook, as many existing emitters do.
Using our example 8x8 explosion texture, we change the flipbook layout to EightByEight , and now the following properties appear:
Let’s discuss each property one by one.
FlipbookFramerate
This specifies how fast to animate the texture in frames-per-second. Note that like several other emitter properties, this property comes in the form of a min/max range:
This allows a per-particle random playback speed to be chosen (between the given min and max), adding an easy way for creators to subtly increase animation variability between particles from a single emitter.
FlipbookLayout
As mentioned before, this simply specifies how to interpret the particle texture, as one of:”
-
None– Not a flipbook, just use the texture as a single static texture over the particle’s lifetime. -
TwoByTwo– 2 by 2 frames, for a 4-frame animation (this doesn’t seem like a lot, but gets useful when combined withFlipbookStartRandomand a framerate of zero, more on this use-case below). -
FourByFour– 4 by 4 frames, for a 16-frame animation. -
EightByEight– 8 by 8 frames, for a 64-frame animation.
FlipbookMode
This specifies the type of animation from the following four modes:
-
Loop– Continuously play through all frames, starting back at the first frame after playing the last. -
OneShot– Play through the animation only once, at a rate decided by the particle lifetime (i.e., the FlipbookFramerate property no longer applies in this case, see note below). -
PingPong– Play from the first to the last frame, then in reverse from the last to the first, and repeat that. -
Random– Play the frames in a random order, still blending/crossfading from one frame to the next. This can be useful for organic particle textures at low framerates, think snowflakes slowly changing in an unpredictable manner as they fall from the sky, or stars slowly twinkling between subtly different shapes.
A note about OneShot animations:
As mentioned above, one-shot flipbooks do not have a framerate property anymore. Instead, the speed with which the animation plays is determined by the lifetime of the particle. For example, if each particle lives for 4 seconds and you have an 8x8 animation, the framerate would be 64/4 = 16 fps. If you then change the particle lifetime to 8 seconds, the playback speed would become twice as slow.
This feature is useful for flipbooks with a clear non-repeating animation, such as an explosion that goes up into a puff of smoke and then fades out.
FlipbookStartRandom
With this checkbox enabled, the animation will start at a random frame chosen per particle, rather than always starting at frame zero.
This is especially useful when combined with FlipbookFramerate set to zero.
“ But wait… ”, you’re thinking, “ why would I set the framerate to zero? Then nothing will animate! ”
That’s correct, but instead, you now have a particle emitter capable of emitting more than one static texture, chosen at random per particle. Whereas before you could only have a single texture used for every particle emitted, now, if you use an 8x8 flipbook texture, your one emitter can emit randomly from 64 different types of particle shapes.
Which I think is a cool feature. In fact, I predict we’ll see as many use-cases of such “static flipbooks” (as I like to call them) as we’ll see creators use fully-fledged animated textures. Especially since it’s arguably easier to create a static flipbook (as one only has to assemble arbitrary shapes into a grid) as it is to create a fully animated flipbook (as one needs to author a fully-fledged temporally coherent animation).
How to create a Flipbook Texture
Okay, to start, you’ll need to create the individual frames of an animation of course. This post is not going to address that. It’s assumed that you have a batch of image files (PNGs, etc.) lying around that you want to combine into a flipbook texture.
Some requirements:
- You have either 4, 16, or 64 frames.
- For a 4-frame 2x2 flipbook, the individual frames will be 512x512.
- For a 16-frame 4x4 flipbook, the individual frames will be 256x256.
- For a 64-frame 8x8 flipbook, the individual frames will be 128x128.
What if you have a different number of frames?
That might happen if you found some flipbook animation online (open-source, public-domain, or appropriately licensed). In that case, try to decimate the number of frames to one of the supported options. For example, I found a 128-frame animation, and simply used every other frame and discarded all the others to bring it down to 64 frames.
Of course, the best results will come from creating your own animations, designed for a given number of frames from the start.
Once you have each frame, you’ll have to assemble them into a grid. If you’re a Photoshop user, you can use the Contact Sheet automation for this:
Alternatively, a quick internet search for “ sprite sheet editor ” gives a few browser-based tools like these, which might help:
- Free Sprite Sheet Packer - A free alternative to TexturePacker
- Leshy SpriteSheet Tool - Online Sprite Sheet & Texture Atlas Packer
- https://codeshack.io/images-sprite-sheet-generator
Personally, I’ve used the freely available open-source Texture Packer tool available at:
Be sure to specify a fixed width and height (1024 by 1024), and disable “trim” and “rotate” as per the screenshot below:
Then hit export, specify the destination folder, and you’ll find a PNG in it that you can use for a particle flipbook in Roblox Studio.
About those Flipbook Limitations
Some of you are wondering:
- Why the 1024x1024 size limitation, why not arbitrary sizes?
- Why only 2x2, 4x4, and 8x8 flipbooks, I have a different number of frames!
- Why can’t I just drag and drop a bunch of PNGs onto Roblox Studio, and have it figure everything out automatically for me?
- Or better yet, why can’t I upload animated GIFs or short MP4 clips?
- Why is there no frame-editor, where I can rearrange frames, or change their individual duration?
The short answer is that adding support for any of those additional features would delay flipbooks longer than necessary. While arguably the process to manually assemble a flipbook texture isn’t ideal, and the 4, 16, or 64 frame animation limitation feels slightly arbitrary – these two constraints allowed us to get flipbook support in the creator’s hands now.
Better support for animated textures in Roblox (both in terms of user-friendliness and flexibility) is part of a larger goal for Roblox Studio. We can’t make any commitments what improvements in this area will look like, or when they’ll ship. But we acknowledge that today’s flipbooks are just the beginning of the kinds of power we’d like to give creators in Roblox Studio – so please stand by.
In the meantime, we hope to have plenty of creative uses for flipbooks, even in their current limited form. The more this beta feature gets used, the greater the likelihood that we’ll promote it out of beta, and the bigger the chances that we’ll make gradual improvements to it. So to some extent, you’re in control of its destiny.
Enjoy!
