ScreenElement sample code needs pointer.useGraphicsBounds = true

[max-vogler]

Steps to Reproduce

Implement the sample screen element with pointerup listener code from the docs.

class StartButton extends ex.ScreenElement {
   // ...
  onInitialize() {
    this.graphics.add('idle', Resources.StartButtonBackground)
    // ...
    this.on('pointerup', () => {
      alert("I've been clicked")
    })
    // ...
  }
}

Expected Result

An alert should popup on click, especially since the docs state "They automatically capture pointer events".

Actual Result

Nothing happens, since useGraphicsBounds is false since v0.25.2.

Pointers can now be configured to use the collider or the graphics bounds as the target for pointers with the ex.PointerComponent

useColliderShape - (default true) uses the collider component geometry for pointer events
useGraphicsBounds - (default false) uses the graphics bounds for pointer events

Environment

• browsers and versions: Chrome 114
• operating system: macOS 13.2
• Excalibur versions: 0.27.0, likely since 0.25.2

Current Workaround

class StartButton extends ScreenElement {
  constructor(config?: ActorArgs) {
    super(config);
    this.pointer.useGraphicsBounds = true;
    this.pointer.useColliderShape = false;
  }

[eonarheim]

@max-vogler Thanks for the issue! Appreciate the workaround you found!

Definitely unexpected, we'll get that fixed asap.

[max-vogler]

Thanks for the fast and comprehensive fix, @eonarheim!