Hi guys,
I’ve been trying to make a “non game” app with corona sdk. I’m just still trying to figure out how to get the soft drop shadow effect as used in a lot in material design. For example, look at the picture attached. Under the “all, images, videos,…” items, there is a soft shadow. How could I replicate it with the spread and everything?
Kind regards
Bram
It looks like the image didn’t attach in the last file, so it should be attached here 
Corona has no automatic ‘shadow’ creation features.
To create a shadow of any object,
- Create a black, low-alpha, slightly offset object below the ‘to be shadowed’ object -OR-
- Create your art assets with shadows in them, -OR-
- Create shadow assets that you render below the ‘to be shadowed’ object.
- … probably other solutions.
Hi RoamingGamer,
Thanks for the response, I’ve already got such shadow. But I’d like to have to spread. The object is just a rect made in corona, I guess making a shadow in gimp is my best bet then
Kind regards
Bram
perhaps something like this (adjust shadow alpha/radius to suit)
local ACW = display.actualContentWidth local ACH = display.actualContentHeight local CCX = display.contentCenterX local CCY = display.contentCenterY local PX = CCX local PY = CCY local PW = ACW \* 0.9 local PH = ACH \* 0.4 local SR = 8 -- shadow radius local SA = 0.4 -- shadow alpha local paper = display.newRect(CCX,CCY,ACW,ACH) paper:setFillColor(1,1,1,1) local panelGroup = display.newGroup() panelGroup.x, panelGroup.y = PX, PY local shadeGroup = display.newSnapshot(panelGroup, PW+SR\*2,PH+SR\*2) shadeGroup.x, shadeGroup.y = 0, SR/2 shadeGroup.fill.effect = "filter.blurGaussian" shadeGroup.fill.effect.horizontal.blurSize = SR shadeGroup.fill.effect.vertical.blurSize = SR local shadow = display.newRect(shadeGroup.group,0,0,PW+SR,PH+SR) shadow:setFillColor(0,0,0,SA) local panel = display.newRect(panelGroup,0,0,PW,PH) panel:setFillColor(1,1,1,1) transition.from(panelGroup, {time=1000, y=-1000, transition=easing.outBounce})Spread? I’m not clear what you’re trying to express. The angle of the drop shadow? The thickness? Control of the change in opacity/color over distance?
Key terms that may help:
- angle - direction of shadow relative to ‘parent’
- opacity
- translucency
- color
- gradient
Hi,
I was so busy working on some projects that I completely forgot my post. I’m not quite sure how to explain what I mean by spread. But here is an example of what I mean: https://d13yacurqjgara.cloudfront.net/users/324709/screenshots/1809154/dribbble_material_design_1x.png
Do you see how it seems like those rects with information popup because of the small shadow around them, that’s the effect I’d like to achieve. I can make the rects and shadows in photoshop, but I’d prefer to do it just with lua in corona
Another possibility is a ‘dark bloom’. I’m not sure if that will work, but blooming an object below the target object as a kind of shadow might be cool:
https://docs.coronalabs.com/guide/graphics/effects.html#filter.bloom
That looks like it might do the trick. Thanks!
It looks like the image didn’t attach in the last file, so it should be attached here
Corona has no automatic ‘shadow’ creation features.
To create a shadow of any object,
- Create a black, low-alpha, slightly offset object below the ‘to be shadowed’ object -OR-
- Create your art assets with shadows in them, -OR-
- Create shadow assets that you render below the ‘to be shadowed’ object.
- … probably other solutions.
Hi RoamingGamer,
Thanks for the response, I’ve already got such shadow. But I’d like to have to spread. The object is just a rect made in corona, I guess making a shadow in gimp is my best bet then
Kind regards
Bram
perhaps something like this (adjust shadow alpha/radius to suit)
local ACW = display.actualContentWidth local ACH = display.actualContentHeight local CCX = display.contentCenterX local CCY = display.contentCenterY local PX = CCX local PY = CCY local PW = ACW \* 0.9 local PH = ACH \* 0.4 local SR = 8 -- shadow radius local SA = 0.4 -- shadow alpha local paper = display.newRect(CCX,CCY,ACW,ACH) paper:setFillColor(1,1,1,1) local panelGroup = display.newGroup() panelGroup.x, panelGroup.y = PX, PY local shadeGroup = display.newSnapshot(panelGroup, PW+SR\*2,PH+SR\*2) shadeGroup.x, shadeGroup.y = 0, SR/2 shadeGroup.fill.effect = "filter.blurGaussian" shadeGroup.fill.effect.horizontal.blurSize = SR shadeGroup.fill.effect.vertical.blurSize = SR local shadow = display.newRect(shadeGroup.group,0,0,PW+SR,PH+SR) shadow:setFillColor(0,0,0,SA) local panel = display.newRect(panelGroup,0,0,PW,PH) panel:setFillColor(1,1,1,1) transition.from(panelGroup, {time=1000, y=-1000, transition=easing.outBounce})Spread? I’m not clear what you’re trying to express. The angle of the drop shadow? The thickness? Control of the change in opacity/color over distance?
Key terms that may help:
- angle - direction of shadow relative to ‘parent’
- opacity
- translucency
- color
- gradient
Hi,
I was so busy working on some projects that I completely forgot my post. I’m not quite sure how to explain what I mean by spread. But here is an example of what I mean: https://d13yacurqjgara.cloudfront.net/users/324709/screenshots/1809154/dribbble_material_design_1x.png
Do you see how it seems like those rects with information popup because of the small shadow around them, that’s the effect I’d like to achieve. I can make the rects and shadows in photoshop, but I’d prefer to do it just with lua in corona
Another possibility is a ‘dark bloom’. I’m not sure if that will work, but blooming an object below the target object as a kind of shadow might be cool:
https://docs.coronalabs.com/guide/graphics/effects.html#filter.bloom
That looks like it might do the trick. Thanks!