Animated Particles with the Particle Flipbooks Beta

This is an amazing feature, I don’t think most people on the platform know how much you can push the boundaries of such a feature like this but I’ve recently spent the day having a lot of fun with it.

This is a seamless flipbook particle that I baked in real-time simulation which was driven by particles.

I hope to see more people making the most out of this.

23 Likes

That was always a thing if you messed with the colors and textures correctly (referring to the case in your video)

2 Likes

I’m having the same issue even though my image looks normal itself (using an 8x8 1024x1024)

1 Like

As Cryptic points out, that means your alpha doesn’t go to zero towards the edge of each frame (each tile in the larger flipbook texture).

Yes, one could add some kind of auto-blur towards the frame edge, but what shape should it be? Round, square? How thick? Some people use particles with hard edges that are opaque all the way to the edge, and an auto-blur would cut it off. Even an auto-blur that can be toggled is still not gonna work for all kinds of particle shapes.

At the end of the day it’s the creator’s responsibility to make sure the image/texture data isn’t clipped off at the edge.

Also, as someone else pointed out, it’s not really a flipbook specific issue. This very same thing can also happen with a normal static particle if the texture has semi-opaque pixels up against the edge. However, it does become slightly more apparent when using flipbooks, mostly because there are a lot of free “bad” flipbooks out there. Public domain animations that look great in a preview grid against a black background, but didn’t do the necessary diligence at the edges, and thus don’t work very well unless you manually tweak the alpha channel.

Sorry. I wish I had a more helpful answer (and, if anybody has a suggestion that I’m overlooking that would fix this, I’d be all ears of course – I’d love to be wrong about this).

8 Likes

While testing this feature I’ve noticed that the particle’s edges are being cut off despite the flipbook perfectly aligning to the grid. @JaapSuter

This makes it very difficult to have any sort of convincing particle.

23 Likes

Ah, yes. You’re totally right, I forgot about the UV-atlas-margin to prevent lower mipmaps from bleeding from one frame into the next.

Unfortunately, we still support a fair number of low-end older mobile devices (running GLES 2) that often lack textureQueryLod, which means we can’t query what mip level the pixel-shader uses, and thus we have to go with some kind of worst case assumption (in actuality, I went slightly below that, which means that tiny flipbook particles waaaaay far in the distance will actually bleed texels across frames, it’s just that it’s not really noticeable then anymore.

We’re currently gathering analytics on GLES 2 usage and forming a plan and timeline to deprecate it (please don’t freak out if you’re one of the few playing Roblox on a really old phone, it’s not all of a sudden disappear overnight, we’re just planning, that’s all). We already removed Direct3D 9 support last year, and when GLES 2 is finally gone a lot of things will become a lot easier.

…specifically, we’ll be able to use texture arays instead of a single 2D atlas texture for flipbooks, and all the edge bleeding and mipmap problems go away. Everything becomes simpler, and all those limitation we have today will be gone.

I guess what I’m saying is, if you know anybody that’s still playing Roblox on a really old GLES 2 Android phone, you should all do your part and buy that person a new fancier phone – it’s for a good cause… :laughing: hahaha. Sorry folks, I know I’m asking for a lot of patience here.

Meanwhile, back to the actual issue you show in the images; yes, you’re totally right. And I was wrong in my earlier statement about making sure to be translucent up the edge. It’s actually slightly worse than that; on an 8x8 flipbook (each frame is 128x128) you probably want to stay about 8 pixels away from the edge to be on the safe side. So put your graphics in a 120x120 square in the middle of each frame.

I’m bummed out that that’s the way it is right now. Sorry. It’s clunky. But hang in there, things will get better.

I’ll update the announcement to include a bit of info about the safety margin later this afternoon. Thank you for correcting my earlier statement.

35 Likes

Hey! Pardon my ignorance on the topic, but I’ve noticed issues with particles becoming noticeably darker the further away the camera would be from them — unless I misunderstood, is this also due to the old-platform compatibility limitation which you mentioned?

5 Likes

i would reduce each frame size so that all the content fits in a square with a tiny bit of extra space along the edges

3 Likes

Could we get the ability to specify framerates for oneshots, such that once the final frame is reached the particle will continue held on that frame? Perhaps setting the framerate to 0 on oneshot would make it use the correct rate to play through duration. The alternative for us is uploading a sprite sheet that repeats the last frame several times on 4x4 or 8x8, but that would severely limit quality and duration. Thanks.

6 Likes

Couple issues. While it is a really nice feature that is introduced, nearly every flipbook i deal with is 5x5, why isn’t 5x5 and other more common resolutions supported?

3 Likes

Dream’s finally coming true!!!

2 Likes

Loving this update, using this for bullet impacts.

https://cdn.discordapp.com/attachments/521389558269607956/955833634986815539/Comp_2.mp4

81 Likes


This update is probably one of if not the best VFX update that has happened in the past year. Absolutely huge for the VFX department of developers. Thank you so much for making this a possibility.

41 Likes

Another great feature from Roblox. This will allow VFX artists to make quality VFX much simpler than before.

3 Likes


In the sample, one of the particles have “Brightness” as a property. This is indeed a particles property but doesn’t show in any other particle, how do I enable this?

7 Likes

This seems so useful! I never really liked using particles very much because there’s always something I can’t do with them since they dont change texture like that, I feel like this is something I’ll end up using

2 Likes

Well so the interesting thing is that for the flipbook I was using in the example I posted, each frame fits pretty snugly inside even a 112x112 square, yet still gets cut off:

8 Likes

So excited to play around with these on my day off, this Thursday!
I usually spent every Thursday learning new Roblox features, and the rest of the week working on projects… can’t wait to learn and use this in my projects!

Awesome feature! <3

2 Likes

Dude, this effect is insane! I can’t wait to see what it’s used for!

image

35 Likes

Are there any resources where I can such flipbooks

2 Likes