CH. 10 Collision Resolve [JS Game Dev Tutorial]

Collision Resolve

Intro

The collision resolve is the solution of a collision. Yeah...

They can consist of a pushing action (Sokoban), vector negation (like pong or breakout), remove an object (bullets), etc. The imagination is the limit! This is the aftermath in other terms.

Red square is object A, blue is B.

It might be long so bear with me...
Explanation

I learned this from the book Foundation Game Design with HTML5 and JavaScript. My collision detection now is a bit more optimized and customized for me, but I will share the secrets if necessary. There may be better solutions out there but this one has never failed me.

First, we check the distance vector using the center point of object A and object B. This is done using the distance formula or the Pythagorean theorem. The reason to use this is to see if the hypotenuse is smaller than half of the combined widths or heights. If so, there is collision.

Second we check the combined half widths and half heights. This helps us see if object A's point (or x and y values) are less than or greater than object B's point. If less than, then it is a collision.

With just that, it can be its own collision function rather than the AABB!

Play with the square values (lines 29 to 33) to get the idea! Try with widths and greater thans.
Collision 2.0

So how do we make a collision function without AABB using the above approach?

We get the distance vectors on both x and y (sides of a triangle), and compare them with the combined widths, and heights, respectively.

The distance is found by subtraction. If A.x - B.x is > 0, what does that mean? Which side is A on?? The LEFT side! If less than, it is on the right. Same concept with Y.

If both sides are less than the combined widths and heights, it's a hit!!

Note that the combined dimensions are always positive, while the side vectors can be positive or negative. In order to not ruin the calculations, we find the absolute value of the vectors.

Sides we will see later so just keep the above concept in mind for now.

Play with this. Lines 58 to 62.
Which Side?

Finally we can get the side of collision! This is important in order to know where we place our dynamic object(s) after the collision.

With square collisions, we are restricted to left, right, top, and bottom sides.

The side is determined by the smallest amount of overlap (amount object A is inside object B) on an axis.

if the X overlap is greater, a Y collision is happening. Look at the default examples I had on the canvases. It is colliding from the bottom. You can see there is more X (width) than Y (height). In fact, the entire width is inside while there is only about one-fourth of height!

And if Y overlap is greater, X collision is happening.

Ok so we know which axis, but which side??

If the Y-axis vector (combined heights) is greater than zero, we are on top. Remember, Y goes from 0 (top left corner) and positive downwards, so any value below the center point is negative. Like underground.

Else, we must be hitting the bottom.

So if the overlap of X is less than or equal to overlap of Y, then it must be an X axis collision.

Same concept... if the X-axis vector is greater than zero, we are hitting from the left, else (if negative), we must be hitting from the right.

Inside every if vector GT or LT zero, we either add or subtract the overlap to keep the colliding object from being inside the hit object.

I do this for platforming games, but you may return the side of collision. I will do it here so people can see.

Play with: lines 80 to 84.

If you look at the code, object A should be overlapping B, but because of the resolve, it is pushed down!

Note: this can replace AABB, but I personally like to have both because this one has far more calculations, which costs performance. I do something like:
```
// Inside an object's update method
for (const o of objects){
    // No collision?
    // then dont even try to calculate anything
    // NEXT!!!
    if (!this.AABB(o))continue;
    
    // Do complex collision stuff
}
    
                            
```
That's the end of this one... I believe this is the most difficult to grasp and follow, so the next few will be a breeze!

Next up: maps.

After maps we will be able to put everything together to finally create a basic RPG world!

Possible upcoming in order: interactive objects, enemies, fighting system, optimizations, [others or suggestions, if any], and in the end, sounds.

thanks for joining! 'till next time!!

CH. 10 Collision Resolve

Collision Resolve

Intro

Explanation

Collision 2.0

Which Side?