I exported a ball with dimensions 100x100 into my app folder. I called that on my code with display.newImage. In the simulator, the image appears with very good quality, but on device the ball seems very fuzzy and ugly; its edges are marked with squares.
Why is this going on? How can I solve it?
Thanks. [import]uid: 162818 topic_id: 36266 reply_id: 336266[/import]
Can you post some screen shots?
Are you using 8bit PNG files vs 24/32bit PNG files?
[import]uid: 199310 topic_id: 36266 reply_id: 144064[/import]
I would be glad to show you the image, but on the device, but the device I use to test my apps is not with me right now…
I don’t really understand about that things about “8 bits” and “24/32 bits”; that might be my mistake. The only thing I do is to set the Inkscape properties to 480x320 and make the images fit 90dpi.
Can you tell me how to deal with the “8/24/32 bits” stuff you said?
Thanks. [import]uid: 162818 topic_id: 36266 reply_id: 144083[/import]
Without writing a book about this, there are two basic image formats, what is known as Indexed and one that is known as RGB.
Indexed images are things like GIF files or PNG files that use this format. Each pixel is represented by a single 8 bit number (0 - 255). Colors require more information than that to show all the color we can see, so these numbers are a look up into a table of RGB values. That is, color #0 might be Red:255, Green:0, Blue:0, color #1 might be Red 255, Green 255, Blue: 0 and so on. Each image is comprised of 256 total unique colors out of a pallet of 16 million colors. It’s 8 bit because each pixel takes up 1 - 8 bit byte.
RGB images however are different. Each pixel is represented by a Red, Green and Blue value, each one representing a brightness from 0 to 255 (0 = black, 255 = full amount of that color). The file is organized into “channels” think of each channel as an array of pixels and each byte in that array represents the brightness of that primary color at that pixel. This is called 24 bit color because each pixel is 3 - 8bit bytes (3x8 = 24). If you use Adobe Photoshop, they call it 24 bit.
In Corona and other products there is frequently a 4th channel of values from 0-255, which is known as the “Alpha Transparency” for that pixel. 0 is fully transparent, 255 is fully opaque. This channel, like the red or blue channels is a 2 dimensional array of bytes representing that pixel. So when you consider 24 bits of color data and now you have another 8 bits of transparency information, it’s now referred to as a 32bit color image.
I don’t know how InkScape names things but when you save it as a PNG you should have a choice of modes to save it in. 8 bit PNG’s have white blocky areas. Try it as a 24 bit or 32 bit or RGB image (depending on what they call it)
[import]uid: 199310 topic_id: 36266 reply_id: 144186[/import]
Thank you for the patience of explaining that to me, Rob. 
Ah! On Inkscape I work by default with 4 channels, RGBA. 
So if there’s no problem with the bit strucuture of the color, I don’t understand what’s going on. The ball I said I’ve drawn is an eye; on the simulator its graphics are really beautiful and have no visible imperfections, but on device the graphics seem very ugly and blurry. I don’t know what to do, Rob. [import]uid: 162818 topic_id: 36266 reply_id: 144227[/import]
Can you take some screen shots? [import]uid: 199310 topic_id: 36266 reply_id: 144228[/import]
As I said before, the device I’m using to test my apps is not with me these days. I can show you a comparison between image on device vs image on simulator by saturday or sunday… 
But will show you. I don’t think of deleting this thread, and I hope you can wait…
Thank you for now, Rob. I hope you’re here when I post the images. [import]uid: 162818 topic_id: 36266 reply_id: 144232[/import]
I’m back, Rob.
I tried using display.captureScreen(true) to save the image, but it didn’t save the image to device, so I had to take another device to take a photo from the screen. The photo is not that good, but, sincerely, it has changed the quality of the blurry eyes, can you believe? haha
The link to download a .rar with the images is below. The “bad” image is not clearly visible, but I guess you can see the imperfections around the circle compared to the “good” image. On device, it’s worse. I have another app developed with the same face and it’s not blurry! I made it as a gift for my girlfriend and the spritesheet is in pretty good quality!
http://www.dropbox.com/s/64digyfbullnhap/eyes.rar?m [import]uid: 162818 topic_id: 36266 reply_id: 144912[/import]
If you’re on an iPhone you can press the top power button and the home button at the same time to take a screen shot, or you can do it from Xcode organizer. If you’re on Android, then you need to teather your device to your computer and use the ddms command (comes with the Android Debug Bridge tools) to capture a screen shot
[import]uid: 199310 topic_id: 36266 reply_id: 144934[/import]
Can you post some screen shots?
Are you using 8bit PNG files vs 24/32bit PNG files?
[import]uid: 199310 topic_id: 36266 reply_id: 144064[/import]
I would be glad to show you the image, but on the device, but the device I use to test my apps is not with me right now…
I don’t really understand about that things about “8 bits” and “24/32 bits”; that might be my mistake. The only thing I do is to set the Inkscape properties to 480x320 and make the images fit 90dpi.
Can you tell me how to deal with the “8/24/32 bits” stuff you said?
Thanks. [import]uid: 162818 topic_id: 36266 reply_id: 144083[/import]
Without writing a book about this, there are two basic image formats, what is known as Indexed and one that is known as RGB.
Indexed images are things like GIF files or PNG files that use this format. Each pixel is represented by a single 8 bit number (0 - 255). Colors require more information than that to show all the color we can see, so these numbers are a look up into a table of RGB values. That is, color #0 might be Red:255, Green:0, Blue:0, color #1 might be Red 255, Green 255, Blue: 0 and so on. Each image is comprised of 256 total unique colors out of a pallet of 16 million colors. It’s 8 bit because each pixel takes up 1 - 8 bit byte.
RGB images however are different. Each pixel is represented by a Red, Green and Blue value, each one representing a brightness from 0 to 255 (0 = black, 255 = full amount of that color). The file is organized into “channels” think of each channel as an array of pixels and each byte in that array represents the brightness of that primary color at that pixel. This is called 24 bit color because each pixel is 3 - 8bit bytes (3x8 = 24). If you use Adobe Photoshop, they call it 24 bit.
In Corona and other products there is frequently a 4th channel of values from 0-255, which is known as the “Alpha Transparency” for that pixel. 0 is fully transparent, 255 is fully opaque. This channel, like the red or blue channels is a 2 dimensional array of bytes representing that pixel. So when you consider 24 bits of color data and now you have another 8 bits of transparency information, it’s now referred to as a 32bit color image.
I don’t know how InkScape names things but when you save it as a PNG you should have a choice of modes to save it in. 8 bit PNG’s have white blocky areas. Try it as a 24 bit or 32 bit or RGB image (depending on what they call it)
[import]uid: 199310 topic_id: 36266 reply_id: 144186[/import]
Thank you for the patience of explaining that to me, Rob.
Ah! On Inkscape I work by default with 4 channels, RGBA. So if there’s no problem with the bit strucuture of the color, I don’t understand what’s going on. The ball I said I’ve drawn is an eye; on the simulator its graphics are really beautiful and have no visible imperfections, but on device the graphics seem very ugly and blurry. I don’t know what to do, Rob. [import]uid: 162818 topic_id: 36266 reply_id: 144227[/import]
Can you take some screen shots? [import]uid: 199310 topic_id: 36266 reply_id: 144228[/import]
As I said before, the device I’m using to test my apps is not with me these days. I can show you a comparison between image on device vs image on simulator by saturday or sunday… But will show you. I don’t think of deleting this thread, and I hope you can wait…
Thank you for now, Rob. I hope you’re here when I post the images. [import]uid: 162818 topic_id: 36266 reply_id: 144232[/import]
I’m back, Rob.
I tried using display.captureScreen(true) to save the image, but it didn’t save the image to device, so I had to take another device to take a photo from the screen. The photo is not that good, but, sincerely, it has changed the quality of the blurry eyes, can you believe? haha
The link to download a .rar with the images is below. The “bad” image is not clearly visible, but I guess you can see the imperfections around the circle compared to the “good” image. On device, it’s worse. I have another app developed with the same face and it’s not blurry! I made it as a gift for my girlfriend and the spritesheet is in pretty good quality!
http://www.dropbox.com/s/64digyfbullnhap/eyes.rar?m [import]uid: 162818 topic_id: 36266 reply_id: 144912[/import]
If you’re on an iPhone you can press the top power button and the home button at the same time to take a screen shot, or you can do it from Xcode organizer. If you’re on Android, then you need to teather your device to your computer and use the ddms command (comes with the Android Debug Bridge tools) to capture a screen shot
[import]uid: 199310 topic_id: 36266 reply_id: 144934[/import]
Can you post some screen shots?
Are you using 8bit PNG files vs 24/32bit PNG files?
[import]uid: 199310 topic_id: 36266 reply_id: 144064[/import]
I would be glad to show you the image, but on the device, but the device I use to test my apps is not with me right now…
I don’t really understand about that things about “8 bits” and “24/32 bits”; that might be my mistake. The only thing I do is to set the Inkscape properties to 480x320 and make the images fit 90dpi.
Can you tell me how to deal with the “8/24/32 bits” stuff you said?
Thanks. [import]uid: 162818 topic_id: 36266 reply_id: 144083[/import]
Without writing a book about this, there are two basic image formats, what is known as Indexed and one that is known as RGB.
Indexed images are things like GIF files or PNG files that use this format. Each pixel is represented by a single 8 bit number (0 - 255). Colors require more information than that to show all the color we can see, so these numbers are a look up into a table of RGB values. That is, color #0 might be Red:255, Green:0, Blue:0, color #1 might be Red 255, Green 255, Blue: 0 and so on. Each image is comprised of 256 total unique colors out of a pallet of 16 million colors. It’s 8 bit because each pixel takes up 1 - 8 bit byte.
RGB images however are different. Each pixel is represented by a Red, Green and Blue value, each one representing a brightness from 0 to 255 (0 = black, 255 = full amount of that color). The file is organized into “channels” think of each channel as an array of pixels and each byte in that array represents the brightness of that primary color at that pixel. This is called 24 bit color because each pixel is 3 - 8bit bytes (3x8 = 24). If you use Adobe Photoshop, they call it 24 bit.
In Corona and other products there is frequently a 4th channel of values from 0-255, which is known as the “Alpha Transparency” for that pixel. 0 is fully transparent, 255 is fully opaque. This channel, like the red or blue channels is a 2 dimensional array of bytes representing that pixel. So when you consider 24 bits of color data and now you have another 8 bits of transparency information, it’s now referred to as a 32bit color image.
I don’t know how InkScape names things but when you save it as a PNG you should have a choice of modes to save it in. 8 bit PNG’s have white blocky areas. Try it as a 24 bit or 32 bit or RGB image (depending on what they call it)
[import]uid: 199310 topic_id: 36266 reply_id: 144186[/import]