How can I address images with artifacts, transparency or color issues?

In Creator 0.11, we refactored the way images were handled internally to prepare for a variety of longer-term improvements in project stability and performance.  As a result, some previously supported variants of the PNG file format are no longer supported.

Here are some suggested steps for resolving common PNG issues in newer versions of Creator.

 

(from http://forums.gamesalad.com/discussion/67365/problems-with-png-images-use-these-methods-to-fix-your-pngs/ )

 

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

Was this article helpful?

Related Articles