Semi-transparent pixels of images are getting mixed with black on the Kindle Fire.

41 replies [Last post]
firemaplegames
User offline. Last seen 9 weeks 4 days ago. Offline
Joined: 24 Aug 2010

Hey everyone!

I opened a bug report but figured I'd post here too in case anyone else has encountered this.

Semi-transparent pixels of images are getting composited with black on the device.

It makes it so that all .png images with transparency have black halos around
them.

And if I fade the alpha of any image (png or jpg) it will get mixed with black. So it looks like images are fading up from black as opposed from transparent.

I made the simplest example that I could: a white box on a white background.
If I set the box's alpha to 0.5 it appears gray.

It works perfectly in the simulator, this only shows up on the actual device.

I am currently testing this on a Kindle Fire but I assume it happens across all
Android devices.

Here is some simple code to test it out:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
-- Main function-------------------------------------------------------------------------
local function main()
        
        -- white bg
        local bg = display.newRect( 0, 0, 480, 320 )
        bg:setFillColor( 100,100,100 )
        bg.x = 240
        bg.y = 160
        
        -- whitebox
        local whitebox = display.newImage("whitebox.png")
        whitebox.x = 150
        whitebox.y = 160
        whitebox.alpha = 0.5
        
        return true
end
------------------------------------------------------------------------------------------
 
-- Begin
main()

(the 'whitebox.png' is just a solid white rectangle saved out of photoshop as a PNG-24 file)

Any clues are appreciated!

Thanks,
Joe

EDIT: apparently it is just a Fire issue or perhaps an Android 2.2 issue according to the comments posted by XenonBL in this thread:
http://developer.anscamobile.com/forum/2011/11/18/kindle-fire-first-tests-corona

Replies

Joshua Quick
User is online Online
Staff
Joined: 31 Jan 2011

Hello Joe,

We have received reports of this issue, but we're still unable to reproduce it on our end. Notice that all of the sample apps that are included with the Corona SDK do not have this problem. For example, try building and running our "Graphics\Fishies" sample app for your Kindle Fire and notice that there are no black outlines around this fish.

I suspect that this may be an issue with the format of your PNG files. Perhaps your PNG files are using premultiplied alpha? Would you mind clicking the "Report a Bug" link at the top of this page and send us your simple code shown above along with the PNG file that is giving you trouble? Thanks!

firemaplegames
User offline. Last seen 9 weeks 4 days ago. Offline
Joined: 24 Aug 2010

Hey Joshua! I will try out the samples and see if I can see whats up or if there are any differences between the images.

I hope that it is the issue!

I did submit a bug report the other day.

It is bug #11763 I've attached my sample files to the bug report.

Yobonja
User offline. Last seen 22 weeks 1 day ago. Offline
Joined: 19 Dec 2010

Hey Joe ~ I also have this problem, please let me know if you find a fix!

-Angelo

firemaplegames
User offline. Last seen 9 weeks 4 days ago. Offline
Joined: 24 Aug 2010

Ok, so I tested the Fishies sample and can confirm that has the issue as well. Now it is VERY subtle with those fish graphics as they already have a faint black outline already.

You can barely see it when they change from red to blue, but they do fade down towards black while they change.

But that is a very subtle example!

If you kill the background fishtank graphic and replace that with white, and then replace the fish graphic with a solid white .png set to 0.5 alpha you will see the issue.

On the simulator it will appear correctly, you won't be able to see the 50% opaque white fish swimming on top of a white background. It will just look like a white rectangle.

But on the Fire and the Nook it will appear as a bunch of gray boxes swimming around.

Cartoony graphics with black outlines will disguise the issue - which is how I worked around some of the graphic issues in my game.

But that is not always possible.

The issue is not present on Android 2.3 as far as I can tell. It seems isolated to 2.2 - and I assume the Fire and Nook are targeting some version of 2.2

