Hi,
Is it possible to add two images together? I want to add a large rectangle that is blue with a smaller rectangle that is transparent (alpha=0)
So when they are added together I should see the large blue rectangle with a smaller rectangle hole in it
Thanks
Vik [import]uid: 67619 topic_id: 33455 reply_id: 333455[/import]
Yup, but you need to make the small rectangle a mask (black/white) image. See here:
http://www.coronalabs.com/blog/2012/05/29/how-to-use-bitmap-masks/ [import]uid: 8271 topic_id: 33455 reply_id: 132920[/import]
I can’t use a mask… because as soon as I use the mask feature it adds a black background to the whole screen
sorry I should have added… that there is a background image as well… so when both squares have been combined… i should be able to see the background through the big rectangle [import]uid: 67619 topic_id: 33455 reply_id: 132921[/import]
Can you post your code? [import]uid: 8271 topic_id: 33455 reply_id: 132928[/import]
[code]
–background image
local image = display.newImage( “bkgd.png”, true )
– first rectangle
local myRectangle1 = display.newRect(0, 0, 768, 1024)
myRectangle1:setFillColor(0, 0, 0)
myRectangle1.alpha = 0.8
– i am gonna use the circle mask image from x-ray sample
local mask = graphics.newMask( “circlemask.png” )
image:setMask( mask )
– all i get a is a black screen with small hole where the mask is… i thought the mask could see all the way through to the bottom image
[/code] [import]uid: 67619 topic_id: 33455 reply_id: 132981[/import]
Assuming that you are trying to make part of the bkgd image visible, I would do this:
<lua.>-- black rectangle to make sure background is black
local myRectangle1 = display.newRect(0, 0, 768, 1024)
myRectangle1:setFillColor(0, 0, 0)
myRectangle1.alpha = 0.8
– load background - the ‘true’ does not do anything AFAIK
local image = display.newImage( “bkgd.png” ) – , true )
– set the mask on the bkgd image so only that part is visible
local mask = graphics.newMask( “circlemask.png” )
image:setMask( mask )[/lua]
So, what’s happening here is that the background is now black, because of the rectangle which is behind the image, and the image itself is only visible where the mask has been placed. This is because the mask image being used is not a ‘hole’ but ‘the only visible part’ of whatever image it is placed on.
Essentially, the problem you’ve got is that the mask image is the opposite of what you want - it’s not a hole, though it gives that impression in the torch sample. [import]uid: 8271 topic_id: 33455 reply_id: 133040[/import] </lua.>
so what do you suggest I do to get the desired effect? can it be done? [import]uid: 67619 topic_id: 33455 reply_id: 133064[/import]
Notice that the X-Ray and FlashLight samples don’t make a hole through the top image to the bottom, they actually put the image which you’re “seeing through the hole” on top of the main image and apply the mask to it.
If you want to make a “hole” through the top image (to see the image underneath) you still need to apply the mask to the top image, but instead of a black png with a white circle you want a white png with a black circle.
http://docs.coronalabs.com/api/library/graphics/newMask.html
Remember that in mask images, the white is the visible part and the black is invisible. [import]uid: 8271 topic_id: 33455 reply_id: 133068[/import]
Yup, but you need to make the small rectangle a mask (black/white) image. See here:
http://www.coronalabs.com/blog/2012/05/29/how-to-use-bitmap-masks/ [import]uid: 8271 topic_id: 33455 reply_id: 132920[/import]
I can’t use a mask… because as soon as I use the mask feature it adds a black background to the whole screen
sorry I should have added… that there is a background image as well… so when both squares have been combined… i should be able to see the background through the big rectangle [import]uid: 67619 topic_id: 33455 reply_id: 132921[/import]
Can you post your code? [import]uid: 8271 topic_id: 33455 reply_id: 132928[/import]
The x-ray sample… its a bit of trick… as in… the way it works… because if you set the alpha to the top image (paper_bkg) you will notice the bottom layer (grid.png) has been covered with a black layer other than where the mask is… so when ever you apply a mask to an image… it makes the image all black other than where the mask is…
I tried your suggestion but it does not work…
maybe I am not explaining exactly what I need… have a look at the image below…
http://www5.picturepush.com/photo/a/11529068/1024/Anonymous/bkgd1234.png
ok so basically what I need is exactly like the x-ray sample… but I need the top image to be alpha =0.8 so that I can see through to the bottom image…
hope that makes sense
[import]uid: 67619 topic_id: 33455 reply_id: 133119[/import]
Ok, this does what your image shows, but not the way you’re thinking.
This code uses two copies of the image you want to show. The bottom one is dark, the top one is normal brightness, but is only visible where the mask is.
[lua]-- back image is slightly visible
local back = display.newImage( “bkgd.png” )
back.alpha = .2
– front image is only visible where the mask is, but is bright
local image = display.newImage( “bkgd.png” )
– apply mask to front image
local mask = graphics.newMask( “circlemask.png” )
image:setMask( mask )
– move mask around on top image
function touch(e)
image.maskX, image.maskY = e.x-image.width/2, e.y-image.height/2
return true
end
Runtime:addEventListener(“touch”,touch)[/lua]
I think the problem you’re hitting is that the mask does not affect images it is not applied to.
I also hit a problem when I inverted the circlemask.png and it did not work as I expect, in my previous post. [import]uid: 8271 topic_id: 33455 reply_id: 133120[/import]
[code]
–background image
local image = display.newImage( “bkgd.png”, true )
– first rectangle
local myRectangle1 = display.newRect(0, 0, 768, 1024)
myRectangle1:setFillColor(0, 0, 0)
myRectangle1.alpha = 0.8
– i am gonna use the circle mask image from x-ray sample
local mask = graphics.newMask( “circlemask.png” )
image:setMask( mask )
– all i get a is a black screen with small hole where the mask is… i thought the mask could see all the way through to the bottom image
[/code] [import]uid: 67619 topic_id: 33455 reply_id: 132981[/import]
That is very very cool… thank you for that…
Now are you ready for the next question… this was more of a build up to the next question…
I want an animation of a man walking left and right… again the same sort of thing…
instead of a background… its just an animated sprite…
does that mean… I will need to implement 2 sprites? of the same thing? one with an alpha (darker) and the other normal?
This is why I was just thinking originally to draw the screen with all required animations etc… then apply a alpha layer on top of it… then a[ply the mask… do you know what I mean?
Thanks again for your help
Vik
[import]uid: 67619 topic_id: 33455 reply_id: 133156[/import]
You want an animation of a man walking left and an animation of a man walking right?
I don’t think that would be a problem, just flip your sprite sheet. [import]uid: 8271 topic_id: 33455 reply_id: 133167[/import]
no no sorry… I must not have explained it properly…
I know how to make a man animate from left to right that’s no problem…
What I was asking was how would you do the same thing you showed me with the background… but with a man walking left and right?
so basically there is a man walking left and right on the screen… there is a dark overlay … but where the mask is applied it shows through… have a look at the following images
image one shows the man running from the left to the right he is still in the dark. Image 2 shows him running through the mask… and it shows him lighter…
http://www5.picturepush.com/photo/a/11531853/img/Anonymous/1.png
http://www2.picturepush.com/photo/a/11531865/img/Anonymous/2.png
[import]uid: 67619 topic_id: 33455 reply_id: 133179[/import]
Assuming that you are trying to make part of the bkgd image visible, I would do this:
<lua.>-- black rectangle to make sure background is black
local myRectangle1 = display.newRect(0, 0, 768, 1024)
myRectangle1:setFillColor(0, 0, 0)
myRectangle1.alpha = 0.8
– load background - the ‘true’ does not do anything AFAIK
local image = display.newImage( “bkgd.png” ) – , true )
– set the mask on the bkgd image so only that part is visible
local mask = graphics.newMask( “circlemask.png” )
image:setMask( mask )[/lua]
So, what’s happening here is that the background is now black, because of the rectangle which is behind the image, and the image itself is only visible where the mask has been placed. This is because the mask image being used is not a ‘hole’ but ‘the only visible part’ of whatever image it is placed on.
Essentially, the problem you’ve got is that the mask image is the opposite of what you want - it’s not a hole, though it gives that impression in the torch sample. [import]uid: 8271 topic_id: 33455 reply_id: 133040[/import] </lua.>
Ah, that’s easy and does not require masks.
Make a completely png with a transparent circle in the middle. Load the PNG and set it’s alpha to .3 or something, then animate the man behind it. [import]uid: 8271 topic_id: 33455 reply_id: 133204[/import]
so what do you suggest I do to get the desired effect? can it be done? [import]uid: 67619 topic_id: 33455 reply_id: 133064[/import]
