Problems with PNG images? Use these methods to fix your PNGs
TaoOfSalad
Member, Chef Emeritus Posts: 83
EXPERIMENTAL: Use the methods in this thread at your own risk. Always backup your projects before attempting these methods. Please read through the whole process and the PROs and CONs of each method before trying them.
AUDIENCE: These methods are for:
- Developers who are re-publishing older games with a newer version of GameSalad, but that have irregular PNGs that worked in older versions on some platforms.
- Developers who use an image authoring tool or optimizer that outputs irregular PNGs.
- Developers who see color issues with their images of any sort, often caused by incorrect transparency, alpha, or premultiplied alpha.
TROUBLESHOOTING: Match your issue with these solutions
- My images with transparency show white or solid color instead of transparent.
- Try Method 1 below. Your images use a combination of color indexing and alpha channel that isn't supported by all image programs. The batch conversion will change them to a more commonly supported encoding.
- My images appear washed out, over-saturated, or otherwise wrong in color.
- Try Method 1 below. Your images have an embedded ICC color profile that differs from typical computer/digital display settings. ICC color profiles are meant to support interoperation with non-digital media like print, film, and television programs by calibrating color correction techniques. The batch conversion will remove these profiles and convert colors back to the typical sRGB color space for digital displays. If this is a recurring issue, check your image authoring program settings. You may have unusual setting for something called "color space," "color correction," "gamma correction" or "chromaticity ." Resetting these to a default value might fix the ongoing issue.
- My images still have transparency/color saturation issues after trying Method 1.
- Your images might be 16 bits/channel or other. GameSalad (which depends on OpenGL) only supports 8 bits/channel. Use Method 2 to batch convert your images to 8 bits/channel. If this is a recurring issue, check your image authoring program settings and choose 8 bits/channel to avoid the ongoing issue.
- I use Photoshop and none of the above solutions helped.
- You can avoid any Photoshop PNG issues by import PSD files directly by dragging them into Creator, just like other image formats. Meanwhile, add a comment here detailing the issues you see and your Photoshop image settings. We may be able to investigate and provide a better solution.
- I use an image program other than Photoshop and none of the above solutions helped.
- Check that your are saving 32-bit PNGs, 8-bits/channel, sRBG color space, no ICC profile. Choose the lowest compression setting and avoid palette/index settings. 24-bit PNGs might be okay. If tweaking the settings doesn't help, add a comment here detailing the issues and your program settings so we can investigate. In the meantime, you might experiment with other image authoring programs to see if you get better results. As a last resort, you can try Methods 3 or 4 below.
CHECK THIS FIRST
- If you use Photoshop and have problems with "Save for Web" PNGs, you can instead import the source PSD files directly by dragging them into Creator. Creator will flatten and convert them to safe PNGs.
- If your image software allows setting bits/channel, choose 8 bits/channel. Other options like 16 bits/channel may break.
METHOD 1: Use sips to re-encode PNG files with standard ICC profiles
- BACKUP A COPY OF YOUR PROJECT!
- sips is a built-in Mac command line tool, so you don't need to install anything new.
- Open a Terminal window. Save and close GameSalad if it is open.
- cd to the gameproj file you want to edit. Use ls images to confirm that you are in the right folder. (See Terminal tips below)
- Enter: sips --deleteColorManagementProperties images/*.png
- This command tells sips to read and remove embedded ICC color profiles from all the PNG files in your project. In doing so, it writes them back to disk using a plain PNG encoder, which should fix the exotic PNG encoding from the original files.
- PRO: sips is already installed on Mac, so this method requires no installation and is quick to try.
- CON: Not available for Windows. Might not handle as many PNG varieties as Image Magick.
Example:
cd ~/folder-with-your-projects/MyGreatProject.gameproj
ls images
sips --deleteColorManagementProperties images/*.png
METHOD 2: Use sips to convert PNGs to 8 bits/channel
- BACKUP A COPY OF YOUR PROJECT!
- sips is a built-in Mac command line tool, so you don't need to install anything new.
- Open a Terminal window. Save and close GameSalad if it is open.
- cd to the gameproj file you want to edit. Use ls images to confirm that you are in the right folder. (See Terminal tips below)
- Enter: for f in images/*.png; do sips --setProperty bitsPerSample 32 "$f"; done
- This command tells sips to re-encode all PNG files with 8 bits per channel.
- PRO: sips is already installed on Mac, so this method requires no installation and is quick to try.
- CON: Not available for Windows. Might not handle as many PNG varieties as Image Magick.
Example:
cd ~/folder-with-your-projects/MyGreatProject.gameproj
ls images
for f in images/*.png; do sips --setProperty bitsPerSample 32 "$f"; done
METHOD 3: Use Image Magick to convert PNGs to 32-bit
- BACKUP A COPY OF YOUR PROJECT!
- Install Image Magick via Homebrew or MacPorts or other. In the end, you should have Image Magick command line programs available such as 'convert', 'identify', and 'mogrify'.
- Open a Terminal window. Save and close GameSalad if it is open.
- cd to the gameproj file you want to edit. Use ls images to confirm that you are in the right folder. (See Terminal tips below)
- Enter: mogrify -format png -define png:color-type=6 -depth 8 images/*.png
- this command converts all the PNG files to 32-bit PNGs and overwrites the existing files.
- PRO: All the images are still PNGs and they are in a suitable format for loading in GameSalad. Plus you can still edit the PNGs with another image editing program (but beware if those programs save in an irregular format or do lossy conversion).
- CON: PNGs may load slower in the Viewer but this issue is only present during development. After publishing, your PNGs will be converted to the more efficient gsimage format.
Example:
cd ~/folder-with-your-projects/MyGreatProject.gameproj
ls images
mogrify -format png -define png:color-type=6 -depth 8 images/*.png
METHOD 4 (No Longer Recommended): Use Image Magick to convert PNGs to TGAs, but keep the .png file extension
- BACKUP A COPY OF YOUR PROJECT!
- Install Image Magick. (see Method 2)
- Open a Terminal window. Save and close GameSalad if it's open.
- cd to the gameproj file you want to edit. Use ls images to confirm that you are in the right folder. (See Terminal tips below)
- Enter: mogrify -format tga images/*.png; for f in images/*.tga; do mv "$f" "${f%.tga}.png"; done
- This command converts all the PNG files to the TGA format as .tga files. Then it renames all those .tga files to have the .png file extension. The previous .png files will be overwritten.
- PRO: Converts all images to the more robust and performant TGA format. Creator will read these just fine.
- CON: The fact that the resulting files have the .png extension, but aren't actually PNG encoded files, may lead to confusion if you use another image editing tools after import or if you share the project with other artists and developers.
Example:
cd ~/folder-with-your-projects/MyGreatProject.gameproj
ls images
mogrify -format tga images/*.png; for f in images/*.tga; do mv "$f" "${f%.tga}.png"; done
TERMINAL TIPS
- 'cd' in the Terminal means 'Change Directory'. You can type cd and then a space, then drag your gameproj file from a Finder window into the Terminal window to auto-complete the folder path.
- 'ls' in the Terminal means "List" and it displays the names of files in a folder. When you enter ls images you should see a list of the image files for your project. If not, you're in the wrong folder. Go back to step one.
OTHER POSSIBLE TOOLS (see comments for further detail):
Comments
On a very brief test of my own, i've managed to find a 3rd Party Batch extension for GIMP, named BIMP: http://www.alessandrofrancesconi.it/projects/bimp/
This allows me to import compressed images, or a folder of images, and then re-export them back out as non compressed PNG files, and also make adjustments to files as required. When exporting though, i just set the export to 0% compression without any changes. Of course, its a quick test and worked for me, but it other peoples results may vary. (The images were created by a third party so i didnt investigate whether they are 32 bit non palleted or not, but they were all 72DPI)
I threw them through RC 11.0.6 at the time on a project, with the new images, and they showed no anomalies with the graphics. To clarify, the original images worked fine in 0.10.x builds, but came up looking washed out or overbright in the RC builds. It seemed to have fixed my issue. More testing is required though to say this worked, as i've been flat our with work and...Diablo 3 expansion
I'm assuming GS (eventually) will optimise the compression process their end to bring the file size of the final packages down.
Either way, its possibly another way to work around this? I will redact this if i find further problems though.
Sounds like a promising solution. I'll add a section on the OP for other third parties tools.
Generally speaking - by that I mean outside of the need to resolve compatibility issues with exotic PNG formats - are TGA files preferable to PNG files when using Creator ?
@Socks I would say TGA may be preferable due to its own unpopularity and inherit benefits. These 'exotic' PNG files are not really exotic at all. They are just up to date with technology. The fact that major software companies like Adobe do not take advantage of all the power PNG has to offer is a mystery. Maybe the answer to this mystery is a can of worms. From the feeling I am getting from these discussions it is a can of worms at a worm party. A browser can accept these exotic png files as they adhere to the PNG specification (not a can of worms). Most are trying to get a reduction by mixing a low level 256 colour selective colour palette with a high level 256 level transparency palette.
We either get to use a True Colour + Alpha image.
Or we get to use an Indexed image.
There are seven combinations of image and alpha for PNG.
GameSalad appears to use two.
'Exotic' PNG file producers use the Indexed and Alpha which is the most powerful PNG in terms of compression and image quality designed for the web.
Smooth for the web alright.
But I do not know how these things translate in to gaming and in particular GameSalad.
I trust the devs have this all in hand.
The preference matters less now that we convert to gsimage. You should prefer compatibility over size concerns. The HTML5 engine still only supports PNG, so that's one case where you need PNG. TGA might load faster on the Viewer, and less can go wrong with TGA with regard to these palette/premultiply issues. PNG might have more currency if you are collaborating or contracting with artists. PNG might also upload faster to GS publishing. If you can batch convert everything without losing quality and without changing the file names, then there's no harm in experimenting with either choice. Just avoid lossy conversions (like pngquant or JPEG).
Cheers for the reply.
I made a few edits to the original post. I made the PNG method the first method as I now think it's the less risky proposition. While the TGA method might be my preferred, I fear some might get really confused with all those TGA files with a .png extension, especially if they are working with a team or client and not everyone is wise to the image trickery.
I edited the original post again, this time with a new method 1 using sips instead of Image Magick. sips is already installed on Mac so it's much easier to set up and try it out. I haven't tested every case but I think might cover all the same cases as Image Magick.
The method didn't work for me.
Even when trying with new png's (made with photoshop CS6) the images still have problems (White sections and with artifacts where it should be transparent). They look fine on the library and on the actors in the actor list, they even look fine while dragging the actors to the scene... But once placed in the scene the image transparency get all messed up.
Can you share more about how you're saving from Photoshop? Ideally, you want the image to be RGB truecolor, sRGB color space, no ICC profile. And you want to "Save As" a PNG-24 or PNG-32, not "Save for Web".
They are being saved as png, RGB, 16bits/channel, tried all options with same results (compression: none and smallest, interlaced None and interlaced)...
I am working with Photoshop CS6
Hmm, can you change them to 8bits/channel? I think the engine might not like 16bits/channel.
Yeah, that seems to fix it.
But it kind of contradict what you guys posted:
"We have done compatibility testing with many of the popular image creation application. Here are the ones we know that work with our new loading code: Fireworks, Photoshop, Inkscape, Gimp, Illustrator (however, we do not support Photoshop exported 8 bit PNGs)."
Or I am misunderstanding this.
@Chechesoft Sorry for the misunderstanding but thank you very much for helping us out. Image authoring programs are big versatile tools with lots of options and quirks. The more reports and feedback we get, the better we can help developers and communicate possible issues.
Edited the original post to include a "try this first" section. There I added a caution about 16 bits/channel.
So, for old projects, I have to convert all my graphics to 8 bits on photoshop and then replace them on my project? Or is there a way to convert them on the project itself?
Okay, what the heck is going on here.. People in this thread are saying "Photoshop 8bit does not work", then others are saying "I should convert my images using Photoshop - to 8bit"? O.o
ALL of my images are created in photoshop, and are all 8bit. Is this good, or bad?
Lets make it clear. Thank you!
Yup... I agree... Seems very confusing.
photoshop 8 bit PNG format can hardly be called non-standard, exotic or irregular. It's one of the most widely used formats in mobile gaming... Generated from the most widely used image processing software in the world.
It should be one of the first formats that GameSalad test against, and have support for... And should be one of the most widely documented PNG graphics formats out there.
So for it to now be broken and not supported, and labelled as non-standard, exotic or irregular is a joke.
I don't see how improved ingame image processing speed, at the cost of increased app size, increased loading times, and the removal of support of one of the most widely used graphics formats can be an overall improvement... Surely that's steps backwards...
Thanks Gamesalad, now all my apps are ruined! Now I need to convert all my images in my apps it will cost me tons of time because of this bullshit!
@TaoOfSalad
A few questions:
I use Photoshop CS6 as well... all of my images are 8bit. They look great on the 4s but it looks like crap on a iPad 2. I'm wondering if its just an iPad 2 issue because of the lack of retina display because in the creator and adhoc iPhone 4s, its beautiful and crisp.
Can I no longer save my images as .PSD and drag them to the Creator?
www.appdore.com || appdore twitter || appdore facebook
You can always install and work with an older build of game salad....
I think the issue is probably the re scaling of the graphics to non retina. The size of your graphics must all be divisible by 4.
Without knowing more, I'd suspect it's to do with screen resolution, not image format. The sizing issues may be compounded even more if you are using stretch or overscan to fit an iPhone game to the iPad aspect ratio.
I just tested this and it works for me. If I recall correctly, the contents of the PSD will be flattened, converted to a (safe) PNG, and saved in the project. Actually, I'm going to add that to the list of methods to test for Photoshop users.
Thanks @TaoOfSalad
I was thinking that it was more of a iPad 2 issue than anything since it looks alright on a Nexus 7 and Kindle Fire HDX as well.
And I'm happy the .PSD dragging is still okay as it's a time saver.
www.appdore.com || appdore twitter || appdore facebook
sips method worked great, Thanks!
BRUNKT.com
Follow me at: Twitter - Instagram
Games and Templates
Appstore
I had no idea you could drag .PSD's into Game Salad. SCORE.
Updated the original post once again with a troubleshooting/FAQ style to help readers. It seems that newest Method 1 with sips is easiest and most helpful so I've guided most toward that. Also added a new method using sips to batch convert 16 bits/channel because that would otherwise be tedious to convert one at a time.
Not working the batch converting with sips:
"Error: Cannot do --setProperty bitsPerSample on file
/Users/juan/Desktop/rm.gameproj/images/twitt.png"
Hmm. sips is a bit fickle about batching. I'l try a new command that uses a bash script to process one image at a time. This is just for method 2, dealing with converting 16 bits/channel images. I updated the OP. Here's the updated command:
for f in images/*.png; do sips --setProperty bitsPerSample 32 "$f"; done
Let me know if that works.
Still no luck.
".../Users/Cheche/Desktop/rm.gameproj/images/CERRO.png
Error: Cannot do --setProperty bitsPerSample on file
/Users/Cheche/Desktop/rm.gameproj/images/CERRO.png
/Users/Cheche/Desktop/rm.gameproj/images/GAMEOVER.png
Error: Cannot do --setProperty bitsPerSample on file
/Users/Cheche/Desktop/rm.gameproj/images/GAMEOVER.png
/Users/Cheche/Desktop/rm.gameproj/images/PAUSA.png
Error: Cannot do --setProperty bitsPerSample on file..." and so on.
May be its me that is doing something wrong, did you succesfully tried this command yourself?