Pygame collision detection, transparent border - pygame

For my pygame project, I must detect collision betweeen various .png image that move on the screen.
I have put the image inside sprite, and the sprite inside group, then I use this :
pygame.sprite.spritecollide(perso, zombie_group, False)
However, sometime, my image don't touch, but pygame detect a collision...
This is due to the fact that my images are png with transparent borders.
The transparent border collide, and pygame detect this :(
Any idea to stop the transparent border from colliding ?

Ok the sprite will take the image he can't detect if it was on a trasnparent BG or a color bg, he basically is just seeing a rectangle right now.
If you are using irregular shapes and a rectangle approximation is not enough I would recommend using collide_mask also check masks it is probably what you want
update
Regarding performance from the tutorial :
There are other ways to do this, with ANDing sprite masks and so on,
but any way you do it in pygame, it’s probably going to be too slow.
For most games, it’s probably better just to do ‘sub-rect collision’ –
create a rect for each sprite that’s a little smaller than the actual
image, and use that for collisions instead. It will be much faster,
and in most cases the player won’t notice the inprecision.

Related

How to make the sprite.BoundingRectangle fit the sprite exactly

In LibGDX, I'm trying to create a game where you play a character who must survive waves of zombies. The plan is, when a zombie touches the player, the player loses health, and the zombie despawns; this works well until any of the sprites are rotated. Here's a screenshot of what I can imagine to be why:
To check the collisions, I use:
if (sprite.getBoundingRectangle().overlaps(Game.pl1.sprite.getBoundingRectangle())) {}
.. this is inside the Zombie class, and Game.pl1.sprite refers to the sprite belonging to the player.
So the red box is where I'm assuming the bounding rectangle is, based on where zombies despawn around it.
This is what I want the bounding rectangle to be:
I'm not sure if I can achieve this just using sprite.getBoundingRectangle so I was thinking perhaps I would need to use Box2D or maybe convert the sprite to a texture.
You could get the dimensions for a rectangle the size of the sprite if it wasn't rotated, and then rotate that.

How do I create collision detection with an object and part of a background?

I am just starting to attempt to make my own game using java and libgdx, and the extent of my success so far has been showing the background image on screen, and spawning a little square the user controls with WASD. The background is just a solid color, with a vertical rectangle that is red inside and has black edges. I want to make it so the tiny square (player) can move anywhere within the red rectangle, but not be able to cross over the black edges (out of the rectangle). How would I go about doing this?
Since I am a complete beginner to this stuff I must ask these related questions...
Should the player be just a texture? Should the background be a texture? or a sprite?
I'm not sure the difference between the two yet.
I recommand you to read tutorials about libGDX and Box2D like this one : http://www.gamefromscratch.com/post/2014/08/27/LibGDX-Tutorial-13-Physics-with-Box2D-Part-1-A-Basic-Physics-Simulations.aspx
to answer you're questions, in short :
a texture is an image in memory
a sprite is a part of a texture (or the whole texture) transformed (translation, scale, rotation) to be drawn on screen.
so basically, in the view model, your player is represented by a sprite, your background is a sprite as well.
Player 1 and 2 are 2 different sprites but may reffer to the same texture (bitmap).
with box2D, in the physics model, your player will be represented as a dynamic body and your background as a static body.

image is not refreshing in pygame

I am learning pygame. I was playing with the code catanimation.py which comes with the pygame example. In this code, If I remove the line DISPLAYSURF.fill(WHITE), it draws multiple images (i.e. it does not refresh). What is the reason? Do I have to make surface white to refresh the image?
Thanks.
think of the surface as a drawing canvas. it is going to blit upon your already used canvas, leaving something similar to a trail behind moving objects. filling the screen with white(or any color) will get drawn over the previous frame such that it is no longer visible.

Defining how 2 separate, overlapping canvases blend

I basically want to put a canvas on top of another and define the way their contents are blended.
I have one white canvas with black characters on it, and I want to highlight a part of it with a transparent blue rectangle, without having my black characters in the background turning dark blue. In fact, I need the aspect I'd get if I merged the two canvases with globalCompositeOperation set to "multiply" instead of default, while keeping both canvases separated and overlapping.
Here's what I have :
Here's what I want :
I am aware that globalCompositeOperation would allow me to do that if I merged the two canvases into one. But I'd rather keep both canvases : my background canvas is displayed by a lib. I can still draw in it, but that would complicate things a lot:
I'd be too dependent on their logic and would have to tweak mine and theirs to make it work,
performance is critical and this solution would imply much more drawing at 24fps,
I'd struggle every time the lib is updated...
All in all it seems way better to keep away from interfering with the lib. Is there a way to choose how overlapping canvases will behave?
Thanks in advance!
EDIT: We've also thought of transforming the white parts of the background canvas into transparent parts and adding our highlight canvas underneath, but that's also complicated, if not impossible.
Do I understand that the letters canvas the lib draws has an opaque (white) background rather than a transparent one?
If so, any options for applying highlighting will be relatively poor in performance.
Standard canvas compositing won't help as there is no blending mode that combines source-destination pixels.
What you're left with is .getImageData to get the letters pixels. Then apply blue pixels where they overlap white pixels but not where they overlap black(letter) pixels.
However .getImageData is not GPU accelerated and is therefore relatively slow.
Putting the blue highlighting canvas behind a non-opaque letters canvas would give you the best performance.
Bottom line: If performance is critical and you want 24+ fps then hack that library to make the background transparent instead of opaque-white. (sorry!)

as3 how to ignore MOUSE_DOWN outside mask

I am working on a jigsaw-like game in as3 where irregularly shaped layers imported from photoshop are used to mask parts of their original background.
By setting cacheAsBitmap=true on the mask and its contents the result is a nice irregular shape with its transparent bounding portions left out.
However the invisible bounding areas are still detected at MOUSE_DOWN. I would prefer the mouse not be detected anywhere but on the visible masked part. At the moment I cannot detect the mouse on any other clips on the stage that might appear behind the overlapping transparent areas.
I have seen a solution here involving bitmap pixel detection which I have not found a way to apply as a solution. The contents of my masked areas are either shapes or MovieClips.
I hope someone can help me find a solution
The simplest and the most stable approach to prevent the mouse events on the transparent area of bitmap graphics is to create a separate vector shape as the target for mouse and set the mouseEnabled flag to false to the bitmap or set hitArea property to this shape.
You can create such shape manually in the Flash IDE for the tests and even for the production. Sometimes it's more suitable to write the bitmap tracert script that creates contour shape in runtime by checking the pixel transparency.