Animated Particles with the Particle Flipbooks Beta

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:

image2022-3-7_14-47-47

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:

image2022-3-7_14-48-39

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 with FlipbookStartRandom and 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:

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:
3

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!

436 Likes

This topic was automatically opened after 10 minutes.

The Particle Flipbook beta is absolutely awesome. I messed around with it when it was disabled by toggling the FFlag back on, and ended up implementing an explosion VFX into our studios games spell:

My only qualms with this would be that I’m a bit limited in terms of the flipbooks I can use (as I have several spritesheets that are 6x6, 7x7 etc), but I understand that pushing this feature out as a beta, and adding more functionality later down the line, is of a higher priority.

Going on a bit of a tangent, I am once again asking for a soft-particle equivalent on Beams, similar to what we have on ParticleEmitter objects :laughing:

90 Likes

This is really awesome! It’s been really cool to see particles gain more and more functionality.

Would it be possible to have a different means of displaying a “flipbook incompatible” message? The property is a bit awkward - it would be more useful if it could be displayed as an error message in Studio and in the output at runtime.

20 Likes

VERY cool feature! Glad it’s out! Can’t wait to see the amazing stuff that’ll come out of this! Definetly redeems the audio update(not really but kinda). The frame limit is kind of upsetting so I hope that it can be raised sometime in the future!

7 Likes

Awesome, looking forward to playing with this!
I do hope that the ability to upload spritesheets of a smaller size is a high priority for a later update to the feature, experiences focused on lowering memory usage are gonna have a hard time swallowing 1024x1024 spritesheets.

11 Likes

I think this will be a great update and make a lot of games improve by a lot.
I’ll make sure to check the update out soon!

Won’t the particles be low quality, because the image is only 1024x1024?

5 Likes

Unless the particle itself is going to be very big, then no. I used a 8x8 explosion spritesheet, and it worked out great for my usecases!

5 Likes

This seems like a great opportunity to ask for higher resolution images, to allow for higher resolution flipbooks as well as other textures :smile:

16 Likes

I was very excited about this feature (and even tested it some in the closed testing period), but the limitations are kind of leaving me disappointed.

Memory has always been an issue developers have to keep an eye on to get their games running well on all platforms, and being restricted to the largest possible image size for particles means that any and all animated emitters will be memory hogs compared to standard ones. This unfortunately went from one of my most anticipated features to a bit of a letdown, as I know I won’t be able to use them as freely this way.

I appreciate the thought behind getting the feature to us earlier, but I hope the restrictions aren’t permanent. Full control over grid size & being able to use other image sizes are important.

27 Likes

Pretty offput by the image dimensions being required to be as large as possible. I work to keep my texture memory impact as low as possible, so I wont be using this in a serious game until that’s different. I would be happy with very low frame rate simple animations, 4 frames tops.

The design decisions / implementation here feels rushed, granted this is only a beta. I really think this would be better arriving later rather than sooner to make sure API additions are future proof. It won’t be fun for Roblox to support this particular API forever if it happens to stick around. Please don’t rush particle emitter improvements, particle emitter shapes don’t even support attachments, and I fear things might slip here too and get stuck forever.

Other than that, this is awesome. Hoping to see more improvements soon.

24 Likes

Been looking forward to this for a while! Glad it’s finally here.

A year ago on THIS EXACT DAY, Envmaps were released, which is indoor reflections. Really glad to see this platform advance!

5 Likes

Just FYI, I don’t think anyone requested this feature. The closest feature request I could find is my own:
https://devforum.roblox.com/t/imagerectoffset-and-imagerectsize-for-particleemittertexture/35029

By the way, my request is solved with this since I can set the frame rate to 0 and use the random property to achieve the above. Thanks for that!

However, given that you had to make the API so bespoke and particular to deal with all of the limitations, and the fact that all these limitations are imposed on us, I don’t really understand why it couldn’t have waited for a more generic release. I really don’t like the inflexibility on the number of frames and the image size. I think there was time (given limited number of feature requests for this) to work a bit more on this before releasing it.

Also, none of these new APIs are non-scriptable it seems, so you have to support these forever since code might be invoking them.

I think a better way to release this feature would have been to wait until arbitrary image and flipbook sizes could be supported, so that the API didn’t have to be as bespoke and particular as it is currently. The rest of the limitations you point out are all supplementary and don’t affect the direct API.

Regardless, thanks for putting work into this! This is a good step forward for particles.

23 Likes

Have been waiting for this for a long time now. W update

26 Likes

This update is great, I hope this is the beginning of more spritesheet support on many other features. A single image is way more efficient than multiple, and things like spritesheet textures for meshes/decals would allow for a whole new world of animated effects and textures.

Also one thing, this could already be accomplished with billboards and image labels, and those are still way more customizable. Will particles eventually be a better option?

5 Likes

Looks pretty good! Is there any chance of getting simple physics into the particles?

9 Likes

https://streamable.com/uazm5t

↑ A small effect that use flipbooks ↑

Insane Update btw!!!

↓ Open souce ↓

123.rbxm (6.2 KB)

28 Likes

Amazing, thank you for sharing!

5 Likes

YEEES!!! I HAVE WANTED THIS FOR SOOO LONG. I APPLAUD YOU SO MUCH!!
:+1:

I’m gonna make so much heavy use of this.

3 Likes

And now I wait for some sort of free particle pack so I can mess with these.

Love the feature, great job!

1 Like