mask query

vik_b_it · November 26, 2012, 1:30pm

Hi all,

Quick question, is this possible to do?

I have an image to which I want to add a transparent layer to, then I want to add a mask to it…

very similar to teh flash light app provided in the sample code… but instead of the black overlay, I want to be able to see through to the image. So the black overlay being see through… but when the flash light is touched, it actually shows the bottom image without the transparency…
hope that makes sense

Thanks

[import]uid: 67619 topic_id: 33361 reply_id: 333361[/import]

rob · November 26, 2012, 2:50pm

You should be able to make a mask that hides the bottom part of the image and when touched, hides the mask. You really don’t need the transparency layer. In the sample code, I think the mask is applied to a black layer, which shows the picture underneath it. In your case, you’re going to put the mask on your image you want to hide and have that image sitting above some background.

Does that make sense? If not I can try to whip up a couple of images to dry and demonstrate it better.
[import]uid: 199310 topic_id: 33361 reply_id: 132488[/import]

vik_b_it · November 26, 2012, 4:06pm

Rob,

can i have the dry demonstration?..

but will I still be able to see the image? The idea is I want to see the whole image but it should be hazy (hence a transparent black overlay)… but once I touch a particular point on the image… I want to be able to see the image at that point clearly… not the whole image… just where I touch…

do you know what I mean

Thanks [import]uid: 67619 topic_id: 33361 reply_id: 132502[/import]

rob · November 26, 2012, 4:35pm

I could see using a mask with a gradient to create a haze/fog effect. Then you could on touch apply that gradient to your fog layer. Turn the mask on and then move it to where ever your touch event is. So it’s basically like the flashlight example except the black layer has an alpha of say 0.5 so its somewhat see through. Then you would have to apply the mask and remove it based on the state of the touch event.
[import]uid: 199310 topic_id: 33361 reply_id: 132507[/import]

vik_b_it · November 26, 2012, 6:12pm

Rob,

Thats exactly what I tried to do, make the black have an alpha… but as soon as I apply the mask, the whole thing turns black… as soon as I get rid of the mask… the alpha is applied

Vik [import]uid: 67619 topic_id: 33361 reply_id: 132520[/import]

vik_b_it · November 27, 2012, 3:05am

Rob,

I feel like it cannot be achieved, as the mask always puts a black background on

  
local halfW = display.contentCenterX  
local halfH = display.contentCenterY  
  
-- Image to be masked  
local image = display.newImageRect( "image.png", 768, 1024 )  
image:translate( halfW, halfH )  
-- Black background  
  
local bg = display.newRect(0, 0, 768, 1024)  
bg:setFillColor(0, 0, 0, 200)  
  
-- Mask  
local mask = graphics.newMask( "circlemask.png" )  
image:setMask( mask )

i just need the above code to show the overlay… but where the mask is to be shown properly without the overlay

so the idea is the fog is always shown on the image… but when I touch a particular location of the image the fog at that location disappears and I should be able to see through…

so my idea was have my normal image… add a black transparent rectangle (fog)… but then the problem is how do I add the mask? cause as soon as I add the mask, the whole screen goes black… also the mask circle now shows the image with the fog…

Thanks again [import]uid: 67619 topic_id: 33361 reply_id: 132583[/import]

rob · November 26, 2012, 2:50pm

You should be able to make a mask that hides the bottom part of the image and when touched, hides the mask. You really don’t need the transparency layer. In the sample code, I think the mask is applied to a black layer, which shows the picture underneath it. In your case, you’re going to put the mask on your image you want to hide and have that image sitting above some background.

Does that make sense? If not I can try to whip up a couple of images to dry and demonstrate it better.
[import]uid: 199310 topic_id: 33361 reply_id: 132488[/import]

vik_b_it · November 26, 2012, 4:06pm

Rob,

can i have the dry demonstration?..

but will I still be able to see the image? The idea is I want to see the whole image but it should be hazy (hence a transparent black overlay)… but once I touch a particular point on the image… I want to be able to see the image at that point clearly… not the whole image… just where I touch…

do you know what I mean

Thanks [import]uid: 67619 topic_id: 33361 reply_id: 132502[/import]

rob · November 26, 2012, 4:35pm

I could see using a mask with a gradient to create a haze/fog effect. Then you could on touch apply that gradient to your fog layer. Turn the mask on and then move it to where ever your touch event is. So it’s basically like the flashlight example except the black layer has an alpha of say 0.5 so its somewhat see through. Then you would have to apply the mask and remove it based on the state of the touch event.
[import]uid: 199310 topic_id: 33361 reply_id: 132507[/import]

vik_b_it · November 26, 2012, 6:12pm

Rob,

