Performance-friendly blur or similar effect?

  • I need to apply Blur to a large background image. The idea is to hide small details on it, so that people couldn't figure out what's on the picture, until I remove the blur.

    Unfortunately, it's really slow on mobile. I tried Blur Horizontal+Blur Vertical. And also these two effects - they are even slower..

    Since it's a static image, is it possible somehow not to update it on every tick? Or is there another way to blur the image (with masks or something else)? Or a similar effect that is less performance-hungry? My last resort is pixellate effect, but it doesn't look nice.

    Tagged:

  • the best option performance wise might be to pre-blur the image in photoshop, and have the blurred version as a second frame that you can switch between.

  • Can you have 2 versions of the image? One blurred and not then swap them

  • No, sorry, forgot to mention that I want to remove the blur effect slowly, over several seconds. Also, there will be more than a hundred large images, adding blurred versions of them will significantly increase the app size.

  • Can you not use the opacity on the blurred image to fade it out. With lerp for example?

  • I guess it really does come down to optimizing for size or performance. You can probably get away with making the blurred version of the image rather small though.

  • Asmodean You mean show blurred version of the image above the original, and fade-out the blurred one? It will not be the same as slowly decreasing the blur intensity, but probably pretty close.

    I guess I can activate the blur effect on the image, paste it on a Drawing Canvas, then disable the blur. And then fade out the Drawing Canvas.

    Thank you all for the useful ideas!

  • Blur simple. Simple as it can get.

    1drv.ms/u/s!Ap-ffJJPoln1i3FcZMJE2RwbHmNt

  • Blur simple. Simple as it can get.

    https://1drv.ms/u/s!Ap-ffJJPoln1i3FcZMJE2RwbHmNt?e=snPwtE

    Um that's perhaps a bit too simple.

    Subscribe to Construct videos now
  • Have you thought about just applying the blur effect when you want to do the transition?

    You show the image with the blur effect baked in, then when you want to make the transition into the sharp image, you remove the pre-blurred image and start showing an instance with the blur effect.

    Of course, if the mobile device you are aiming for is too much of potato, then it won't even be able to handle that.

  • > Blur simple. Simple as it can get.

    > 1drv.ms/u/s!Ap-ffJJPoln1i3FcZMJE2RwbHmNt

    Um that's perhaps a bit too simple.

    You wrong on this one. It's so "simple" it literally gives performance and adds blur for bonus. When all other blurs add massive perf impact.

  • It didn't do anything noticable.

  • It didn't do anything noticable.

    Well you have to enter numbers from 1-10 first. :)

  • I apologize.

    It doesn't work on Tiled Backgrounds.

    Or layers.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • It doesn't work on Tiled Backgrounds.

    Or layers.

    Or rotate the image. There are always limitations.

    Built-in blurs are made for quality, it could be possible to change for less quality but better perf, etc.

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