I am having a bit of a tooling problem...and I am unsure of how to solve it.

I am currently using PyGame to try and write a simple Minesweeper clone, except my sprites that I made are hexagon based and therefore have diagonal lines.

I drew up a nice, clean, crisp vector sprite set which looks very nice in Inkscape, however once I export it everything goes to hell. I'm going to outline what I've done below and hopefully somebody here can set me straight :D

Disclaimer: Unfortunately I'm behind a proxy and cannot provide screenshots at the moment..I'll do my best to describe.

If I attempt to use a color key (0xFF00FF), then when I set the color key in PyGame I get a bunch of jagged pink edges along my sprite. I believe this could be an anti-aliasing issue with Inkscape, but unfortunately my Googling didn't turn up a way to disable it.

If I import my PNG into Photoshop or the Gimp and delete the background, then I run into an issue where the background appears to be black when running the game. I have tried to follow the instructions I saw on SO, but to no avail.

I am open to suggestions, but at this point I'm debating importing another library which can handle SVG graphics, in order to keep my clean, crisp diagonal lines.

  • \$\begingroup\$ I'm not familiar with PyGame, but it just sounds like a simple alpha channel problem to me. I would guess that if you're using a surface, you'd just need the 'SRCALPHA' flag to enable alpha blending. \$\endgroup\$ – Jonathan Connell Aug 1 '11 at 16:13
  • 3
    \$\begingroup\$ It sounds more like Inkscape is exporting with a colored background and blending the borders, leading to e.g. 0xFE01FE and so on, which won't get colorkeyed. Attaching a sample image would be helpful. \$\endgroup\$ – user744 Aug 1 '11 at 16:22
  • \$\begingroup\$ @Joe Wreschnig I assumed Inkscape already exportes PNG's with transparent background, is this not the case? \$\endgroup\$ – Jonathan Connell Aug 2 '11 at 8:12
  • 1
    \$\begingroup\$ @Jonathan: I have no idea but it sounds like it doesn't. It would be nice to see a sample image. \$\endgroup\$ – user744 Aug 2 '11 at 8:19
  • 2
    \$\begingroup\$ @Joe Wreschnig: Inkscape exports images with alpha-channel. The OP apparently drew a magenta background in Inkscape and the foreground gets blended into the background (anti-aliasing of the foreground shape). \$\endgroup\$ – bummzack Aug 2 '11 at 8:38

Try this in Photoshop:

  1. Make a new document.
  2. Make a new layer. It will be transparent.
  3. Delete the background layer.
  4. Your document should be all transparent now. It will look like a checkerboard.
  5. Draw the hexagon onto that transparent layer.
  6. Save this as a 24-bit PNG with transparency.

Now bring that into PyGame. You may need to do some convert_alpha() thing to enable the alpha channel. That should give you correct anti-aliased transparency.

| improve this answer | |
  • 2
    \$\begingroup\$ Exporting as 24-bit PNG should work in Inkscape as well, so that he doesn't have to switch to Photoshop. \$\endgroup\$ – bummzack Aug 2 '11 at 7:14
  • \$\begingroup\$ @bummzack: how does one export a 24-bit PNG? The only options I see for PNG are Save As -> Cairo PNG, or Export as Bitmap -> PNG (no bit option) \$\endgroup\$ – the_e Aug 2 '11 at 13:30
  • \$\begingroup\$ "Export as Bitmap" is what you want. It will create a 24-bit PNG with Alpha. At least that's the case with the version I have installed (Inkscape 0.48.1) \$\endgroup\$ – bummzack Aug 2 '11 at 13:34

For your pink halo-ing, the issue is exactly what you described: anti-aliasing. If you have Photoshop, just create the hexagon with two layers, one with all pink (0xFF00FF) and another with the hexagon. Make sure when you create the hexagon all feathering and anti-aliasing settings are set to zero for all the tools you use, and all brushes are set to 100% hardness. Save as a PNG.

For best results, stick to the pencil and paint bucket tools.

| improve this answer | |
  • \$\begingroup\$ Yea, I've tried using the hexagon shape tool in PS and it still comes out pixellated. I'm starting to wonder if I'm going to have to draw it pixel by pixel in Paint. \$\endgroup\$ – the_e Aug 1 '11 at 20:44
  • \$\begingroup\$ @espais: Select the pencil tool, left click where you want to start the line, then Shift + left click where the line will end and PS will automatically draw a straight line in-between. \$\endgroup\$ – Casey Aug 2 '11 at 4:06

While I would personally resort to munificents solution, here's a way to get a crisp sprite using ImageMagick.

Use the tool of your choice to draw your sprite. Export it as PNG with alpha channel. Your exported image might look like this:

sprite with alpha

Then you can use ImageMagick to convert this image to a sprite with magenta background using the following command:

convert sourceFile.png -channel alpha -threshold 50% -background "#ff00ff" -flatten destFile.png

The resulting file should look like this:

alpha flattened image

You can tweak the resulting "alpha" by changing the threshold parameter. And since this is ImageMagick, you can also easily batch convert lots of sprites.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.