Normally I wouldn't complain. I would just chalk it up to a quirky problem on an outdated version of Android. But the Fire and Nook are pretty big markets right now. And my game is very heavily reliant on graphics ;-)

Joshua Quick
User is online Online
Staff
Joined: 31 Jan 2011

Thanks for posting the results Joe. Hmm... this sounds like an anti-aliasing issue. I bet you that RGB of the transparent part of your image is filled with black and it is bleeding through the edges of the alpha-blended parts. At least that's my current theory. I'll let you know when I come up with a solution.

RestlessNativeGames
User offline. Last seen 26 weeks 2 days ago. Offline
Joined: 21 Feb 2011

Have the same problem. Can't add anything here, Joe's covered it. Interested to hear any results.

DVD Guy
User offline. Last seen 32 weeks 6 days ago. Offline
Joined: 23 Mar 2010

Hi Joe - both the Fire & the Nook are custom builds of Android 2.3. I don't think the OS version or variant is the issue. I suspect the processor, since both the Fire & the Nook use the TI OMAP 4. It would be nice to find another Android device based on this to confirm, but I haven't found one.

hawkwood
User offline. Last seen 6 weeks 5 days ago. Offline
Joined: 19 Feb 2011

I am seeing this on both Fire and Nook also. (not helpful but I want to be kept up-to-date on this thread).

cublah
User offline. Last seen 4 hours 46 min ago. Offline
Joined: 5 Sep 2010

I've noticed this problem too, but I noticed it on some white text with a black outline.

When I fade this text down by changing the Alpha, it works as expected on all IOS devices but on the Kindle and Nook the white text goes grey and looks a little weird.

firemaplegames
User offline. Last seen 9 weeks 4 days ago. Offline
Joined: 24 Aug 2010

@cublah: yes, I meant to say this as well. Fading the alpha of text will cause the text to be composited with black too.

Like above, this would be most noticeable fading white text on a white background.

I assume it is all the same problem.

Also, if you set the blendMode to "add", this actually works correctly. The black is not visible, even if you set the alpha of a display object or text - which is how it is supposed to work with an additive blend mode.

@cublah, I believe you can set the blendMode property of text (not sure) but that might actually fix your fading issue.

a.lepel
User offline. Last seen 13 hours 53 min ago. Offline
Joined: 28 Nov 2011

I have the same problems:

* custom fonts on Kindle show the dark outline
* PNGs have dark areas where the value of alpha < 1

I generate my PNGs with Photoshop and save the PNGs for "web or devices" as PNG24.

Now I think PNG24 has 24-bit color depth.
And Android devices use 16bit or 32bit...

Using Flash Air 3.0 I can choose which color depth for the PNGs on Android devices should be used.
But thing is - I don't use Flash Air anymore. :-)
And I'm happy about Corona!

But could the problem be related to the Android 16-32-Bit issue?
Can I switch the color depth for the PNGs in corona, too?

Best,
Andreas

ron
User offline. Last seen 1 year 25 weeks ago. Offline
Joined: 19 Dec 2009

After playing with this for some time, I can honestly say that PNG 32, 24, or 16 do not actually effect the issue.

Additionally, if you have a square image with no transparencies and change opacity from 0 to 100%, it will fade in with a black border around the entire square. BUT if you have a square image with 0% transparencies in it, when fading it in using corona, only the opaque areas fade through black.

I hope this helps with debugging.

Joshua Quick
User is online Online
Staff
Joined: 31 Jan 2011

Everyone,

Thank you for posting your findings. This will be a really big help in narrowing down this issue. Would someone mind testing for this issue on the previous release version, build #484, please?
https://developer.anscamobile.com/downloads/coronasdk-2011484-505

We're currently trying to finish up our current commitments before we can look into this issue, but we hope to look into this by the middle of this month.

RestlessNativeGames
User offline. Last seen 26 weeks 2 days ago. Offline
Joined: 21 Feb 2011

Thanks for keeping us updated Josh. Much appreciated!

