Player, Animation, and Collisons (PAC)

• What is Collision?
• Types of Collision
• Collision Detection
• Collision Response
• Hitboxes
• Popcorn Hack: Collision

What is Collision?

Collision, in game development and physics simulations, refers to the event where two or more objects in a game world come into contact with each other. The collision can trigger various outcomes, depending on the game’s rules and the objects involved.

Types of Collision

1. Physical Collision:
   • Represents real-world physical contact, like a player bumping into a wall or two vehicles crashing.
   • Often includes reactions like stopping movement, bouncing, or damage.
2. Logical Collision:

• Refers to overlaps or interactions between objects that don’t necessarily mimic real-world physics, like collecting coins, entering a portal, or triggering an event.

Collision Detection

This involves determining when two objects collide. It’s essential for gameplay mechanics like movement, combat, or interactions. Techniques include:

1. Bounding Box Collision: Uses a rectangular or square area around an object to detect overlap.
2. Bounding Circle Collision: Uses a circular area, often simpler and faster than bounding boxes.
3. Pixel-Perfect Collision: Checks for exact pixel overlaps, useful for irregularly shaped objects.

%%js

function isColliding(rectA, rectB) {
  return !(
    rectA.x + rectA.width < rectB.x || // Checks if right side of rect1 is touching left side of rect2
    rectA.x > rectB.x + rectB.width || // Checks if left side of rect1 is touching right side of rect2
    rectA.y + rectA.hight < rectB.y || // Checks if the bottom of rect1 is touching the top of rect2
    rectA.y > rectB.y + rectB.height // Checks if the top of rect1 is touching the bottom of rect2
  );
}

Collision Response

After detecting a collision, the game decides how objects should behave. Responses can include:

1. Blocking movement (e.g., hitting a wall).
2. Bouncing (e.g., in pinball games).
3. Triggering an event (e.g., a player picking up an item).

Hitboxes

Hitboxes are closely tied to collision detection because they define the areas of objects that can “hit” or be “hit” during gameplay or simulations. They are a practical representation of an object’s interactive area and are essential for detecting collisions effectively and efficiently.

Popcorn Hack: Collision

Identify the reasons causing the collision detection to fail and resolve them. There are three errors that need to be corrected to ensure the two objects collide.

%%js

// Objects
const rect1 = {
  x: 50,
  y: 50,
  width: 100,
  height: 100,
};

const rect2 = {
  x: 120,
  y: 120,
  width: 80,
  height: 80,
};

// Function
function isColliding(rectA, rectB) {
  return !(
    rectA.x + rectA.width < rectB.x || // Left side of rectA is left of rectB
    rectA.x > rectB.x + rectB.width || // Right side of rectA is right of rectB
    rectA.y + rectA.hight < rectB.y || // Bottom of rectA is above rectB
    rectA.y > rectB.y + rectB.height // Top of rectA is below rectB
  );
}

// Check collision
if (isColliding(rectA, rect2)) {
  console.log("Collision detected!");
} else {
  console.log("No collision.");
}

if (isColliding(rect1, rectB)) { 
  console.log("Additional collision check passed.");
}

<IPython.core.display.Javascript object>