Inputs are catched by Phaser

Phaser 3
1

Hi,

I’m programming my game with phaser as game engine and Angular (TypeScript) as UI.
Overall this works pretty good.

Lately I’ve implementet an option to allow to switch from arrow-key controls to wasd-controls.
That was the point where I noticed that Phaser is completly globaly “catching” and blocking the keys that I’ve preset.

This means that on all input fields I can’t use wasd and the arrow keys for writing.
For the ingame chat, the (in my opionion) most important input field, I’ve already implemented a workaround for this.
It looks like this:

public onKeyDown($event): void {
  // move cursor
  if ($event.key === 'ArrowLeft') {
    this.textarea.selectionEnd--;
  }
  if ($event.key === 'ArrowRight') {
    this.textarea.selectionStart++;
  }

  // WASD
  if (this.wasd.includes($event.key) && !this.controlPressed) {
    this.msg += $event.key;
  }
}

So it this works somewhat good, but it’s not the only input I’ve got and I don’t want to do this for every input.

Is there an efficient way to tell Phaser when to not catch the inputs?

I really hope you can help me with this.

Kind Regards,

JMD

2

How are you adding the Phaser keyboard controls?

3

I’m doing it like this:

Note: I put everything unnecessary out for better understanding of how I change the change and add the controls.

import * as Phaser from 'node_modules/phaser/dist/phaser';

export class GameEngine {
  public init(wasdVal: boolean) {
    wasd = wasdVal;

    return new Phaser.Game({
      type: Phaser.AUTO,
      width: document.getElementById('game').offsetParent.clientWidth,
      height: document.getElementById('game').offsetParent.clientHeight,
      parent: document.getElementById('game'),
      pixelArt: true,
      physics: {
        default: 'arcade',
        arcade: {
          gravity: {y: 0}
        }
      },
      scene: {
        preload: preload,
        create: create,
        update: update
      }
    });
  }

  // function that get's called from the ui
  public changeControls(wasdVal: boolean) {
    wasd = wasdVal;
    initControls();
  }
}

And than in the same file but outside of this class

let wasd = false;
let controls = null;

let wasdControls = null;
let arrowControls = null;

function create(): void {
  // region Controls
  arrowControls = {
    down: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN),
    left: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT),
    right: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT),
    up: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP),
    run: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SHIFT)
  };
  wasdControls = {
    down: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S),
    left: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A),
    right: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D),
    up: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W),
    run: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SHIFT)
  };
  initControls();
}

function initControls() {
  if (!wasd) {
    controls = arrowControls;
  } else {
    controls = wasdControls;
  }
}

I know there is predefined cursor attribute that I could use for this, but I wanted to define this by myself to have full control over all the inputs that the player can have.
Also I used this cursor attribute before and it had the same behavior for this issue.

4

Use enableCapture=false in addKey().

3 Likes
5

Wow, insane. That fixed the issue without any downsides.
It looked promissing right away, but I expected that it would only work now if the phaser canvas got focus.
Thank you very much samme.