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

Solar2D Daily Builds and Public Releases
#1

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:

-- 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
[import]uid: 8444 topic_id: 20939 reply_id: 320939[/import]

#2

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! [import]uid: 32256 topic_id: 20939 reply_id: 82992[/import]

#3

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

-Angelo [import]uid: 12822 topic_id: 20939 reply_id: 83002[/import]

#4

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.
[import]uid: 8444 topic_id: 20939 reply_id: 83001[/import]

#5

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 :wink: [import]uid: 8444 topic_id: 20939 reply_id: 83003[/import]

#6

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. [import]uid: 32256 topic_id: 20939 reply_id: 83010[/import]

#7

Have the same problem. Can’t add anything here, Joe’s covered it. Interested to hear any results. [import]uid: 40137 topic_id: 20939 reply_id: 83040[/import]

#8

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. [import]uid: 5742 topic_id: 20939 reply_id: 83056[/import]

#9

I am seeing this on both Fire and Nook also. (not helpful but I want to be kept up-to-date on this thread). [import]uid: 39505 topic_id: 20939 reply_id: 83629[/import]

#10

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. [import]uid: 8697 topic_id: 20939 reply_id: 83644[/import]

#11

@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. [import]uid: 8444 topic_id: 20939 reply_id: 83667[/import]

#12

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. :slight_smile:
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
[import]uid: 107675 topic_id: 20939 reply_id: 84000[/import]

#13

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. [import]uid: 4289 topic_id: 20939 reply_id: 84233[/import]

#14

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.
[import]uid: 32256 topic_id: 20939 reply_id: 84246[/import]

#15

Thanks for keeping us updated Josh. Much appreciated! [import]uid: 40137 topic_id: 20939 reply_id: 84396[/import]

#16

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 [import]uid: 107675 topic_id: 20939 reply_id: 84401[/import]

#17

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 [import]uid: 77183 topic_id: 20939 reply_id: 84630[/import]

#18

I don’t have anything earth-shattering to add, but I thought I’d mention that we, too, are currently blocked by this issue. [import]uid: 65996 topic_id: 20939 reply_id: 85676[/import]

#19

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 :frowning: ).

[import]uid: 9840 topic_id: 20939 reply_id: 87119[/import]

#20

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. [import]uid: 32256 topic_id: 20939 reply_id: 87138[/import]