Hello,
I want to apply a blur effect to a background group that has many childs, is it possible to do with Graphics 2.0? I’ve tried to apply the effect to the group but is not possible, only to fills…
Can someone help me here?
Thanks!
Not really sure if this will work as expected however here’s a function that will add a blur to a group.
local addBlurEffect = function(grp, blur) local innerSnapshot = display.newSnapshot(grp.width+blur/2, grp.height+blur/2); innerSnapshot.canvas:insert(grp); innerSnapshot.canvasMode = "discard"; innerSnapshot.fill.effect = "filter.blurGaussian"; innerSnapshot.fill.effect.horizontal.blurSize = blur; innerSnapshot.fill.effect.vertical.blurSize = blur; innerSnapshot:invalidate("canvas"); local outerSnapshot = display.newSnapshot(innerSnapshot.width, innerSnapshot.height); outerSnapshot.canvas:insert(innerSnapshot); outerSnapshot.canvasMode = "discard"; outerSnapshot:invalidate("canvas"); return outerSnapshot; end local circle = display.newCircle( 0, 0, 100); circle:setFillColor(1,0,0); local square = display.newRect(100, 100, 100, 100); square:setFillColor(0,1,0); local grp = display.newGroup(); grp:insert(circle); grp:insert(square); local blurryGroup = addBlurEffect(grp, 300); blurryGroup:translate(display.contentCenterX, display.contentCenterY);not sure this will work with animated elements, but thanks for the hint I’ll further investigate on this one.
What I want is to get an animated background with multiple elements blurred while I popup something.
No. This is intended for static objects only. It’s not suited for animated objects as it’s currently written.
Ingemar is pretty much there, although there’s no need for the nested snapshots - one is enough.
You’d just shift everything into that snapshot’s .group property, then invalidate.
If you want something animating, you’d need to keep calling invalidate - the easiest way is to set up and enterFrame listener which does precisely that (but make sure it is only when the snapshot is in use to prevent using up the GPU unnecessarily).
I’m not entirely up to date with the new snapshot options, but I don’t think you need to set the canvas mode to “discard” nor invalidate with the “canvas” property.
My only other comment would be to possibly make the snapshot a tiny bit bigger than the screen. Filters which affect the borders can have varying degrees of success, and I’m not sure what the effect would be for blurring. Chances are it is ok, but if not, making it a bit bigger than the actual area you show could well help.
The reason I have two snapshots is because on device I saw that the blur was causing severe performance problems.
With only one snapshot the blur effect has to be calculated on each frame. By having the second snapshot the blur is rendered to the texture of the second snapshot.
I tested this with a ridiculously large blur of 300, which runs fine when using two snapshots, but fails miserably with only one snapshot.
Ah gotcha. Must admit ive never done any blurs of anything over a few pixels. Great solution 
I have to admit that I haven’t wrapped my head around the new snapshot options yet either.
I’m still experimenting…
Hey Guys, thanks very much for the information. I just was wondering if there was some tipe of prostprocessing layer on Corona like it’s on other platforms that just process the image buffer in real time without much hassle.
It would be great if corona implemented some type of transparent “group shader” or something like that and you apply it the same as you do with fills.
Anyway, thx again!
Have you tried just placing everything in a fullscreen snapshot, applying a filter on the snapshot and calling snapshot:invalidate() on every enterFrame?
Not really sure if this will work as expected however here’s a function that will add a blur to a group.
local addBlurEffect = function(grp, blur) local innerSnapshot = display.newSnapshot(grp.width+blur/2, grp.height+blur/2); innerSnapshot.canvas:insert(grp); innerSnapshot.canvasMode = "discard"; innerSnapshot.fill.effect = "filter.blurGaussian"; innerSnapshot.fill.effect.horizontal.blurSize = blur; innerSnapshot.fill.effect.vertical.blurSize = blur; innerSnapshot:invalidate("canvas"); local outerSnapshot = display.newSnapshot(innerSnapshot.width, innerSnapshot.height); outerSnapshot.canvas:insert(innerSnapshot); outerSnapshot.canvasMode = "discard"; outerSnapshot:invalidate("canvas"); return outerSnapshot; end local circle = display.newCircle( 0, 0, 100); circle:setFillColor(1,0,0); local square = display.newRect(100, 100, 100, 100); square:setFillColor(0,1,0); local grp = display.newGroup(); grp:insert(circle); grp:insert(square); local blurryGroup = addBlurEffect(grp, 300); blurryGroup:translate(display.contentCenterX, display.contentCenterY);not sure this will work with animated elements, but thanks for the hint I’ll further investigate on this one.
What I want is to get an animated background with multiple elements blurred while I popup something.
No. This is intended for static objects only. It’s not suited for animated objects as it’s currently written.
Ingemar is pretty much there, although there’s no need for the nested snapshots - one is enough.
You’d just shift everything into that snapshot’s .group property, then invalidate.
If you want something animating, you’d need to keep calling invalidate - the easiest way is to set up and enterFrame listener which does precisely that (but make sure it is only when the snapshot is in use to prevent using up the GPU unnecessarily).
I’m not entirely up to date with the new snapshot options, but I don’t think you need to set the canvas mode to “discard” nor invalidate with the “canvas” property.
My only other comment would be to possibly make the snapshot a tiny bit bigger than the screen. Filters which affect the borders can have varying degrees of success, and I’m not sure what the effect would be for blurring. Chances are it is ok, but if not, making it a bit bigger than the actual area you show could well help.
The reason I have two snapshots is because on device I saw that the blur was causing severe performance problems.
With only one snapshot the blur effect has to be calculated on each frame. By having the second snapshot the blur is rendered to the texture of the second snapshot.
I tested this with a ridiculously large blur of 300, which runs fine when using two snapshots, but fails miserably with only one snapshot.
Ah gotcha. Must admit ive never done any blurs of anything over a few pixels. Great solution
I have to admit that I haven’t wrapped my head around the new snapshot options yet either.
I’m still experimenting…
Hey Guys, thanks very much for the information. I just was wondering if there was some tipe of prostprocessing layer on Corona like it’s on other platforms that just process the image buffer in real time without much hassle.
It would be great if corona implemented some type of transparent “group shader” or something like that and you apply it the same as you do with fills.
Anyway, thx again!
Have you tried just placing everything in a fullscreen snapshot, applying a filter on the snapshot and calling snapshot:invalidate() on every enterFrame?
Good point about the snapshot within snapshot. It’s weird that even if a snapshot (with gaussianblur effect added) is not being invalidated each frame, it still causes severe performance issues, almost as if it is still constantly applying the gaussian blur effect each frame. I see frame rate strop from 30 to 8 if using gaussian blur on a snapshot that never gets changed. Using your method of a snapshot within a snapshot is great but it wastes a huge amount of additional texture memory (in my case an additional +40mb on ipad2s.). So hopefully corona can check on this and perhaps come up with a better fix. It totally makes sense using gaussian blur on a snapshot that is being invalidated each frame will cause major performance issues, but really, if its not being invalidated it should not still be having performance issues unless there’s a bug in the code which ends up invalidating snapshots anyways.