a.lepel
User offline. Last seen 13 hours 53 min ago. Offline
Joined: 28 Nov 2011

Hi Joshua,

I just took one of my test projects in an early phase and compiled it for Kindle with build #730:
http://apps.oetingerverlag.de/KuckuckPNG730.apk

On the right side of the screen I just put a yellow sun glare (it's totally out of place here, but its a PNG with transparency, just for testing).
After you installed it on the Kindle Fire (just download the APK directly on your Kindle) you'll see that around the sun glare there is a kind of dark halo (bad...).

Then I compiled it for Android with build #484, as you requested:
http://apps.oetingerverlag.de/KuckuckPNG484.apk

After you put in on your Kindle you'll see that everything is fine with the transparency on the Kindle.

This is the sun glare image PNG for download (for testing, its a Photoshop PNG24):
http://apps.oetingerverlag.de/scene01SunOnWater02.png

Hope you find this soon, at the end of february I have a meeting with international clients where I want to show them our new apps in development for iOS (all is fine) and for the Kindle Fire (because of all my transparent PNGs in my projects I can't show them anything, just looks too bad).

Hope this will help,
best,
Andreas

optionniko
User offline. Last seen 20 weeks 1 day ago. Offline
Joined: 19 Jul 2011

Hy there!

I just bought Kindle Fire and built my app with CoronaSDK 2012.732 and still got the problem, where semi-transparent pixels of an image are fading up from black instead from transparent.

Any advice?
Thank you!
Nick

simon.strange
User offline. Last seen 38 weeks 6 days ago. Offline
Joined: 1 Jun 2011

I don't have anything earth-shattering to add, but I thought I'd mention that we, too, are currently blocked by this issue.

elevatefun
User offline. Last seen 18 weeks 1 day ago. Offline
Joined: 7 Oct 2010

Has there been any fix, work around, or update? Our game is looking like crap right now on Fire and Nook right now (the biggest money making android devices :( ).

Joshua Quick
User is online Online
Staff
Joined: 31 Jan 2011

No fix yet. We did look into this for half a day once to see if we could solve it quickly... but this is not going to be a simple/quick fix. We're not going to have time to look into this issue until we've finished our Google in-app purchase support, which is TOP priority at the moment.

simon.strange
User offline. Last seen 38 weeks 6 days ago. Offline
Joined: 1 Jun 2011

This is a great response for two reasons:

1 - I means that Ansca now can see and reproduce this issue, so it CAN be fixed eventually.

2 - Android IAP support! Be still my heart!

schroederapps
User offline. Last seen 1 hour 36 min ago. Offline
Joined: 25 Jan 2011

Nothing of note to add, really, but a +1 for a fix on this issue. Thanks! :)

jlevasseur
User offline. Last seen 1 year 16 weeks ago. Offline
Joined: 8 Sep 2011

This is related but perhaps not the same issue: do Corona's alpha blending operations happen in linear color space? Or are you calculating blends with the sRGB values?

optionniko
User offline. Last seen 20 weeks 1 day ago. Offline
Joined: 19 Jul 2011

Hey Joshua,

Now that you've added Google IAP support, could you try and fix this issue?
We are almost finished with our app, and we're still hoping this issue won't delay the release date of our app!?

Could you please tell us expected date this bug will be fixed?

Thank you very much!
Nick

Joshua Quick
User is online Online
Staff
Joined: 31 Jan 2011

Actually, we just fixed this issue yesterday. Confirmed to be fixed on Kindle Fire and Nook Tablet (Nook Color never had this issue). The fix will be in daily build #763.

RicardoGraca
User offline. Last seen 7 hours 19 min ago. Offline
Joined: 17 May 2011

I'd just like to add that this also happens on a LG Optimus Black running Android 2.2. This phone also has a TI SoC, namely the OMAP3630.

Joshua Quick
User is online Online
Staff
Joined: 31 Jan 2011

My recommendation is to try build #763 on your LG and let us know if it works.

brad.herman
User offline. Last seen 20 weeks 14 hours ago. Offline
Joined: 10 Dec 2011

Yay on the fix. Now I just need to update my whole app to the new sprite code and test it with all the changes before rolling it out. :D

Joshua Quick
User is online Online
Staff
Joined: 31 Jan 2011

Everyone,

We published an early daily build now. It has the fix you need. Have at it. :)

vopmms
User offline. Last seen 1 year 2 weeks ago. Offline
Joined: 14 Jul 2009

@Joshua - I tested the new build on my Nook Color and the black pixels were gone but now there were white pixels and no tranparency around the sprite. Hard to describe but I took screenshots of my game so you can see.

Observe the text on the small thumbs.
http://dl.dropbox.com/u/155785/quickenough_menu.png

Observe the light bulbs:
http://dl.dropbox.com/u/155785/quickEnough_chal1.png

Seems to be most noticeable with sprites that have white anti aliasing.

Thanks.

Joshua Quick
User is online Online
Staff
Joined: 31 Jan 2011

Damn... it was working on my Nook Color, but this may depend on what's in the PNG file.

vopmms, would you mind sending me a simple project with those images so that I can reproduce this issue please? You can do so by clicking the "Report a Bug" link at the top of this page.

I'm in contact with Barnes & Noble's tech-support group trying to get an explanation of the difference in image loading behavior between Nook Color and Nook Tablet. It appears that one device loads images with premultiplied alpha and the other device does not... but neither one of them provide any information if the loaded image is premultiplied or not. What a pain in the ass.

vopmms
User offline. Last seen 1 year 2 weeks ago. Offline
Joined: 14 Jul 2009

Bug report submitted.

Darmod also confirmed that it was a problem on the Fire also.

Joshua Quick
User is online Online
Staff
Joined: 31 Jan 2011

On Kindle Fire too? Are you sure that you've tested with build #764?

vopmms
User offline. Last seen 1 year 2 weeks ago. Offline
Joined: 14 Jul 2009
Joshua Quick
User is online Online
Staff
Joined: 31 Jan 2011

Okay. I understand what's going on now and I've managed to fix it for real this time. The fix will be made available in build #765.

vopmms
User offline. Last seen 1 year 2 weeks ago. Offline
Joined: 14 Jul 2009

Thanks Joshua! Any chance we can get that over the weekend?

Joshua Quick
User is online Online
Staff
Joined: 31 Jan 2011

Yes! Our server should automatically publish build 765 by tomorrow morning.

vopmms
User offline. Last seen 1 year 2 weeks ago. Offline
Joined: 14 Jul 2009

Thanks! and thanks for the inapp purchase.

vopmms
User offline. Last seen 1 year 2 weeks ago. Offline
Joined: 14 Jul 2009

Alpha issue looks fixed in daily build 765 on Nook Color!

Joshua Quick
User is online Online
Staff
Joined: 31 Jan 2011

Happy to help! And thanks for confirming that this issue is fixed. We can finally rest easy.

optionniko
User offline. Last seen 20 weeks 1 day ago. Offline
Joined: 19 Jul 2011

YESSSSS Joshua!!!

Awesome... everything works as it should! :)

Now, if you guys manage to fix the delay bug with the storyboard.gotoScene(), you will be D BEST!!! :D

Thanks again for this fix!
Enjoy

Nick

valdivialuis1989
User offline. Last seen 2 years 15 weeks ago. Offline
Joined: 10 Aug 2011

Hi, I´m using the sprite_loq to generate my animations, but I want to use blendMode="multiply",is it possible?

1
2
3
4
5
6
local loqsprite = require('loq_sprite')
        local spriteFactoryPista = loqsprite.newFactory('pista')
        
        pista = spriteFactoryPista:newSpriteGroup()
        pista:setReferencePoint(display.TopCenterReferencePoint);
        pista.blendMode="multiply"

Viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.