Circular collisions with PNGs

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
odysseusofmanywiles
Prole
Posts: 2
Joined: Tue Jan 19, 2021 7:17 am

Circular collisions with PNGs

Post by odysseusofmanywiles » Tue Jan 19, 2021 7:24 am

Hey all, I'm fairly new to game development and was trying out a few ideas.
I'm trying to catch collisions between circular PNGs, but can't figure it out completely. I looked into using SVGs, and Tove looks like a decent library, but it isn't working for iOS.

What options do I have in correctly catching these collisions? The problem is that all vector PNGs still have some space outside of the actual image (which is the transparent part).

Is it possible to get Tove to work on iOS? Or are there simpler solutions?

This is the function I'm using to catch collisions (found it on this forum):

Code: Select all

function distance(x1, y1, x2, y2)
        d = math.sqrt((x2 - x1) ^ 2 + (y2 - y1) ^ 2)
        return d
    end

Code: Select all

if distance(x1, y1, x2, y2) - (radius1 + radius2) < 0 then
                return true
            end
Thanks!

Ross
Prole
Posts: 26
Joined: Tue Mar 13, 2018 12:12 pm
Contact:

Re: Circular collisions with PNGs

Post by Ross » Thu Jan 21, 2021 1:26 pm

I don't see what the drawing method of the objects—PNG, SVG, whatever—has to do with the collision? Your functions for checking collision between circles should work just fine. If the collision doesn't match the visuals, simply adjust the radius until it does.

User avatar
Felix_Maxwell
Prole
Posts: 23
Joined: Wed Dec 04, 2019 3:15 pm

Re: Circular collisions with PNGs

Post by Felix_Maxwell » Thu Jan 21, 2021 5:55 pm

you could see it if you draw the collision circles

Code: Select all

-- ( in love.draw() )
-- love.graphics.circle( mode, x, y, radius )
love.graphics.setColor(0, 0.3, 0.2, 0.3) -- transparent yellowish
love.graphics.circle('line', x, y, radius)
love.graphics.setColor(1, 1, 1, 1) -- set the color back to normal afterwards if needed

odysseusofmanywiles
Prole
Posts: 2
Joined: Tue Jan 19, 2021 7:17 am

Re: Circular collisions with PNGs

Post by odysseusofmanywiles » Fri Jan 22, 2021 5:09 am

Thanks for helping out! The problem was that I didn't understand how the collision function was working (that's what I get for copying a function). I was assuming that it was catching collisions where the x and y axis are the top left (for images) but I should've been passing the central coordinates. So when I figured that out it started catching collisions perfectly.
Thanks again!

RNavega
Citizen
Posts: 60
Joined: Sun Aug 16, 2020 1:28 pm

Re: Circular collisions with PNGs

Post by RNavega » Fri Jan 22, 2021 6:57 am

You don't need the square root if you only care about comparing the distances (equal, bigger-than or smaller-than) and don't need the actual distance value. You can compare with squared radii because of the following principle:
If X > Y, then X² > Y²
("If a number is bigger than another number, then its square will also be bigger than the square of the other".)

So you can have this:

Code: Select all

local myDistance = 10
local myDistanceSquared = myDistance^2

(...)

local deltaX = x2 - x1
local deltaY = y2 - y1
if (deltaX * deltaX + deltaY * deltaY) < myDistanceSquared then
    -- Distance between points (x1,y1) and (x2,y2) is less than 'myDistance'.
end
This is faster.

Post Reply

Who is online

Users browsing this forum: GVovkiv and 61 guests