Question

UPDATE: I found this enormously helpful article explaining canvas per-pixel collision detection.

I’m working on a collision system for a javascript game using HTML5 canvas. Each object has an image as a sprite and when a non-transparent pixel of any one object overlaps another, the collision code is triggered. But before anything else the objects need to be moved so that they are just touching each other and no longer triggering a collision. I need help calculating the overlap of any two objects in terms of x and y in order to move one accordingly. Here’s what we know:

• The coordinates of the collision point relative to each object
• The positions of the objects (and therefore the distance between them)
• The width and height of the objects
• The velocity of the objects in the x and y directions (a vector)

Another note: the images for these objects are uneven shapes, no perfect circles, but the radius from the center to the collision point can be calculated.

EDIT: I haven’t seen a lot of response, so I’ll be more specific. In the image below, two objects are colliding. The overlap area is in red. How would you go about finding the lengths of the green lines?

Answer 1

I’m honestly clueless about HTML 5 and how you can make games in pure HTML 5. But you would also need to know a velocity (IE, their direction. This way you can send them backwards from where they came)

If it was in a standard programming language, one method would be to use a while loop (moving the sprite back until the collision == false). Another method would be a more complicated calculation of how far the intersection is and subtract individual x and y values so they are not collided.

EDIT:
Then the easiest way is like I said, to put the object thats moving in a while loop that moves it backwards 1 pixel in each axis until its collision tests false. Example:

    int x1 = 500; //x location on screen
    int y2 = 500; //y location

    public boolean fixOffSetX(Sprite s) {
         int x2 = s.getX();
         int y2 = s.getY();

         //not writing the whole thing
         //enter a while loop until its not colliding anymore

         while(collision is still true) {
            x--;  or x++; 

            //depending on direction 
            //(which is why you need to know velocity/direction of your sprites)
            //do the same for the Y axis. 
        }
    }


    //This method will return if the 2 sprites collided, you do this one
    public boolean collisionTest(Sprite s1, Sprite s2) {}

You should look at doing very basic collisions, since it is a VERY complicated part of programming