How can I have particle effects appear behind GUI elements?

I’m trying to figure out how to construct a GUI with some particle FX. I have them showing up in the UI but they appear in front of the other nodes regardless of how I set the Z order, layers, etc. Can anyone explain how this process is accomplished?

This is going to need a custom render script probably. As far as i understand, z-order only matters within a render predicate. Otherwise, predicates that come later in the script draw later, on top. I might be wrong about this, but it worked for me a while back trying to layer z-order to particlefx combined with GO sprites.(for my use case it was enough to assign sprite material to particlefx. Whatever makes them require their own material/predicate wasn’t necessary for me in this usage). With GUI it’s weird, though, and I’m not quite sure. Since GUIs use “layers” instead of z-ordering (BTW defold team, this really breaks UX for me. I understand they’re supposed to always appear “on top” of GO/camera view, but it somehow feels clumsy using a whole different ordering system)…

2 Likes

I’ve tried modifying the render script but regardless of the order I put the particle_pred it always appears on top.

Are you actually using a gui particle node, or a GO with pfx attached z-mixed in with gui GOs somewhere? I would THINK gui pfx node should follow the gui layer rendering order. If you’re using a pfx node in the GUI, properly layered, what happens if you change the pfx material to gui material?

1 Like

Ah sweet! Thank you, I moved the particle fx to the go object and now the render order is working. I did have to position it strangely far below the menu in the collection for it to show up at the correct position. However, it looks right now. :slight_smile:

1 Like

It’s probably not “the right way to do it,” but it’s the sort of test I would do to try to figure out what is happening in the render script that is causing it not to work the way I’d expect, so I could do a deeper dive later to figure out what’s going on. If it works for your case, though, it works.

1 Like