GameSalad

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

TaoOfSaladTaoOfSalad Posts: 83Key Master, Head Chef, Member GameSalad Employee
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:
<br /> cd ~/folder-with-your-projects/MyGreatProject.gameproj<br /> ls images<br /> sips --deleteColorManagementProperties images/*.png<br />

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:
<br /> cd ~/folder-with-your-projects/MyGreatProject.gameproj<br /> ls images<br /> for f in images/*.png; do sips --setProperty bitsPerSample 32 "$f"; done<br />

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:
<br /> cd ~/folder-with-your-projects/MyGreatProject.gameproj<br /> ls images<br /> mogrify -format png -define png:color-type=6 -depth 8 images/*.png<br />

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:
<br /> cd ~/folder-with-your-projects/MyGreatProject.gameproj<br /> ls images<br /> mogrify -format tga images/&#42;.png; for f in images/&#42;.tga; do mv "$f" "${f%.tga}.png"; done<br />

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 Posts: 54Member
    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 Posts: 83Key Master, Head Chef, Member GameSalad Employee

    @Tinpot said:

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

  • SocksSocks London, UK.Posts: 12,711Member, PRO
    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 ZealandPosts: 854Member

    @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 Posts: 83Key Master, Head Chef, Member GameSalad Employee

    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.Posts: 12,711Member, PRO

    @TaoOfSalad said:

    Cheers for the reply.

  • TaoOfSaladTaoOfSalad Posts: 83Key Master, Head Chef, Member GameSalad Employee

    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 Posts: 83Key Master, Head Chef, Member GameSalad Employee

    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 Posts: 155Member, PRO

    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 Posts: 83Key Master, Head Chef, Member GameSalad Employee

    @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 Posts: 155Member, PRO

    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 Posts: 83Key Master, Head Chef, Member GameSalad Employee

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

  • ChechesoftChechesoft Posts: 155Member, PRO

    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 Posts: 83Key Master, Head Chef, Member GameSalad Employee

    @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 Posts: 83Key Master, Head Chef, Member GameSalad Employee

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

  • ChechesoftChechesoft Posts: 155Member, PRO

    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 Posts: 307Member

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

  • mastermindsmasterminds Posts: 43Member, PRO

    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, TexasPosts: 648Member

    @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 Posts: 155Member, PRO

    @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 Posts: 155Member, PRO

    @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 Posts: 83Key Master, Head Chef, Member GameSalad Employee

    @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, TexasPosts: 648Member

    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 Posts: 367Member

    sips method worked great, Thanks!

  • JodyMitomaJodyMitoma Posts: 307Member

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

  • TaoOfSaladTaoOfSalad Posts: 83Key Master, Head Chef, Member GameSalad Employee

    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 Posts: 155Member, PRO
    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 Posts: 83Key Master, Head Chef, Member GameSalad Employee

    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 Posts: 155Member, PRO
    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?

«13
Sign In or Register to comment.