Pixel Perfect Collision Detection

[Jaagrav]

Suppose if I have an image with a transparent background and I want to detect collisions only when an object is colliding with the visual/colored part of the image. Is there a feature like that that already exists or maybe you're working on?

Here's an example,

When I press on the screen that ball/bullet is fired from that shooter in the middle of the screen. The walls outside is one image with a transparent background and I want to detect the collision if the ball collides with the colored part of that image, but that's not what is happening currently, the collision detection currently is on the bounding box of the image which means if the bullet goes through even the transparent part of the image, it will be considered a collision.

Is there any way to solve this problem?

Secondly can we group multiple objects/sprites together and then move or rotate them, if that is possible or can be made then I can take care of the above issue.

[slmjkdbtl]

If I understand the desired mechanics correctly, you can use 8 game objects with area() component for the 4 corners, and use a origin(Vec2) to modify the rotate() origin point, i can try an implementation later

[Jaagrav]

I see, well I thought of that solution as well but 8 game objects? 😅 I mean I'll have a bunch of more types of walls for different levels but anyway thanks for the reply I'll try that implementation as well...

[Jaagrav]

I did solve that issue @slmjkdbtl but now I realise there's another issue i.e. the collision is not proper if the walls are rotated to an angle

[slmjkdbtl]

Oh yes, kaboom only has naive AABB collision detections now :( Planning on moving to a more powerful system in the future

[Jaagrav]

I guess this issue can be closed then, my problem is like an inch away from being completely solved, but I do need to check for collisions perfectly while the walls are rotating, is there any kaboom fork or alternate library that does that?

[slmjkdbtl]

If you want to check collision for rotated objects there's 2 way I'd suggest:

1. Look up SAT (Separating Axis Theorem) collision detection, which reliably provides collision checking and resolution for any convex polygon.
2. Use line collision detection and check for intersection between every 2 lines of each rectangles. If a single pair of line has intersection then the 2 rectangles must be colliding.

The second one is definitely easier and cheaper, but it still requires some math and wrangling since you'll have to calculate the rotated vertices of each rectangle. Also can google "collision detection rotated rectangles"

[jalwn]

is there any way to color the collision area? My problem is different as I'm trying to keep the collision area inside the colored area of the sprite. I have a 32x32 sprite but the character does not take the full space. Its hard because I cant see the collision area.

If I understand the desired mechanics correctly, you can use 8 game objects with area() component for the 4 corners, and use a origin(Vec2) to modify the rotate() origin point, i can try an implementation later

would you be able to share an implementation for this? I would like to learn how.

[jalwn]

I figured out how. pressing F1 outlines the collision area. Its very helpful. The area function takes an object with different options for me to set the position of the box relative to the player origin and I'm able to set the width and height as well.

[Jaagrav]

I see, since this follows AABB collision detection, I normally just imagined that the there was a box which was same as the resolution of the image which if scaled is the same aspect ratio. Anyway will try out the F1 key as well.