I was attempting to implement something similar to google material design, and I just wanted to create a shadow. I was thinking i could do this by spawning a darker newRect then using d filter to blur the “shadow”. However I am having issues getting the filter to work, do they work for primitives?
Hi @lofy,
In this case, the blur won’t work on a primitive (rectangle) because the bounds (edges) of that object are constrained to the defined bounds of the shape. One common solution is to make the shadow rectangle into a snapshot, then apply the blur effect to the snapshot. Effectively, that makes the rectangle into an “image” type of texture, and its edges won’t be constrained.
[lua]
local shadowSnapshot = display.newSnapshot( 400, 400 )
local shadowRect = display.newRoundedRect( shadowSnapshot.group, 0, 0, 200, 200, 4 )
shadowRect:setFillColor( 0 )
shadowSnapshot.x, shadowSnapshot.y = display.contentCenterX, display.contentCenterY-200
shadowSnapshot.fill.effect = “filter.blurGaussian”
shadowSnapshot.fill.effect.horizontal.blurSize = 16
shadowSnapshot.fill.effect.vertical.blurSize = 16
[/lua]
Hope this helps,
Brent
Hi @lofy,
In this case, the blur won’t work on a primitive (rectangle) because the bounds (edges) of that object are constrained to the defined bounds of the shape. One common solution is to make the shadow rectangle into a snapshot, then apply the blur effect to the snapshot. Effectively, that makes the rectangle into an “image” type of texture, and its edges won’t be constrained.
[lua]
local shadowSnapshot = display.newSnapshot( 400, 400 )
local shadowRect = display.newRoundedRect( shadowSnapshot.group, 0, 0, 200, 200, 4 )
shadowRect:setFillColor( 0 )
shadowSnapshot.x, shadowSnapshot.y = display.contentCenterX, display.contentCenterY-200
shadowSnapshot.fill.effect = “filter.blurGaussian”
shadowSnapshot.fill.effect.horizontal.blurSize = 16
shadowSnapshot.fill.effect.vertical.blurSize = 16
[/lua]
Hope this helps,
Brent