Pygame sprites overlapping not being transparent - python

So i have been creating a game with sprites and groups. Everything is going really well aside from that one thing that keeps bugging me. A picture says more than a thousand words:
http://i.imgur.com/S3fsone.png
As you can see, the background image is shown in the crosshair, just like it should. The ship, however, is getting cut off by rectangular white edges. Both the crosshair and ship are sprites, and the images used in them are transparent PNG images.
I have no idea how to remove this. Currently i am experimenting on the crosshair, so with that in mind, i'll post the relevant code:
#Ship class
class Ship(pygame.sprite.Sprite):
def __init__(self, position):
pygame.sprite.Sprite.__init__(self)
self.imageoriginal = pygame.image.load("ship.png")
self.image = self.imageoriginal
self.rect = self.image.get_rect()
self.rect.center = position
#Crosshair class
class Pointer(pygame.sprite.Sprite):
def __init__(self, image):
super(Pointer, self).__init__()
self.image = image.convert_alpha()
self.rect = self.image.get_rect()
def update(self):
self.rect.center = pygame.mouse.get_pos()
def main():
pygame.init()
#Window and background
window = pygame.display.set_mode((1000, 600), SRCALPHA)
background = pygame.image.load("background.png")
window.blit(background, (0, 0))
#Ship and ship group
ship = Ship((490, 500))
theship = pygame.sprite.Group(ship)
#Crosshair image and group
crosshairimage = pygame.image.load("images\\crosshair.png")
pointer = pygame.sprite.Group()
#Game loop
running = True
while running:
clock.tick(60)
#Cut out from my event loop. Creates the crosshair that follows the mouse
for e in pygame.event.get():
elif e.key == K_4:
pointer.add(Pointer(crosshairimage))
#Update and redraw methods for both
theship.clear(window, background)
theship.update(window)
theship.draw(window)
pointer.clear(window, background)
pointer.update()
pointer.draw(window)
pygame.display.flip()
And that should be it. The crosshair follows the mouse perfectly, and the non-red part of it is transparent on the background. It is not transparent over other sprites however, and that is the ghist of the problem. Other sprites moving over other sprites also cause this problem.
I can guess that it is the rect in the sprites that causes this, but i wouldn't know how to fix it. Tried using a mask but i kind of need the rects to be able to move my sprites don't i? Found no equal to the "self.rect.center = position" method in the mask class.
Much appreciated if anyone could tell me what i can do about this, it's been a headache for a long time now.

I think the problem is in your drawing section. Instead of having each group clear and draw separately, clear both groups, then update them, then draw them, so instead of:
#Update and redraw methods for both
theship.clear(window, background)
theship.update(window)
theship.draw(window)
pointer.clear(window, background)
pointer.update()
pointer.draw(window)
pygame.display.flip()
have:
#Update and redraw methods for both
theship.clear(window, background)
pointer.clear(window, background)
theship.update(window)
pointer.update()
theship.draw(window)
pointer.draw(window)
pygame.display.flip()
I hope this helps.

Related

Pygame object's previous images after moving still showing even though its been drawn over

So I'm trying to make it so that every second a new material is created at the coordinates of all the producers which is being done by the change event and my producer list but the materials when moving the previous position still remains even though I've blit the grid png. Apologies for bad spag
class Producer(pygame.sprite.Sprite):
def __init__(self,x,y):
super().__init__()
        self.image=pygame.image.load('images/producer.png').convert_alpha()
        self.image=pygame.transform.rotate(self.image,90)
        self.image=pygame.transform.scale(self.image, (40, 40))
        self.rect=self.image.get_rect(topleft=(x,y))
    def update(self):
        producer_group.draw(screen)
    def create_material(self,co):
        return Material(co)
class Material(pygame.sprite.Sprite):
    def __init__(self,co):
        global producer_info
        super().__init__()
        self.image=pygame.Surface((10,10))
        self.image.fill((255,0,0 ))
        self.rect=self.image.get_rect(center=co)
    def update(self):
        x,y=co[0],co[1]
        decimal_co=str(x)+'.'+str(y)
        this_producer_info=producer_info.get(decimal_co)
        self.rect.y-=5
        print('material moving')
