home

Here be the knowledge:

Collision detection

See also:

System:

Concepts

hitboxes

separating axis theorem…

most of the time you can use rectangle/rectangle collisions…

Tile based collision is the simplest – uses a very broad phase approach – just need to know where we are in the tile array – lots less info to search…

Inverse collision detection

  • Assumes we collide with everything EXCEPT floor – so check only for floor and if its anything else, its a collision
  • But what about pickup items etc?

Broad phase and narrow phase

Collision reactions

What happens when you collide? is there an element of just STOPPING – or do you slightly overshoot, then bounce back (such as in porklike)?

collision on pickup items – e.g. what is the ‘collision reaction’ depending on proprty

what about jump down as a collision reaction

Properties

which side did we collide with?

which sides react – top, bottom, left, right

what is the reaction – trigger – text, bounce back, damage, push, animation of

ALTTP

Things on a 45 degree angle – 

Character is moving right (green arrow) – and will move both right and up in the following instance:

Point collision

Is the mouse touching the item?

  • define sprites bounds (rectangular): left, right, top, bottom (add this as properties for each sprite)
  • define point of mouse
  • run the test: pointX > sprite.left() && pointX < sprite.right() && pointY > sprite.top() && pointY < sprite.bottom();
  • do what needs to be done – set a var, move the item, change a property etc. etc.

Circle Circle collision

  • get distance between circles – (vector > magnitude = Math.sqrt(vx * vx + vy * vy)
  • get radii – totalRadii = (c1.width / 2) + (c2.width / 2)
  • if distance (magnitude) is less than combination half of each ones radius (totalRadii) – they are colliding

Preventing circles overlapping

  • When the circles collide, find out by how much they’re overlapping (overlap = totalRadii– magnitude)
  • Push the circles apart by the amount of overlap. 

(//Normalize the vector. //These numbers tell us the direction of the collision dx = vx / magnitude; dy = vy / magnitude; //Move circle 1 out of the collision by multiplying //the overlap with the normalized vector and add it to circle 1’s position c1.x += overlap * dx; c1.y += overlap * dy;)

Rectangle collisions

  • Find out how far apart the rectangles are. Use a vector between the rectangles’ center points to figure this out, just as you did with circles.
  • Check to see if the distance between the rectangles is less than their combined half-widths. If it is, a collision might be occurring on the X axis. But you don’t know this yet. You also have to check the Y axis.
  • Check to see if the distance between the rectangles on the Y axis is less than their combined halfheights. If it is, then you know that a collision is definitely happening.

AABB Collision Detection

AABB Collision Detection relies on all colliding entities to have “axis-aligned bounding boxes”, which simply means their collision boxes contain no rotation in our world space, which allows us to use a simple math formula to test for collision:

if rect1.x is not > rect2.x + rect2.width and
      rect1.x + rect1.width is not < rect2.x and
      rect1.y is not > rect2.y + rect2.height and
      rect1.y + rect1.height is not < rect2.y:
      collision is true
else
      collision is false

Essentially, the formula is merely checking if the two boxes are colliding in any way.

We can use AABB Collision Detection to detect whether our Ball is colliding with our Paddles and react accordingly.

We can apply similar logic to detect if the Ball collides with a window boundary.

TESTING FOR EDGES

oh, is that what this next thing is?

DIRECTIONAL COLLISIONS

Advanced Tile Based Collision Detection AND Response in Javascript

Tile collision types

5 – top – can be used for platforms that can be jumped through…

4 – top, left, right

3 – right

2 – left

1 – 

Only check collision from the designated side – e.g. if its checking left, then ignore coming from the right etc.

See also: Collision Blocks

We DON’T want to set this up manually – use ’tiled’ – See also: TILED IMAGES

Phaser has:

collideDown: boolean

collideLeft: boolean

collideRight: boolean

collideUp: boolean

See: https://newdocs.phaser.io/docs/3.60.0/Phaser.Tilemaps.Tile#collideLeft

Create custom tile set for collisions in tiled – it describes the above cardinal directions, which can then be extrapolated into a directional collision map in phaser.

IS THIS THE BEST APPROACH?

4 direction collision set

Collision layers

grid engine

https://github.com/Annoraaq/grid-engine

https://medium.com/swlh/grid-based-movement-in-a-top-down-2d-rpg-with-phaser-3-e3a3486eb2fd

https://pablo.gg/en/blog/coding/i-made-a-top-down-game-version-of-my-blog-with-phaser-and-react

only put them where required – e.g. just put them around the edge of a body of water – no need to fill the body of water

COLLISION REACTIONS

collision data drawn from the map data – e.g. now we have hit it – what do we do?

impassable

fall

jump down

door

transition

is it better to organise this by LAYER – or by PROPERTY? may be easier to edit and maintain if it is by LAYER…

look up item by x/y – then 

maybe find out more about how the engine in question manages collisions – then optimise for that approach…

A-STAR Pathfinding

http://buildnewgames.com/astar/

Resources