possible or not? display group alpha like in photoshop

[mrfox]

Hey everybody,

a quick question, is it possible to have a group transparency that is not displayed per object in the group?

example:

i got 2 objects in a group, object a is overlapping object b.

when i set the group’s alpha to 0.5, i can see object b through object a.

but what i would like to get is a group alpha like in photoshop sets,

so that i cant see object b through object a, but all the background elements (which are not members of the group) behind the group.

it’s not a big deal, but it would be a nice to have.
especially because alpha transitions of groups can look extremly messy the way it is.
something like a cache group as bitmap function would be awesome.

here is an image to show what i mean:

[jeremybell]

I’m having the same problem. I agree, during transitions things can look quite messy indeed.

[jstrahan]

Not at this time. Graphics 2.0 will address this issue

[jeremybell]

Thanks jstrahan

[Stephen_Lewis]

If the objects are all placed in the same display group you could capture the group using display.capture().  That will create a new display object “snapshot” of the entire group.  Get rid of the original group and now you have a single object that you can fade out or change alpha on or whatever.  The trick will be in positioning the new display object so it is in the same location as the original group.  

http://docs.coronalabs.com/api/library/display/capture.html

[jeremybell]

Yeah, I had thought some sort of image flattening would help, but the options available only either capture the whole screen or a rectangular section. The particular group I’m working with (a hand with a shirt cuff) is not rectangular and requires transparency for the shadow.

Something which I suggested a couple of years ago would help a great deal here - a function like displayGroup.flatten() - which takes a group of any size and shape, and returns an image object of any shape complete with transparency.

[Stephen_Lewis]

display.capture() captures a display group, so whatever group your hand and shirt cuff are in can be isolated.

Here’s a simple example using overlapping squares, similar to what mrfox’s image shows, to demonstrate how to use display capture to get what he wants.  

[lua]

– Demonstrates fading out a group of objects using a captureGroup to preserve alpha channel relationships between objects

local rectanglesGroup = display.newGroup()

local rectRed = display.newRect(rectanglesGroup,150,50,50,50)

rectRed:setFillColor(250, 0, 0)

local rectBlue = display.newRect(rectanglesGroup,175,75,50,50)

rectBlue:setFillColor(0, 0, 250)

local bounds = rectanglesGroup.contentBounds

local capturedRects = display.capture(rectanglesGroup)

–moves the captured object under the original group.

capturedRects.x = bounds.xMin + .5*rectanglesGroup.width

capturedRects.y = bounds.yMin + .5*rectanglesGroup.height + 100

rectanglesGroup:insert(capturedRects) 

local fadeOut

local fadeIn

function fadeOut()

    transition.to( rectanglesGroup, { time=3000, alpha=0, onComplete=fadeIn } )

end

function fadeIn()

    transition.to( rectanglesGroup, { time=3000, alpha=1, onComplete=fadeOut } )

end

fadeOut()

[/lua]

An issue with this method occurs if any of the original elements already have semi-transparent areas or edges. Display.capture composites the group against black so the semi-transparent areas against nothing will be a lot darker than they should be.  You will probably get black fringes around irregularly shaped transparency.  I think what we want is for display.capture to pre-composite or pre-multiply alpha.

[jeremybell]

Thanks HardBoiledIndustries,

I didn’t know the display.capture(group) function included transparency for the most part. Good to know!

I tried it though, and the shadow looks more grey now than they way it should unfortunately. On some backgrounds it looks ok, but on some it’s far too light an unnatural to use.

[jstrahan]

Be sure and test it on device. There may be a pause during the capture especially on android that’s why I didn’t suggest this method I’ve used it in the past to perform a cropping function and there was always a pause but that was with a much older build of corona so it may be better now

[mrfox]

hey jeremy, thanks for reviving this topic,

jstrahan, hardboildeindustries, thanks for the answers and suggestions.

[jeremybell]

I’m having the same problem. I agree, during transitions things can look quite messy indeed.

[jstrahan]

Not at this time. Graphics 2.0 will address this issue

[jeremybell]

Thanks jstrahan

[Stephen_Lewis]

If the objects are all placed in the same display group you could capture the group using display.capture().  That will create a new display object “snapshot” of the entire group.  Get rid of the original group and now you have a single object that you can fade out or change alpha on or whatever.  The trick will be in positioning the new display object so it is in the same location as the original group.  

http://docs.coronalabs.com/api/library/display/capture.html

[jeremybell]

Yeah, I had thought some sort of image flattening would help, but the options available only either capture the whole screen or a rectangular section. The particular group I’m working with (a hand with a shirt cuff) is not rectangular and requires transparency for the shadow.

Something which I suggested a couple of years ago would help a great deal here - a function like displayGroup.flatten() - which takes a group of any size and shape, and returns an image object of any shape complete with transparency.

[Stephen_Lewis]

display.capture() captures a display group, so whatever group your hand and shirt cuff are in can be isolated.

Here’s a simple example using overlapping squares, similar to what mrfox’s image shows, to demonstrate how to use display capture to get what he wants.  

[lua]

– Demonstrates fading out a group of objects using a captureGroup to preserve alpha channel relationships between objects

local rectanglesGroup = display.newGroup()

local rectRed = display.newRect(rectanglesGroup,150,50,50,50)

rectRed:setFillColor(250, 0, 0)

local rectBlue = display.newRect(rectanglesGroup,175,75,50,50)

rectBlue:setFillColor(0, 0, 250)

local bounds = rectanglesGroup.contentBounds

local capturedRects = display.capture(rectanglesGroup)

–moves the captured object under the original group.

capturedRects.x = bounds.xMin + .5*rectanglesGroup.width

capturedRects.y = bounds.yMin + .5*rectanglesGroup.height + 100

rectanglesGroup:insert(capturedRects) 

local fadeOut

local fadeIn

function fadeOut()

    transition.to( rectanglesGroup, { time=3000, alpha=0, onComplete=fadeIn } )

end

function fadeIn()

    transition.to( rectanglesGroup, { time=3000, alpha=1, onComplete=fadeOut } )

end

fadeOut()

[/lua]

An issue with this method occurs if any of the original elements already have semi-transparent areas or edges. Display.capture composites the group against black so the semi-transparent areas against nothing will be a lot darker than they should be.  You will probably get black fringes around irregularly shaped transparency.  I think what we want is for display.capture to pre-composite or pre-multiply alpha.

[jeremybell]

Thanks HardBoiledIndustries,

I didn’t know the display.capture(group) function included transparency for the most part. Good to know!

I tried it though, and the shadow looks more grey now than they way it should unfortunately. On some backgrounds it looks ok, but on some it’s far too light an unnatural to use.

[jstrahan]

Be sure and test it on device. There may be a pause during the capture especially on android that’s why I didn’t suggest this method I’ve used it in the past to perform a cropping function and there was always a pause but that was with a much older build of corona so it may be better now

[mrfox]

hey jeremy, thanks for reviving this topic,

jstrahan, hardboildeindustries, thanks for the answers and suggestions.