in the game loop
for event in pygame.event.get():
    if event.type==pygame.QUIT:
        pygame.quit()
        exit()
    if event.type ==change_event:
        if game_state=='play':
            screen.blit(grid_surface,(0,100))
            producer_cos=list(producer_info.keys())
            for x in producer_cos:
                co = x.split('.')
                co[0]=int(co[0])
                co[1]=int(co[1])
                print(co)
                material_group.add(Producer.create_material('self',co))
play game state
elif game_state=='play':
    screen.blit(grid_surface,(0,100))
    #buttons
    settings_mini_button.draw()
    shop_button.draw()
    edit_button.draw()
    blueprints_button.draw()
    map_button.draw()
    #machine stuff
    producer_group.draw(grid_surface)
    producer_group.update()
    crafter_group.draw(grid_surface)
    #producer_group.update(grid_surface)
    #materials
    material_group.draw(grid_surface)
    material_group.update()
    screen.blit(grid_surface,(0,100))
    #copy screen
    play_bg=screen.copy()
The scene must be redrawn in each frame. You do not want to permanently change the grid_surface. Either you have to draw the objects on the screen instead of the grid_surface or you have to copy the grid_surface in each frame and draw on the copy of the grid_surface instead of the original:
elif game_state=='play':
producer_group.update()
material_group.update()
# clear the disaply
screen.fill(0)
# draw all things on the screen
settings_mini_button.draw()
shop_button.draw()
edit_button.draw()
blueprints_button.draw()
map_button.draw()
# copy grid_surface and draw objects on the copy
copy_of_grid_surface = grid_surface.copy()
producer_group.draw(copy_of_grid_surface)
crafter_group.draw(copy_of_grid_surface)
material_group.draw(copy_of_grid_surface)
# blit copy_of_grid_surface on the screen
screen.blit(copy_of_grid_surface, (0,100))

Create two moving images in pygame

I have an image of a vertical line, and want to create two of them. I want them to randomly spread apart and close the gap (while maintaining a minimum and maximum distance - I'm waiting to fix this first), while moving along the x-axis. The y coords don't move.
There are many examples of creating more complex sprites and games using pygame, but I can't find one simple enough to pinpoint what I'm supposed to do, so any help is appreciated. This code is based off of a simple example found here.
This is the very basic code that I have so far.
class Squeeze(pygame.sprite.Sprite):
def __init__(self):
pygame.sprite.Sprite.__init__(self)
self.img_load()
def update(self):
self.rect.x += random.randint(-1, 1)
if self.rect.x >= 1920:
self.rect.x += -1
if self.rect.x <= 0:
self.rect.x += 1
def img_load(self):
self.image = pygame.Surface([SCREEN_WIDTH, SCREEN_HEIGHT])
self.image.fill(BLACK)
self.rect = self.image.get_rect()
pygame.init()
SCREEN_WIDTH = 1920
SCREEN_HEIGHT = 1080
screen = pygame.display.set_mode([SCREEN_WIDTH, SCREEN_HEIGHT])
FPS = 60
wall = pygame.image.load('wall.png')
wall_list = pygame.sprite.Group()
BLACK = (0, 0, 0)
for i in range(2):
wall = Squeeze()
wall.rect.x = random.randrange(SCREEN_WIDTH)
wall.rect.y = random.randrange(SCREEN_HEIGHT)
wall_list.add(wall)
done = False
clock = pygame.time.Clock()
while not done:
for event in pygame.event.get():
if event.type == pygame.QUIT:
done = True
screen.fill(BLACK)
wall_list.update()
wall_list.draw(screen)
clock.tick(60)
pygame.display.flip()
pygame.quit()
I'm confused about the pygame.sprite.Group() deal. How do I get the two images to load and operate on them separately? Any other advice is appreciated as well.
Basically a "sprite" is a visible game object in your game. Pygames pygame.sprite.Sprite class is known as the "base class" for all these objects.
Every time when creating the Squeeze class, you derive form Pygames build-in sprite base class:
class Squeeze(pygame.sprite.Sprite):
def __init__(self):
...
Each object (or instance) of the pygame.sprite.Sprite class holds
an .update() method and
an .image and
an .rect attribute.
As the documentation states, "* ... derived classes will want to override the Sprite.update() and assign a Sprite.image and Sprite.rect attributes.*"
You did this by calling the your img_load() method in the __init__() method of your Squeeze class.
The problem is now that your .rect is assigned to the same size as your screen (self.image = pygame.Surface([SCREEN_WIDTH, SCREEN_HEIGHT])) and the .image attribute has the same color as your display screen, so you can´t see it.
Try to modify your img_load() method to
def img_load(self, img):
self.image = img
self.rect = self.image.get_rect()
As you can see, the modified img_load() method needs an image object -- which is passed to the img argument. So you also need to change your __init__() method:
def __init__(self, img):
pygame.sprite.Sprite.__init__(self)
self.img_load(img)
When now instantiating (e.g. creating an object of a class) a Squeeze object, you need to pass an image (in our case wall_img) to the constructor:
#... main programm
wall_img = pygame.image.load('wall.png') #load an image
wall_list = pygame.sprite.Group() #create a sprite group
BLACK = (0, 0, 0)
for i in range(2):
wall = Squeeze(wall_img) #create a sprite
wall.rect.x = random.randrange(SCREEN_WIDTH)
wall.rect.y = random.randrange(SCREEN_HEIGHT)
wall_list.add(wall) #add the sprite to the sprite group
The second build-in class you use is the pygame.sprite.Group class -- a container, which can hold and manage (modify) sprites it contains.
Calling the .update() method of a sprite group instance, Pygame automatically calls the update() methods of all sprites in this group. This means you can control a sprites behavior by implementing its update() method, as you did:
#update method of the Squeeze class
def update(self):
#any logic which changes sprite
self.rect.x += random.randint(-1, 1)
if self.rect.x >= 1920:
self.rect.x += -1
if self.rect.x <= 0:
self.rect.x += 1
By calling
wall_list.draw(screen)
your spites will be blitted onto the screen surface using the .image attribute for the source surface, and .rect for the position.
If you now wont to have different images you just need to pass other images (or surfaces) to the Squeeze constructor:
#... main programm
wall_imgs = [pygame.image.load('wall.png'),
pygame.image.load('other_wall.png')] #load images in list
wall_list = pygame.sprite.Group() #create a sprite group
BLACK = (0, 0, 0)
for i in range(2):
wall = Squeeze(wall_imgs[i]) #create a sprite
wall.rect.x = random.randrange(SCREEN_WIDTH)
wall.rect.y = random.randrange(SCREEN_HEIGHT)
wall_list.add(wall) #add the sprite to the sprite group
I hope this helps you a little bit :)