Thats exactly what I tried to do, make the black have an alpha… but as soon as I apply the mask, the whole thing turns black… as soon as I get rid of the mask… the alpha is applied

Vik [import]uid: 67619 topic_id: 33361 reply_id: 132520[/import]

rob · November 27, 2012, 4:08pm

Have you filed a bug report? I have a feeling it may be a limitation and not a bug.

Also have you tried putting the image with the mask inside a display group and then setting the alpha on the group? [import]uid: 199310 topic_id: 33361 reply_id: 132701[/import]

vik_b_it · November 27, 2012, 4:41pm

not yet I will try it…

but what I want to achieve can it be done without using a mask… I assumed a mask would have been the easiest way…

All I want to do is have like a fog of war on my image… when the user touches part of the image… it shows whats under the fog at the touch location…

The flash light example would have been perfect… if only the black part had an alpha

I am sure someone would have done something similar yeah? [import]uid: 67619 topic_id: 33361 reply_id: 132703[/import]

vik_b_it · November 27, 2012, 3:05am

Rob,

I feel like it cannot be achieved, as the mask always puts a black background on

  
local halfW = display.contentCenterX  
local halfH = display.contentCenterY  
  
-- Image to be masked  
local image = display.newImageRect( "image.png", 768, 1024 )  
image:translate( halfW, halfH )  
-- Black background  
  
local bg = display.newRect(0, 0, 768, 1024)  
bg:setFillColor(0, 0, 0, 200)  
  
-- Mask  
local mask = graphics.newMask( "circlemask.png" )  
image:setMask( mask )

i just need the above code to show the overlay… but where the mask is to be shown properly without the overlay

so the idea is the fog is always shown on the image… but when I touch a particular location of the image the fog at that location disappears and I should be able to see through…

so my idea was have my normal image… add a black transparent rectangle (fog)… but then the problem is how do I add the mask? cause as soon as I add the mask, the whole screen goes black… also the mask circle now shows the image with the fog…

Thanks again [import]uid: 67619 topic_id: 33361 reply_id: 132583[/import]

vik_b_it · November 28, 2012, 6:15am

Rob,

No good… still doesn’t work… all I want is to be able to change the black colour of the mask to transparent…

should I raise a bug? or do you know if this is a limitation? any other hints on how I can achieve what I need? You spoke about a dry example?? or were you thinking of something else?

Thanks

Vik [import]uid: 67619 topic_id: 33361 reply_id: 132761[/import]

Danny · November 28, 2012, 9:29am

Hi Vik.

You can’t apply alpha to a masked object at the present time. Or set a fill color on a masked object.

That is why you are just seeing it all black

http://docs.coronalabs.com/api/type/VectorObject/setFillColor.html [import]uid: 84637 topic_id: 33361 reply_id: 132772[/import]

vik_b_it · November 28, 2012, 3:04pm

Danny,

does that mean I can’t use a mask to do what I want to do?

ie…
All i want is to have a normal colorful image (image1), that has a hazzy effect applied to it… so I can see image1 but it looks hazzy… but if the user touches a point on the image… the hazzness goes away at the touch location…

Hope that makes sense

Thanks

Vik [import]uid: 67619 topic_id: 33361 reply_id: 132809[/import]

rob · November 27, 2012, 4:08pm

Have you filed a bug report? I have a feeling it may be a limitation and not a bug.

Also have you tried putting the image with the mask inside a display group and then setting the alpha on the group? [import]uid: 199310 topic_id: 33361 reply_id: 132701[/import]

vik_b_it · November 27, 2012, 4:41pm

not yet I will try it…

but what I want to achieve can it be done without using a mask… I assumed a mask would have been the easiest way…

All I want to do is have like a fog of war on my image… when the user touches part of the image… it shows whats under the fog at the touch location…

The flash light example would have been perfect… if only the black part had an alpha

I am sure someone would have done something similar yeah? [import]uid: 67619 topic_id: 33361 reply_id: 132703[/import]

vik_b_it · November 28, 2012, 6:15am

Rob,

No good… still doesn’t work… all I want is to be able to change the black colour of the mask to transparent…

should I raise a bug? or do you know if this is a limitation? any other hints on how I can achieve what I need? You spoke about a dry example?? or were you thinking of something else?

Thanks

Vik [import]uid: 67619 topic_id: 33361 reply_id: 132761[/import]

Danny · November 28, 2012, 9:29am

Hi Vik.

You can’t apply alpha to a masked object at the present time. Or set a fill color on a masked object.

That is why you are just seeing it all black

http://docs.coronalabs.com/api/type/VectorObject/setFillColor.html [import]uid: 84637 topic_id: 33361 reply_id: 132772[/import]