Colliders

Circle Collider Component

For the circle collider we'll store the radius, and the position offset. The position offset would be used if we needed to adjust the position of the collider relative to the birds position. We won't be using offsets for the birds circle collider, but we will for pipes later on, so we'll include it for consistency.

The diagram below shows the relationship between the circle collider and the bird:

Collider Sizing

It's very common to size a collider smaller than the avatar the player controls. One reason is it gives a much better illusion of narrow misses. The reverse could have a negative effect, like a cheap death, when the player believes they were never hit. Play testing will lead you to what feels best.

The collider is positioned directly at the birds position, and will also be slightly smaller than the bird visually. We say visually because the bird sprite is actually a rectangle, and would be much larger than the collider.

Create the cirlce collider:


1
export class CircleCollider {
2
  constructor(
3
    public offsetX: number,
4
    public offsetY: number,
5
    public radius: number
6
  ) {}
7
}

Box Collider Component

The box collider component class will store the width, height and offset of the box. We'll want to adjust the position of the collider relative to the entity's position. This won't be true for the ground, but we will leverage the offset when we get to the pipes.


1
export class BoxCollider {
2
  constructor(
3
    public offsetX: number,
4
    public offsetY: number,
5
    public width: number,
6
    public height: number
7
  ) {}
8
}