Pygame Sprite flickers when moving

I am new to pygame and have been having some problems with a sprite flickering/dragging it's image when it moves across the screen. I have read other answers on here about getting a certain pix/s, where you should change the framerate and lower pix/frame, but that solution hasn't helped so I was wondering if I'm just not implementing it correctly and that's the only solution or if I am missing something. Below is some the code for the game that runs at a constant framerate. Thank you!
pygame.init()
display=pygame.display.set_mode((screen_width,screen_height), pygame.RESIZABLE)
background=pygame.Surface((screen_width, screen_height))
background.fill(background_color)
class Ship(pygame.sprite.Sprite):
def __init__(self, image_file):
pygame.sprite.Sprite.__init__(self)
self.original_image_unscaled=pygame.image.load(image_file)
self.original_image=pygame.transform.smoothscale(self.original_image_unscaled, (56,70))
self.image=self.original_image
self.rect=self.image.get_rect()
self.xpos=0
self.ypos=0
self.rect.centerx=self.xpos
self.rect.centery=self.ypos
self.vel=0
self.acc=.05
self.brake=.2
self.turn_brake=1.5
self.angle=0
self.max_speed=5
def getShipPos(self):
return (self.xpos, self.ypos)
def getShipVel(self):
return self.vel
def getShipAcc(self):
return self.acc
def getShipRect(self):
return self.rect
def update(self):
self.rect.centerx=self.xpos
self.rect.centery=self.ypos
def rotateShip(self, angle):
#this rotates the ship by a specified angle
self.image, self.rect = pygameRotateImage2(self.original_image, self.rect, angle-self.angle)
self.angle+=angle
def simpleMove(self, x_final, y_final):
self.xpos=x_final
self.ypos=y_final
def moveShip(self):
keys=pygame.key.get_pressed()
xpos_i=self.xpos
ypos_i=self.ypos
if keys[K_w]:
if self.vel>self.max_speed:
self.vel=self.max_speed
else:
self.vel+=self.acc
elif keys[K_s]:
self.vel-=self.brake
if self.vel<0:
self.vel=0
if keys[K_a]:
self.rotateShip(-self.turn_brake)
elif keys[K_d]:
self.rotateShip(self.turn_brake)
self.xpos+=self.vel*math.sin(math.radians(self.angle))
self.ypos+= -self.vel*math.cos(math.radians(self.angle))
display.blit(background, (0,0))
pygame.display.update()
player_ship=Ship('image.png')
player_ship.simpleMove(screen_width/2, screen_height/2)
movement_group=pygame.sprite.Group()
movement_group.add(player_ship)
clock=pygame.time.Clock()
while True:
clock.tick(60)
(mousex,mousey)=pygame.mouse.get_pos()
for event in pygame.event.get():
if event.type==QUIT:
pygame.quit()
sys.exit()
player_ship.moveShip()
movement_group.update()
display.blit(background, (0,0))
movement_group.draw(display)
pygame.display.update()
Double buffering will probably help at least some. It is a technique used in computer graphics to reduce the number of times a pixel changes. It can be implemented as:
pygame.display.set_mode(dimensions, pygame.RESIZEABLE|pygame.DOUBLEBUF)
Another option is to move the clock.tick from the beginning of the loop to the end of the loop. That is where I usually see it, and it could alter the outcome of the graphics.
Try changing the line pygame.display.update() to pygame.display.flip().
I had the same problem in the past.
I now usually create a method in the classes that need to be displayed on screen which blit the picture (of the class itself) to the screen.
I than call that method before the screen update.
For example, this is a method of the class "Tank", which actually build the tank used by the player:
def master_player(self): #calculate and draw the player sprite
self.posix() # call of a method which calculate the position
self.image_tank.set_colorkey(PURPLE)
screen.blit(player.image_tank, player.position_tuple)
As I said before, I call this method at the end of the game loop and before the screen update.
Try moving the player_ship.moveShip() right under the pygame.display.update()
Like this:
player_ship.moveShip()
movement_group.update()
display.blit(background, (0,0))
movement_group.draw(display)
pygame.display.update()

