Pygame: Sprite placement and black rectangle border - pygame

Question

Before I start, let me say that I'm a complete beginner at Pygame.
Here's my current program:
import pygame, sys, random
pygame.init()
white = ((255,255,255))
display_width = 800
display_height = 600
FPS = 15
gameDisplay = pygame.display.set_mode((display_width, display_height))
pygame.display.set_caption('Francis')
gameExit = False
lead_x = display_width/2
lead_y = display_height/2
lead_x_change = 0
lead_y_change = 0
clock = pygame.time.Clock()
while not gameExit:
for event in pygame.event.get():
if event.type== pygame.QUIT:
gameExit = True
francis = pygame.sprite.Sprite() #create sprite
francis.image = pygame.image.load("francis.png").convert() #load francis image
francis.rect = francis.image.get_rect() # use image extent values
francis.rect.center = [lead_x,lead_y]
gameDisplay.fill(white)
gameDisplay.blit(francis.image, francis.rect)
pygame.display.update()
clock.tick(FPS)
pygame.quit()
quit()
What I plan to do with this program is load in my sprite (francis) and use the arrow keys to move him across the screen. I plan to create that motion by having each arrow key pressed add or subtract 10 pixels from lead_x, which should be the sprite's x location. I'm not sure whether the code I used to load in the sprite is correct. I used "francis.rect.center" then gave the coordinates to that. Is there a better way to load and position a sprite?
Also, my sprite has a black rectangle around it whenever I load it. The sprite itself is a 30x70 picture. Where there is not a pixel of the actual person, I just have transparency. The transparency works fine, but whenever I load in the image, there's a black rectangle around the border of the sprite. I have a feeling this has to do with the way I loaded in the sprite, but I'd appreciate if you'd let me know. (I've tried converting it to png, bmp, and jpg. png and bmp both have black borders, and jpg has black background instead of transparency)
Any and all help is appreciated!

Answer 1

When you do your image load with
francis.image = pygame.image.load("francis.png").convert() #load francis image
you should do
francis.image = pygame.image.load("francis.png").convert_alpha() #load francis image
as png images have an alpha channel which is the transparent part of the image. If you don't know what this means load your image into an image editor and remove the part you do not need by selecting the and deleting them. Now these parts will contain no colour information and therefor will be the alpha channel for the image.
You can also set the colour key of the image by
francis.image.set_colorkey(0, RLEACCEL) # the colour key is set to 0
A key colour is also transparent. (That's how they shoot movies like spiderman, fantastic four etc. :-))
read this too
https://www.pygame.org/docs/ref/surface.html#pygame.Surface.set_alpha.
hope this helps.

Answer 2

Regarding how you position sprites, I believe the norm is to go by the top-left, but I don't think it matters much.
Try opening the picture in paint and saving it as a gif. Note of course that changing the file extension doesn't make a difference by renaming it, it is actually still the same file type. So to change a file type, you have to use the "save as" option and select a file type. Try using a gif or a png using this method assuming you haven't so far.

Answer 3

francis.rect.center = [lead_x,lead_y]
You set it as a list. I'm pretty sure it's meant to be a tuple i.e.
francis.rect.center = (lead_x,lead_y)
What does the ".convert" part do in "francis.image = pygame.image.load("francis.png").convert()"
I'm pretty sure it's not meant to be there, try removing it unless you specifically know you need it.
You forgot a crucial line in your code. On the end of the mainloop you should be saying the following line;
pygame.display.flip()
This has something to do with how it loads the pixels from top to bottom or something, I honestly don't know, but I'm pretty sure you need it otherwise the program wont work. I think it replaces pygame.display.update()