Problem with image odd dimensions

#21

Thank you for the patience of explaining that to me, Rob. :smiley:
Ah! On Inkscape I work by default with 4 channels, RGBA. :stuck_out_tongue: 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]

#22

Can you take some screen shots? [import]uid: 199310 topic_id: 36266 reply_id: 144228[/import]

#23

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ā€¦ :confused: 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]

#24

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. :confused: 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]

#25

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]

#26

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]

#27

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]

#28

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]

#29

Thank you for the patience of explaining that to me, Rob. :smiley:
Ah! On Inkscape I work by default with 4 channels, RGBA. :stuck_out_tongue: 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]

#30

Can you take some screen shots? [import]uid: 199310 topic_id: 36266 reply_id: 144228[/import]

#31

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ā€¦ :confused: 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]

#32

Hi again, Rob. Finally, I took a good screenshot from the device.
I took the screenshot of another image with the same problem of the eyes. I hope you can help me to solve that issue.

Here is the link to the image:
https://www.dropbox.com/s/uxy3du1ddtv414o/blurred.rar

Thanks. [import]uid: 162818 topic_id: 36266 reply_id: 145576[/import]

#33

Can you post the image? I donā€™t have a way to unpack rar files. [import]uid: 199310 topic_id: 36266 reply_id: 145589[/import]

#34

http://imageshack.us/photo/my-images/21/ondevice1.png/
http://imageshack.us/photo/my-images/826/onsimulator1.png/
http://imageshack.us/photo/my-images/201/ondevice2.png/
http://imageshack.us/photo/my-images/266/onsimulator2.png/ [import]uid: 162818 topic_id: 36266 reply_id: 145599[/import]

#35

ā€™
[import]uid: 162818 topic_id: 36266 reply_id: 145598[/import]

#36

Can you post your config.lua and what device are you trying to show it on?

Also post your code where youā€™re creating the image (display.newImage call) and any related code around it.

Donā€™t forget to put it inside of <code> and </code> tags.
[import]uid: 199310 topic_id: 36266 reply_id: 145604[/import]

#37

Iā€™m using LG Optimus L5.

config.lua
[lua]
width = 320,
height = 480,
scale = ā€œletterBoxā€,
fps = 30,
[/lua]

Code for the black guy(the guy I cut to show you is part of a sheet with 300x200 frame):
[lua]
local guySheetData = {width = 300, height = 200, numFrames = 49, sheetContentWidth = 1200, sheetContentHeight = 2600};
local guySheet = graphics.newImageSheet(ā€œguySheet.pngā€, guySheetData);
local guySequenceData = {
{ name = ā€œidleā€, start = 1, count = 26, time = 2500, loopCount = 1 },
{ name = ā€œrunningā€, start = 27, count = 19, time = 2200, loopCount = 1 }
}
local guy = display.newSprite(guySheet, guySequenceData);
[/lua]

Code for the face with the eye:
[lua]
local faceSheetData = {width = 450, height = 316, numFrames = 9, sheetContentWidth = 450*6, sheetContentHeight = 316*2};
local faceSheet = graphics.newImageSheet(ā€œface.pngā€, faceSheetData);
local faceSequenceData = {
{ name = ā€œanimateā€, start = 1, count = 3, time = 500, loopCount = 1},
}
local face = display.newSprite(faceSheet, faceSequenceData);
[/lua] [import]uid: 162818 topic_id: 36266 reply_id: 145608[/import]

#38

Hi @WilerJr,
Can you correct the ā€œnumFramesā€ value in each sheet and see what happens?

In case 1, you have it as ā€œ49ā€. It should be 52.
width = 300, sheet = 1200ā€¦ 4 frames across
height = 200, sheet = 2600ā€¦ 13 frames down
4 x 13 = 52

In case 2, you have it as ā€œ9ā€. It should be 12.
width = 450, sheet = 2700ā€¦ 6 frames across
height = 316, sheet = 632ā€¦ 2 frames down
6 x 2 = 12

Try this and see if anything changes.
Brent [import]uid: 200026 topic_id: 36266 reply_id: 145613[/import]

#39

That thing of counting frames instead of typing the first and the last confuses me.
Iā€™ll try what you said, Brent. As soon as I can, I come back here. [import]uid: 162818 topic_id: 36266 reply_id: 145641[/import]

#40

The frames of the first spritesheet are set to 49 because It has 52 frames, but I use only 49 and there are three empty frames. I use 9 of de 12 frames of the second spritesheet. But, as you have told, Iā€™ve set to 52 frames the first sheet and 12, the second, but nothing happened. It keeps a deep blurā€¦

I use frames with alpha = 0 which has the dimensions of each frame behind the images, but I guess it cannot be the problem, because as I said posts above, Iā€™ve already used the eyes in another project and it was not a blurry imageā€¦ [import]uid: 162818 topic_id: 36266 reply_id: 145707[/import]