I was wondering if its possible to do something like the flashlight example but with the black bkg being somewhat opaque to simulate night and not complete darkness.
I think you can adjust the blackness of the mask image, less black = more transparent.
Sorry, that just adjusts the color from black to gray to white. It doesn’t actually change the transparency like I am wanting.
How exactly does the example work? Do you have a black rect that is masked?
If yes, just change the color of the rect to a dark blue and add the blend mode “multiply”.
local bg = display. newRect(100,100,100,100) bg:setFillColor(20,20,30) bg.blendMode = "multiply"Here is the code directly from the example, changing blend mode to “multiply” doesn’t make it transparent. I removed the touch code and stuff to simplify things for easy reading.
-- Abstract: Flashlight sample project -- Demonstrates masking an image. The flashlight skews depending -- on location from center. -- -- Version: 1.0 (September 1, 2010) -- -- Sample code is MIT licensed, see http://www.coronalabs.com/links/code/license -- Copyright (C) 2010 Corona Labs Inc. All Rights Reserved. display.setStatusBar( display.HiddenStatusBar ) local halfW = display.contentCenterX local halfH = display.contentCenterY -- Black background local bkg = display.newRect( 0, 0, 768, 1024 ) bkg:setFillColor( 0 ) -- Image to be masked local image = display.newImageRect( "image.png", 768, 1024 ) image:translate( halfW, halfH ) -- Mask local mask = graphics.newMask( "circlemask.png" ) image:setMask( mask )An alternate strategy to using the built in masking could be to create an entirely separate group, and do your own masking.
Consider full screen masking:
You could create a second group to place in front of your main group.There’s many ways to construct the frontmost / masking group, but the simplest would be that it contains an all black image with a transparent circle in the middle.
Since it will be placed in front of the standard group on the screen, only the transparent area of the original group will show through (or more if you change the opacity of the blacked out area of the masking group).
If you move the masking group (with the image in it) though, edges from the main group below will peek out. So you could make the masking picture oversized, to cover the screen edges as the masking group is moved about. (To avoid having an oversized picture, you could add black rectangles outside the standard view area in the masking group).
You can do this same masking technique on non full screen groups as well. To stop the edges peeking out on these smaller groups, you would apply a *square* shaped standard mask to the masking group, so that it crops your makeshift mask as you move it about. You’d still have full opacity control on your mask… And the edges are all nicely clipped… Just make sure it is aligned (x,y) over the thing you want masked…
Anyways, just a thought on a totally alternative solution path…
Chevol, in the sample code you posted, you need to edit the mask image itself - what you’ll likely find the image contains is a black area containing a white shape which is the bit of the image you’d see. Make the black a lighter grey and it will make it semi-transparent.
I think you can adjust the blackness of the mask image, less black = more transparent.
Sorry, that just adjusts the color from black to gray to white. It doesn’t actually change the transparency like I am wanting.
How exactly does the example work? Do you have a black rect that is masked?
If yes, just change the color of the rect to a dark blue and add the blend mode “multiply”.
local bg = display. newRect(100,100,100,100) bg:setFillColor(20,20,30) bg.blendMode = "multiply"Here is the code directly from the example, changing blend mode to “multiply” doesn’t make it transparent. I removed the touch code and stuff to simplify things for easy reading.
-- Abstract: Flashlight sample project -- Demonstrates masking an image. The flashlight skews depending -- on location from center. -- -- Version: 1.0 (September 1, 2010) -- -- Sample code is MIT licensed, see http://www.coronalabs.com/links/code/license -- Copyright (C) 2010 Corona Labs Inc. All Rights Reserved. display.setStatusBar( display.HiddenStatusBar ) local halfW = display.contentCenterX local halfH = display.contentCenterY -- Black background local bkg = display.newRect( 0, 0, 768, 1024 ) bkg:setFillColor( 0 ) -- Image to be masked local image = display.newImageRect( "image.png", 768, 1024 ) image:translate( halfW, halfH ) -- Mask local mask = graphics.newMask( "circlemask.png" ) image:setMask( mask )An alternate strategy to using the built in masking could be to create an entirely separate group, and do your own masking.
Consider full screen masking:
You could create a second group to place in front of your main group.There’s many ways to construct the frontmost / masking group, but the simplest would be that it contains an all black image with a transparent circle in the middle.
Since it will be placed in front of the standard group on the screen, only the transparent area of the original group will show through (or more if you change the opacity of the blacked out area of the masking group).
If you move the masking group (with the image in it) though, edges from the main group below will peek out. So you could make the masking picture oversized, to cover the screen edges as the masking group is moved about. (To avoid having an oversized picture, you could add black rectangles outside the standard view area in the masking group).
You can do this same masking technique on non full screen groups as well. To stop the edges peeking out on these smaller groups, you would apply a *square* shaped standard mask to the masking group, so that it crops your makeshift mask as you move it about. You’d still have full opacity control on your mask… And the edges are all nicely clipped… Just make sure it is aligned (x,y) over the thing you want masked…
Anyways, just a thought on a totally alternative solution path…
Chevol, in the sample code you posted, you need to edit the mask image itself - what you’ll likely find the image contains is a black area containing a white shape which is the bit of the image you’d see. Make the black a lighter grey and it will make it semi-transparent.