How can I attach an image to these rectangles in pygame?

Question

I have a functioning game like frogger, but it is only rectangles and squares currently. I was wondering if there was a way to simply "skin" the rectangles with an image instead of an RGB color.

import random
import pygame
from pygame.locals import *

class Rectangle:

    def __init__(self, x, y, w, h):
        self.x = x
        self.y = y
        self.w = w
        self.h = h
class Frog(Rectangle):

    def __init__(self, x, y, w):
        super(Frog, self).__init__(x, y, w, w)
        self.x0 = x
        self.y0 = y
        self.color = (34, 177, 76)
        self.attached = None

    def reset(self):
        self.x = self.x0
        self.y = self.y0
        self.attach(None)

    def move(self, xdir, ydir):
        self.x += xdir * g_vars['grid']
        self.y += ydir * g_vars['grid']

    def attach(self, obstacle): 
        self.attached = obstacle

    def update(self):
        if self.attached is not None:
            self.x += self.attached.speed

        if self.x + self.w > g_vars['width']:
            self.x = g_vars['width'] - self.w

        if self.x < 0:
            self.x = 0
        if self.y + self.h > g_vars['width']:
            self.y = g_vars['width'] - self.w
        if self.y < 0:
            self.y = 0

    def draw(self):
        rect = Rect( [self.x, self.y], [self.w, self.h] )
        pygame.draw.rect( g_vars['window'], self.color, rect )

Answer 1

Forget rectangle. You don't "skin" rectange. You load image and draw it (blit it) directly on screen.

class Frog:

    def __init__(self, x, y, filename):
        self.image = pygame.image.load(filename)
        self.rect = self.sprite.get_rect()
        self.rect.x = x
        self.rect.y = y
        #self.rect.w = w # no need it - rect will use image's width
        #self.rect.h = h # no need it - rect will use image's height

    def draw(self, screen):
        screen.blit(self.image, self.rect)

if you use pygame.sprite.Sprite then you can even skip def draw() because it already have it

class Frog(pygame.sprite.Sprite):

    def __init__(self, x, y, filename):
        self.image = pygame.image.load(filename)
        self.rect = self.sprite.get_rect()
        self.rect.x = x
        self.rect.y = y
        #self.rect.w = w # no need it - rect will use image's width
        #self.rect.h = h # no need it - rect will use image's height

    #def draw(self, screen):
    #    screen.blit(self.image, self.rect)
    # Sprite already has this method

Now you use self.rect.x and self.rect.y instead of self.x , self.y because some other functions use self.rect to check collision ( pygame.sprite.collide_rect() ) or draw all sprites in group ( pygame.sprite.Group ).

With self.rect you can also assign x, y to center of image

    self.rect.centerx = x
    self.rect.centery = y

and it will calculate self.rect.x , self.rect.y

Doc: pygame.image.load() , pygame.sprite.Sprite , pygame.sprite.collide_rect() , pygame.sprite.Group