How do I make performance-friendly fog effect?

1 favourites
  • 6 posts
From the Asset Store
Firebase: Analytics, Dynamic Links, Remote Config, Performance, Crashlytics on Android, iOS & Web Browser
  • I need an effect like this:

    https://www.dropbox.com/s/fuvcgcj1qfrfz ... .capx?dl=0

    But the problem is, within 10 seconds as more particles are created, the FPS drops significantly, especially on mobile.

    Is there another way to make this random fog/smoke, which does not affect the performance?

  • I think you got the best way since I played an hour in a project with various effects and objects trying to get it done, but I only saved maybe 0.5% cpu usage in a minute, but it's quite random of course. It also kinda loses it's fog resembalence as you try to turn down the usage. My personal conclusion..

  • A rough idea would be to use one or more perlin noise textures moving around, then use a gradient sprite to have it fade. You can use the particle effect too but with a much smaller spray rate, it's only needed for the little pixies.

    Here's a proof of concept:

    https://www.dropbox.com/s/77v8r2wp0nwpi ... .capx?dl=1

    Multiple instances of the same noise texture randomly scaled and moving forward with random speed and angle. I also threw a sine on the opacity for more variance. I then used a gradient and a solid sprite so everything fades to black. If you use images with alpha instead of b/w you could probably use a blend mode instead.

    One thing i didn't address is if you watch it long enough you will see the edges of the sprites pass by. Some way to wrap it around would be nice.

    Actually if you feather the edge of the noise texture and throw it in a particle object with a low flow rate you can get close to the same effect. Just use the blending trick.

    Anyways just some ideas.

  • R0J0hound

    that example is really awesome! with more images and other shapes we can make more cool fog effects.

  • Holiday, I actually found that capx here on the forum.

    Thanks, R0J0hound !

    You example does work a bit faster. I have an old Android mobile phone that I use for performance testing and it's showing 45-50 fps. (about 10 fps more than with particles)

    Unfortunately, the Subtract effect is still quite slow on mobile. When I add two big gradients like that into my game, fps drops from 50-60 to 20-30...

    So I think I'll have to use particles, but lower quality.

    If I make the image smaller, significantly reduce the rate and fade out time and move them closer to the borders of the screen, the fog looks good enough and only costs 2-3 fps.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I need an effect like this:

    https://www.dropbox.com/s/fuvcgcj1qfrfz ... .capx?dl=0

    But the problem is, within 10 seconds as more particles are created, the FPS drops significantly, especially on mobile.

    Is there another way to make this random fog/smoke, which does not affect the performance?

    I had created a tutorial on fog effect sometime back. You can watch it and hope it helps you.

    Check it out.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)