Problems with PNG images? Use these methods to fix your PNGs

TaoOfSaladTaoOfSalad Member, Chef Emeritus Posts: 83
edited May 2014 in Working with GS (Mac)

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

  1. BACKUP A COPY OF YOUR PROJECT!
  2. sips is a built-in Mac command line tool, so you don't need to install anything new.
  3. Open a Terminal window. Save and close GameSalad if it is open.
  4. 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)
  5. Enter: sips --deleteColorManagementProperties images/*.png
  6. 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.
  7. PRO: sips is already installed on Mac, so this method requires no installation and is quick to try.
  8. 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

  1. BACKUP A COPY OF YOUR PROJECT!
  2. sips is a built-in Mac command line tool, so you don't need to install anything new.
  3. Open a Terminal window. Save and close GameSalad if it is open.
  4. 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)
  5. Enter: for f in images/*.png; do sips --setProperty bitsPerSample 32 "$f"; done
  6. This command tells sips to re-encode all PNG files with 8 bits per channel.
  7. PRO: sips is already installed on Mac, so this method requires no installation and is quick to try.
  8. 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

  1. BACKUP A COPY OF YOUR PROJECT!
  2. 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'.
  3. Open a Terminal window. Save and close GameSalad if it is open.
  4. 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)
  5. Enter: mogrify -format png -define png:color-type=6 -depth 8 images/*.png
  6. this command converts all the PNG files to 32-bit PNGs and overwrites the existing files.
  7. 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).
  8. 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

  1. BACKUP A COPY OF YOUR PROJECT!
  2. Install Image Magick. (see Method 2)
  3. Open a Terminal window. Save and close GameSalad if it's open.
  4. 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)
  5. Enter: mogrify -format tga images/*.png; for f in images/*.tga; do mv "$f" "${f%.tga}.png"; done
  6. 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.
  7. PRO: Converts all images to the more robust and performant TGA format. Creator will read these just fine.
  8. 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):

«13

Comments

  • TinpotTinpot Member Posts: 54
    edited April 2014

    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 :smiley:

    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.

  • TaoOfSaladTaoOfSalad Member, Chef Emeritus Posts: 83

    @Tinpot said:

    Sounds like a promising solution. I'll add a section on the OP for other third parties tools.

  • SocksSocks London, UK.Member Posts: 12,822
    edited April 2014

    @TaoOfSalad said:

    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 ?

  • mataruamatarua Auckland, New ZealandMember Posts: 854

    @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.

  • TaoOfSaladTaoOfSalad Member, Chef Emeritus Posts: 83

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

  • SocksSocks London, UK.Member Posts: 12,822

    @TaoOfSalad said:

    Cheers for the reply.

  • TaoOfSaladTaoOfSalad Member, Chef Emeritus Posts: 83

    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.

  • TaoOfSaladTaoOfSalad Member, Chef Emeritus Posts: 83

    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.

  • ChechesoftChechesoft Member, PRO Posts: 171

    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.

  • TaoOfSaladTaoOfSalad Member, Chef Emeritus Posts: 83

    @Chechesoft said:
    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".

  • ChechesoftChechesoft Member, PRO Posts: 171

    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

  • TaoOfSaladTaoOfSalad Member, Chef Emeritus Posts: 83

    Hmm, can you change them to 8bits/channel? I think the engine might not like 16bits/channel.

  • ChechesoftChechesoft Member, PRO Posts: 171

    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.

  • TaoOfSaladTaoOfSalad Member, Chef Emeritus Posts: 83

    @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.

  • TaoOfSaladTaoOfSalad Member, Chef Emeritus Posts: 83

    Edited the original post to include a "try this first" section. There I added a caution about 16 bits/channel.

  • ChechesoftChechesoft Member, PRO Posts: 171

    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?

  • JodyMitomaJodyMitoma Member Posts: 307

    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! :)

  • ChunkypixelsChunkypixels Member Posts: 1,114

    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...

  • mastermindsmasterminds Member, PRO Posts: 44

    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!

  • iamcarteziamcartez Houston, TexasMember Posts: 648

    @TaoOfSalad
    A few questions:

    1. 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.

    2. Can I no longer save my images as .PSD and drag them to the Creator? :(

  • ChechesoftChechesoft Member, PRO Posts: 171

    @masterminds said:
    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!

    You can always install and work with an older build of game salad....

  • ChechesoftChechesoft Member, PRO Posts: 171

    @iamcartez said:
    TaoOfSalad
    A few questions:

    1. 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.

    2. Can I no longer save my images as .PSD and drag them to the Creator? :(

    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.

  • TaoOfSaladTaoOfSalad Member, Chef Emeritus Posts: 83

    @iamcartez said:

    1. 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.

    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.

    1. Can I no longer save my images as .PSD and drag them to the Creator? :(

    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.

  • iamcarteziamcartez Houston, TexasMember Posts: 648

    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.

  • 8bitninja8bitninja Member Posts: 367

    sips method worked great, Thanks!

  • JodyMitomaJodyMitoma Member Posts: 307

    I had no idea you could drag .PSD's into Game Salad. SCORE.

  • TaoOfSaladTaoOfSalad Member, Chef Emeritus Posts: 83

    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.

  • ChechesoftChechesoft Member, PRO Posts: 171
    edited May 2014

    @TaoOfSalad said:
    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"

  • TaoOfSaladTaoOfSalad Member, Chef Emeritus Posts: 83

    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.

  • ChechesoftChechesoft Member, PRO Posts: 171
    edited May 2014

    @TaoOfSalad said:
    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?

Sign In or Register to comment.