[pygame] Transparent Images - Example of Problem

[Kris Schnee <kschnee@xxxxxxxxxx>]

Here's an example of the trouble I'm having with transparent graphics --
making them, not just displaying them.

http://kschnee.xepher.net/transparent.htm

Both versions of the image (credit to tenthplanetart.com) should have a
transparent background, letting the blue show through, but I see a white
box around the PNG version. I created both the same way:

-Open original in Photoshop LE
-Select background area (by color, white)
-Expand 1 pixel (although this gives a ragged edge)
-Invert selected area (to get the character)
-New Layer By Cut
-Now I have a background layer, which I turn off, and a layer that shows
the character with a blank (not white, but empty) background.
-Save/Export (for PNG vs. GIF format)

What's going wrong here? I'm pretty sure I've gotten transparent PNG
images working before.

------
On a related note, I'm having trouble displaying images that _are_
transparent, transparently in Pygame. I load them using convert_alpha(),
but then it gets tricky. I have objects that do something like this:

def Redraw(self):
	## Only called when "dirty"
	self.image.fill((0,0,0)) ## Clear my internal drawing surface
	self.image.blit(SOME_GRAPHICS,(0,0)) ## Put graphics on it
def Display(self):
	## Called whenever parent surface is "dirty"
	self.screen.blit(self.image) ## Blit my finished image to the screen
(or other parent surface)

The "parent surface" I'm using is _not_ Pygame's "subsurface" system,
but another surface passed to the object on __init__.

This effect lets me build up a complex image within the object, then
just blit it in one operation each frame. It's a good enough system to
give me translucent objects, but always displays black or some other
solid color around its edges if the surface isn't filled. I'd like to be
able to do things like character portraits that don't completely fill a
rectangle, or window borders that have bits "sticking out" as seen here:

http://www.rpgclassics.com/shrines/psx/cc/frames.shtml

How do I get this effect, given that I'm juggling drawing surfaces? If I
simply have every object draw directly to the screen I could probably
get transparency, but I want to "compile" a completed screen object
without drawing every componant of it each frame. Should I be using the
Pygame subsurface function, maybe?

On further experimentation, the problem I just described is subtler than 
this. I tried making a translucent box containing a character portrait 
(the really-transparent version), and the result was that the portrait 
itself was translucent. This was because the drawing surface 
(self.image) was translucent _everywhere_, when what I'd imagined was 
that the box would be translucent but have an opaque portrait. This 
would be a harder effect to get, probably requiring either per-pixel 
alpha or a multi-stage drawing system. Moral: I'll try to use opaque 
boxes for images, even if I'm using translucent ones for text windows 
and controls.

Kris