Problem in blitting a clean, crisp sprite

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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:

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:

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.