Pygame Inquiry- Generating Multiple Sprites in Same Class

Unimportant Preamble:
Hello, I'm using Python and Pygame to create a game. This is for the purpose of improving my programming skills rather than a serious attempt at game creation. I've taken a break from Python lately for Objective C, but I'm now returning to it. This is a problem that I was having before I took a brief break, and I've returned to a question that was originally puzzling me. I've spent quite a while researching it, and I have a suspicion I've come across the solution and merely failed to understand it. I apologize for some of the bad naming conventions/lack of comments. I'm working on improving that.
Substance of Question:
Anyway, I've attached the four images I'm using. The program uses a simple function to position various Tiles on the screen. The mouse cursor is a sword. It is the entire image, but I'll be changing that later. I've made the program type "blue" in the shell whenever the cursor collides with a Tile. My goal is to have this happen when it collides with "ANY" tile of that color.
Long-term, I want to be able to modify the properties of these tile sprites. Various game-pieces would interact, and I would need to save the state of each sprite. I'd also be setting interactions for the other sprites.
Right now the sprites are all generating images, but my collision rectangle for the Tile is simply moving after each image is generated. I suppose that makes sense given the code, but I need a way to multiple sprites, each with a rectangle for collision.
Thanks
EDIT: I was unable to add images due to a new-user restriction. They are available enter link description here I think I read somewhere that people can (and do) edit posts here. So if anyone who the ability to move the images into this thread is welcome to do so.
import random,math,sys,os
import pygame
from pygame.locals import *
pygame.init() #Initializing Pygame
#Colors
black=(0,0,0)
#Screen
screen=pygame.display.set_mode((1200,800),0,0)
pygame.display.set_caption("Nero's Sandbox")
pygame.mouse.set_visible(False)
clock=pygame.time.Clock()
fps=40
#Game Functions:
def terminate():
pygame.quit()
sys.exit()
def numgen(x,y):
return random.randint(x,y)
#Loop Variables
tri=2
#Groups:
allsprites = pygame.sprite.Group()
alltiles = pygame.sprite.Group()
allmice = pygame.sprite.Group()
#Mouse Classes
class Pointy(pygame.sprite.DirtySprite):
def __init__(self):
pygame.sprite.Sprite.__init__(self)
self.image = pygame.image.load('redsword.png').convert() #31x32 image
self.image.set_colorkey(black)
self.rect=self.image.get_rect()
self.set=pygame.sprite.Group()
self.add(allmice, allsprites, self.set)
pygame.sprite.RenderPlain((self.set,allmice,allsprites))
def update(self):
screen.fill(black)
alltiles.draw(screen)
if event.type == pygame.MOUSEMOTION:
pos = pygame.mouse.get_pos()
self.rect.topright = pos
self.set.draw(screen)
#Tile Sprites - only one rect is being recognized.
class Tile(pygame.sprite.Sprite):
def __init__(self, graphic):
pygame.sprite.Sprite.__init__(self)
self.image = pygame.image.load(graphic).convert()
self.image = pygame.transform.scale((self.image),(50,50))
self.rect=self.image.get_rect()
self.add(alltiles, allsprites)
self.set=pygame.sprite.RenderPlain((self))
def update(self, x, y):
pos = (x,y)
self.rect.topleft = pos
#Micers
pointy1=Pointy()
#Game Loops
while True: #Ensures all loops within program are constantly called when conditions are met.
screen.fill(black)
while tri==2:
for event in pygame.event.get():
if event.type == QUIT:
terminate()
pygame.display.flip()
x = 0
y = 50
w = 0
while x!=600:
x=x+50
w = w+1
if w%2==0:
purpletile1=Tile('purplesquare.png')
purpletile1.set.update(x,y)
purpletile1.set.draw(screen)
else:
c=numgen(1,2)
if c==1:
bluetile1=Tile('lightbluesquare.png')
bluetile1.set.update(x,y)
bluetile1.set.draw(screen)
if c==2:
redtile1=Tile('redsquare.png')
redtile1.set.update(x,y)
redtile1.set.draw(screen)
if x>=600 and y!=450:
if y<450:
x = 0
y = y+50
w=w-1
if y>=450:
tri=3
while tri==3:
for event in pygame.event.get():
if event.type == QUIT:
terminate()
alltiles.draw(screen)
pointy1.set.update()
pointy1.set.draw(screen)
pygame.display.flip()
clock.tick(fps)
if pygame.sprite.collide_rect(pointy1,bluetile1):
print('blue')
I had this same problem myself! I did some debugging, and it appeared that all instances of my class shared the same instance of pygame.Rect()
You may want to change the line:
pygame.sprite.Sprite.__init__(self)
to
super.__init__(self)
This way, pygame.sprite.Sprite's init will set attributes to your tile. I could be wrong, I'm not entirely familiar with python's inheritance syntax, but that is the way I do it.
I could also be the get_rect that is causing the same rectangle to be used for all classes, but that doesn't seem to be likely.
I hope that I was some help, and just remember that pygame.Rect is an object, so somehow you are instantiating only once.

