Graphics issue on iPhone4 - and how to solve it.
firemaplegames
Member Posts: 3,211
Hey all,
So yesterday i picked up an iPhone4 and I was a little dismayed to find that I was getting some graphics glitches with my new game. This is not happening on the older devices.
Here is a screenshot:
If you look at the matchbox sitting on the table, you will see the black lines on the right and top of the image.
(The little matchbox is a separate image sitting on top of the background image.)
To keep my files sizes down, I have saved as many images as I can as PNG-8. Which is an indexed version of PNG-24 that only uses 256 colors. (PNG-24 uses 17 million colors).
Using PNG-8 can slash the file size by two-thirds. Which not only keeps the overall App size down - but drastically reduces loading times as well. This becomes a much larger issue when you have a lot of image assets in your game.
I figured that was the issue. That GS and iPhone4 weren't happy for some reason with the PNG-8 file format.
So I re-saved all my images as PNG-24 and re-imported them into my project. This instantly doubled the file size and the loading times were terrible. But if it fixes the issue, then so be it.
But it did not fix the issue. (thankfully!). Whether that matchbox graphic was PNG-8 or PNG-24, the black lines still showed up.
I tried changing the Graphics mode of the Actor from Stretched to Fixed, but no luck.
However, most of the other images in my game look fine. Specifically, odd-shaped PNG-24 graphics that require transparency all look fine.
The matchbox graphic in the above picture does not require transparency, as it is just a rectangle that sits on top of the background image.
I ran another test:
Here is the original matchbox image:
And here is my new one:
It might be hard to see, but I knocked out 1 pixel from the top-left corner in the second one and made that one pixel transparent.
The new image is still PNG-8.
That fixed the issue:
It seems there is a problem with images that have no transparency in them.
BTW, I am not using the new Resolution Independence feature for this game. This is just standard. And the game looks fine on all of the other devices, just not the iPhone4.
Anyway, just a word of warning if you are releasing your games without testing them on all devices.
And this might be a clue as to where those mysterious black seam lines come from when sometimes panning the camera or moving an image around.
I'll do some more tests when I get some time.
Right now I have to remove 1 pixel from hundreds of images!
Joe
So yesterday i picked up an iPhone4 and I was a little dismayed to find that I was getting some graphics glitches with my new game. This is not happening on the older devices.
Here is a screenshot:
If you look at the matchbox sitting on the table, you will see the black lines on the right and top of the image.
(The little matchbox is a separate image sitting on top of the background image.)
To keep my files sizes down, I have saved as many images as I can as PNG-8. Which is an indexed version of PNG-24 that only uses 256 colors. (PNG-24 uses 17 million colors).
Using PNG-8 can slash the file size by two-thirds. Which not only keeps the overall App size down - but drastically reduces loading times as well. This becomes a much larger issue when you have a lot of image assets in your game.
I figured that was the issue. That GS and iPhone4 weren't happy for some reason with the PNG-8 file format.
So I re-saved all my images as PNG-24 and re-imported them into my project. This instantly doubled the file size and the loading times were terrible. But if it fixes the issue, then so be it.
But it did not fix the issue. (thankfully!). Whether that matchbox graphic was PNG-8 or PNG-24, the black lines still showed up.
I tried changing the Graphics mode of the Actor from Stretched to Fixed, but no luck.
However, most of the other images in my game look fine. Specifically, odd-shaped PNG-24 graphics that require transparency all look fine.
The matchbox graphic in the above picture does not require transparency, as it is just a rectangle that sits on top of the background image.
I ran another test:
Here is the original matchbox image:
And here is my new one:
It might be hard to see, but I knocked out 1 pixel from the top-left corner in the second one and made that one pixel transparent.
The new image is still PNG-8.
That fixed the issue:
It seems there is a problem with images that have no transparency in them.
BTW, I am not using the new Resolution Independence feature for this game. This is just standard. And the game looks fine on all of the other devices, just not the iPhone4.
Anyway, just a word of warning if you are releasing your games without testing them on all devices.
And this might be a clue as to where those mysterious black seam lines come from when sometimes panning the camera or moving an image around.
I'll do some more tests when I get some time.
Right now I have to remove 1 pixel from hundreds of images!
Joe
Comments
// Red Dot Inc
My game loads faster simply because it is 9MB vs. 18MB, regardless of any technical reasons.
I started this game before the iPhone4 or Resolution independence came out. It will take me too long to redo all of my graphics.
In addition, to use Resolution Independence effectively, you have to do a lot of planning.
There is currently an issue that if you make your images have an odd dimension, you will get a slight blur. Since GS centers everything, that odd pixel will get split, causing the blur.
You will also get a blur if you place the Actor on a subpixel, like 405.5 instead of 405.
So with that in mind, I mentioned in that post you linked to above that not only does all of your images have to have even dimensions, but they have to be multiples of 4.
Otherwise a 70x70 pixel graphic will now become a 35x35 pixel graphic. Which will be blurred.
In addition, and I haven't tested this - but if your graphic is placed at x:25, y:25, when it gets resized, it will now it will be sitting at 12.5 and 12.5. Again, I haven't tested that, but I think that's correct.
Also, all of your images need to be 24-bit to look there best when they go through the PNG crusher to make the smaller images. And even then, you'll still get a some blurriness just from the resizing.
And now you will have two sets of PNG-24 images. So the file size will be out of hand.
It's one thing if you only have a few images, but I have close to 500 in my new game. I really have to be aware of the file size.
I suppose I don't have to bother so much, and just make a 700MB MYST game, but I'm trying to keep this game under 20MB so I can take advantage of 3G downloads.
Anyway, the prospect of Resolution Independence is amazing. It just takes a lot of forethought to make all the images the correct sizes and to place them all properly.
Plus, It might never get fixed.
And it might not be a bug with GameSalad. It might be an unavoidable issue with openGL ES.
Who knows.
But this fixes it for now until a better solution comes around.
Just something to be aware of before you release your games!
Thank you, Riffel
www.marcosriffel.com
And btw, those graphics are amazing!!!
In the old days, they used to say that jpegs loaded slower than other images because they were compressed and needed to decompress first before they could be displayed.
That's probably true. But it is so negligible. Even back then. Computers are so fast nowadays.
I'm actually not sure if PNG-8 files are more compressed than PNG-24 files. I thought the PNG-8 just has a smaller palette.
In my experience I haven't noticed a difference.
However, I do notice a big difference in the initial loading times. Loading a 100K image loads way faster than a 300K image.
My game right now loads fairly fast, and only a second or two between scenes.
I can do some more extreme testing at some point, but it seems legit right now.
I'm sure khakionion is correct, and that PNG-8 loads slower.
But in real world situations, where I am loading several MBs of graphics, I find that the keeping the overall file size down trumps the decompression times.
// Red Dot Inc
Just wanted to thank you for the thread, it's a nice temporary fix until this hopefully gets worked out
Then I tried to save those pictures to JPG, the black lines are still there when camera moves T_T
Plus, my back ground colour is white, so the black lines cannt be the empty pixel between two pictures.
Can anyone help me out? I m appreciate of that!