[RESOLVED] Image masks not working correctly

Solar2D Android
#1

I’m playing with image masks at the moment, but having some issues once I get it onto an android device.

Here is the code I’m using:-

--A test rect to see if mask is working properly  
display.newRect(0,0,200,200)  
image = display.newImage("row.jpg")  
mask = graphics.newMask("mask.jpg")  
image:setMask(mask)

You can see how it looks here http://imstevil.com/corona/simulator.png which is correct

But on android it’s showing like this http://imstevil.com/corona/phone.png

The mask has been rotated and scaled and tiled it looks like. The images themselves load correctly if I load them both as images but don’t use the mask.

You can see the images I have used here:-

http://imstevil.com/corona/row.jpg
http://imstevil.com/corona/mask.jpg

I understand I could just make the them transparent PNGs which would work correctly, but I’m toying with a few ideas which wouldn’t work that way.

Is this possibly a bug? I’m not to sure it would be an issue with code when I know it works on the simulator, but I can’t find anything in google or the forums with anyone having a similar problem… I find it hard to imagine people wouldn’t have come across this problem already which makes me think I’m possibly doing something wrong.

Any help / advice people can give me on this, it would be greatly appreciated!

Stevil [import]uid: 133056 topic_id: 31344 reply_id: 331344[/import]

#2

The width and height of a mask must be a multiple of 4 pixels. Otherwise the mask will appear skewed onscreen, just as you have seen. This skewed mask issue will occur on Mac, iOS, and Android. Currently, only the Windows version of the Corona Simulator supports non-multiple of 4 masks.

Your mask image file is currently 569x48.
I would recommend that you increase the size to 572x48 and fill the extra pixels with black.

I also recommend that you use a grayscale (8-bit) PNG instead of a JPEG, because JPEGs are “lossy” and might produce artifacts on the edges of the white/black borders. [import]uid: 32256 topic_id: 31344 reply_id: 125307[/import]

#3

Masks are a little strange and have a few quirky rules to follow, otherwise you could get some strange results. In the Corona docs for masks here http://developer.coronalabs.com/reference/bitmap-mask it says

“… It is recommended to have at least a three pixel black border around the mask.”

It looks like your mask image doesn’t have at least 3 pixels of black around the outer edge where the diamond points are. Also, check to see if the pixel dimensions of the mask image are evenly divisible by 4.

EDIT: er… what Joshua said :slight_smile: [import]uid: 9422 topic_id: 31344 reply_id: 125309[/import]

#4

Hi Guys,

Thank you for the reply, looks like a bit of a mistake on my behalf. I was using images which were I thought were the correct sizes as they are generated using the display.save method. Unfortunately there was an issue which I was having with this (listed here:- http://developer.coronalabs.com/forum/2012/09/21/displaysave-android) so used the images generated by the simulator.

After it being pointed out that my images were not the correct size I looked into it to realise that unless you have the simulator running at the native res display.save will stretch / shrink the image. After running the code with the simulator at the correct size and trying again using those images it worked correctly.

Thank you both for your help in getting this matter resolved!

Also, thank you Josh for the suggestion to use PNG for my mask images. I would normally do this, but as I stated above these images are being generated and saved so I am limited to the out put that I am given. It is a little annoying with the artifacting coming through, but I’m hoping in the long run it’s not going to be enough to be noticeable.

Stevil [import]uid: 133056 topic_id: 31344 reply_id: 125359[/import]

#5

Great! Glad we could help!

If you want to “borrow” some mask images for testing purposes, have a look at sample project “Graphics/Flashlight” and “Graphics/X-ray”. The Flashlight sample project in particular demonstrates a very cool effect that you can implement with masks. Have fun! [import]uid: 32256 topic_id: 31344 reply_id: 125374[/import]

#6

The width and height of a mask must be a multiple of 4 pixels. Otherwise the mask will appear skewed onscreen, just as you have seen. This skewed mask issue will occur on Mac, iOS, and Android. Currently, only the Windows version of the Corona Simulator supports non-multiple of 4 masks.

Your mask image file is currently 569x48.
I would recommend that you increase the size to 572x48 and fill the extra pixels with black.

I also recommend that you use a grayscale (8-bit) PNG instead of a JPEG, because JPEGs are “lossy” and might produce artifacts on the edges of the white/black borders. [import]uid: 32256 topic_id: 31344 reply_id: 125307[/import]

#7

Masks are a little strange and have a few quirky rules to follow, otherwise you could get some strange results. In the Corona docs for masks here http://developer.coronalabs.com/reference/bitmap-mask it says

“… It is recommended to have at least a three pixel black border around the mask.”

It looks like your mask image doesn’t have at least 3 pixels of black around the outer edge where the diamond points are. Also, check to see if the pixel dimensions of the mask image are evenly divisible by 4.

EDIT: er… what Joshua said :slight_smile: [import]uid: 9422 topic_id: 31344 reply_id: 125309[/import]

#8

Hi Guys,

Thank you for the reply, looks like a bit of a mistake on my behalf. I was using images which were I thought were the correct sizes as they are generated using the display.save method. Unfortunately there was an issue which I was having with this (listed here:- http://developer.coronalabs.com/forum/2012/09/21/displaysave-android) so used the images generated by the simulator.

After it being pointed out that my images were not the correct size I looked into it to realise that unless you have the simulator running at the native res display.save will stretch / shrink the image. After running the code with the simulator at the correct size and trying again using those images it worked correctly.

Thank you both for your help in getting this matter resolved!

Also, thank you Josh for the suggestion to use PNG for my mask images. I would normally do this, but as I stated above these images are being generated and saved so I am limited to the out put that I am given. It is a little annoying with the artifacting coming through, but I’m hoping in the long run it’s not going to be enough to be noticeable.

Stevil [import]uid: 133056 topic_id: 31344 reply_id: 125359[/import]

#9

Great! Glad we could help!

If you want to “borrow” some mask images for testing purposes, have a look at sample project “Graphics/Flashlight” and “Graphics/X-ray”. The Flashlight sample project in particular demonstrates a very cool effect that you can implement with masks. Have fun! [import]uid: 32256 topic_id: 31344 reply_id: 125374[/import]