problem with making background of image transparent: pygame

I'm in the middle of working on a simple typing tutor using pygame. My problem is that I'm using an image that has a white background, waves1.png. Now's I've specified that I want white to be transparent in the image (self.image.set_colorkey((255, 255, 255))) and it is for everything except the text block. When the waves intersect with the text object, the white background of the waves show on top of the text. You can try running this if you have pygame (with the exception of the waves1.png image).
import pygame
from pygame.locals import *
class TextSprite(pygame.sprite.Sprite):
def __init__(self):
pygame.sprite.Sprite.__init__(self)
self.wordList = ['words yes', 'hello', 'this is a sentence', 'this is another sentence'] # read directly from external file
self.pos = 0
self.wordNum = 0
self.update1()
def update1(self):
# Render the given word
self.image = pygame.font.Font(None, 36).render(self.wordList[self.wordNum], 1, (0, 0, 0))
# Render the correctly guessed letters
self.correct = pygame.font.Font(None, 36).render(self.wordList[self.wordNum][:self.pos], 1, (255, 0, 0))
# Copy correct letters onto given word
self.image.blit(self.correct, (0, 0))
self.rect = self.image.get_rect()
# set the center of the center the given word to the center of the screen
self.rect.center = pygame.display.get_surface().get_rect().center
def keyin(self, key):
word = self.wordList[self.wordNum]
letter = word[self.pos]
if letter == key:
self.pos = self.pos + 1
if self.pos == len(word):
self.reset()
self.update1()
def reset(self):
self.pos = 0
self.wordNum = self.wordNum + 1
self.update1()
class Waves(pygame.sprite.Sprite):
# Constructor. Pass in the color of the block,
# and its x and y position
def __init__(self, filename):
# Call the parent class (Sprite) constructor
pygame.sprite.Sprite.__init__(self)
# Create an image of the block, and fill it with a color.
# This could also be an image loaded from the disk.
self.image = pygame.image.load(filename).convert()
# makes any white in the image transparent
self.image.set_colorkey((255, 255, 255))
self.rect = self.image.get_rect()
# Decrease the y coordinate so the waves look like they're moving up
def update(self, text):
self.rect.y = self.rect.y - 6
if self.rect.y <= 200:
text.reset()
self.rect.y = 485
def main():
#I - Import and initialize
pygame.init()
#D - Display configuration
# The screen variable is a pygame Surface object
# Note that the set_mode() method creates a Surface object for you automatically
screen = pygame.display.set_mode((640, 480))
pygame.display.set_caption("Typing Game")
#E - Entities (just background for now)
background = pygame.Surface(screen.get_size())
background = background.convert()
background.fill((255, 255, 255))
screen.blit(background, (0,0))
#A - Action (broken into ALTER steps)
#A - Assign values to key variables
clock = pygame.time.Clock()
keepGoing = True
# Collect the sprite in a list
all = pygame.sprite.RenderPlain()
waveList = pygame.sprite.RenderPlain()
text = TextSprite()
all.add(text)
waves = Waves("waves1.png")
waveList.add(waves)
waves.rect.x = 0
waves.rect.y = 485
#L - Set up main loop
while keepGoing:
#T - Timer to set frame rate
# Tick is a method in the Clock class that determines the maximum frame rate
clock.tick(30)
#E - Event handling
for event in pygame.event.get():
if event.type == QUIT:
keepGoing = False
elif event.type == KEYDOWN:
if event.key == K_ESCAPE:
keepGoing = False
else:
text.keyin(event.unicode)
# update position of waves
waves.update(text)
# clears screen
all.clear(screen, background)
# update screen
all.draw(screen)
waveList.clear(screen, background)
waveList.draw(screen)
# display.flip is a method that copies everything from the screen object to the actual visual display
pygame.display.flip()
pygame.quit ()
if __name__ == '__main__': main()
I don't know if it's an option for you, but you should get better results with png's native alpha transparency.
If you can edit/recreate the png yourself, then try using a transparent background.
From there, you can use convert_alpha() arfter loading the image. (instead of using a colorkey)
http://pygame.org/docs/ref/surface.html#Surface.convert_alpha
EDIT: one other aspect, is that the image may have an alpha channel interfering with the colorkey. Best to ensure you're not trying to use both.
I'm told that you can detect an image's alpha channel programmatically. Something like ...
if self.image.get_masks()[3]!=0:
print "image has alpha!"
See here http://pygame.org/docs/ref/surface.html#Surface.get_masks
HTH
Well done! You've actually done everything correctly to take advantage of transparency and colorkey (ie, making sure to call convert on the surface, making sure to pass the color into the set_colorkey method, etc).
The problem is with the order of calls to draw and clear on your respective sprite groups, "all" and "waveList". After you've rendered the text blocks by calling all.draw, you then follow it with the call to waveList.clear.
Here's the problem: once you've drawn the text sprites, you don't want to clear the space underneath the wave sprites, or that will wipe out the area that overlaps the already-drawn text blocks.
If you want to do this properly, try doing it in this order:
waves.update()
all.clear(screen,background)
waveList.clear(screen,background)
all.draw(screen)
waveList.draw(screen)
(more simply, just move waveList.clear(screen, background) to the line just below all.clear(screen, background); that should do it)
When I'm working with sprite groups, I usually try to group it so that each sprite group calls the same method in this order: clears, updates, collision checks (if any), draws.
This usually handles things in the right order. Then you still may have to pay attention to whether there is any layering of sprites, but that's another story for another day.

Categories

Resources