Keyboard codes for input WASD vs ZQSD on AZERTY keyboard?

Phaser 3
1

I’m working on a game and I want to add keyboard input, supporting both cursor keys and the WASD keys. I use the code below and this works fine. However I know that the WASD key layout is not convenient when playing on a French AZERTY keyboard, so I try to also add ZQSD support.

	create() {
		this.input.keyboard.on("keydown", this.onKeyDown, this);
	};
		
	onKeyDown: function(evt){
			var dir = DIR_NONE;

			// cursors
			if (evt.keyCode === 38) dir = DIR_UP;    // cursor up
			if (evt.keyCode === 40) dir = DIR_DOWN;  // cursor down
			if (evt.keyCode === 37) dir = DIR_LEFT;  // cursor left
			if (evt.keyCode === 39) dir = DIR_RIGHT; // cursor right

			if (this.settings.azerty == false) {
				// WASD
				if (evt.keyCode === 87) dir = DIR_UP;    // W
				if (evt.keyCode === 83) dir = DIR_DOWN;  // S
				if (evt.keyCode === 65) dir = DIR_LEFT;  // A
				if (evt.keyCode === 68) dir = DIR_RIGHT; // D
			} else {
				// ZQSD azerty keyboard keycodes confirmed
				if (evt.keyCode === 90) dir = DIR_UP;    // Z
				if (evt.keyCode === 83) dir = DIR_DOWN;  // S
				if (evt.keyCode === 81) dir = DIR_LEFT;  // Q
				if (evt.keyCode === 68) dir = DIR_RIGHT; // D
			};

			// handle input
			// etc.
		};

Two questions:

  1. I only have a QWERTY keyboard, are all the keycodes the same on AZERTY? Does anyone have a French AZERTY keyboard, and if so can you confirm that these keycodes Z=90, Q=81 etc.) are correct? You can check using this page -> http://keycode.info/
  2. And is there a way to automatically detect an AZERTY keyboard in the browser? As it is, I just let the player manually choose WASD or ZQSD in the setting screen. (Btw I know I can check navigator.userLanguage if it’s fr or fr-FR but that doesn’t say anything about the actual keyboard)
2

Interesting problem.
I guess you could dispatch a keydown KeyboardEvent
and read out the returned keyCode.

3

I have found a QWERTY to AZERTY converter online at:

https://html-et-caetera.com/azertyfy/

It has a script (https://html-et-caetera.com/azertyfy/js/js.js) that makes the conversion.

I think you could use that script to help you in your keyboard.

Good luck!

4

Hi,
Here’s the keycodes phaser returns from my azerty keyboard
Z: 90,
Q: 81
S: 83
D: 68

1 Like
5

@Thyebe thanks for the link, but that script only replaces letter characters
@BlunT76 thanks for confirming the keycodes :+1:

1 Like
7

Hi @BdR, I had an idea and it worked for me. I installed the AZERTY layout in my keyboard layout list on my computer. After that I was able to choose the layout and access it by the virtual keyboard.

Perhaps this idea can help you with other keyboard layouts.

1 Like
8

I confirm it is the correct code for an AZERTY keyboard =)

9

I forgot to reply, but given these keyCodes I see that there is no overlap between the QWERTY and AZERTY keycodes and the directions, the combinations keyCode/directions are all unique. In other words there is no keyCode used for one certain direction in QWERTY and a different direction in AZERTY.

So… there is no need to distinguish between the two keyboard layouts and I just do this :smiley:

onKeyDown: function(evt) {
	var dir = DIR_NONE;

	// cursors
	if (evt.keyCode === 38) dir = DIR_UP;    // cursor up
	if (evt.keyCode === 40) dir = DIR_DOWN;  // cursor down
	if (evt.keyCode === 37) dir = DIR_LEFT;  // cursor left
	if (evt.keyCode === 39) dir = DIR_RIGHT; // cursor right

	// WASD
	if (evt.keyCode === 87) dir = DIR_UP;    // W
	if (evt.keyCode === 83) dir = DIR_DOWN;  // S
	if (evt.keyCode === 65) dir = DIR_LEFT;  // A
	if (evt.keyCode === 68) dir = DIR_RIGHT; // D
	// ZQSD azerty keyboard support
	if (evt.keyCode === 90) dir = DIR_UP;    // Z
	//if (evt.keyCode === 83) dir = DIR_DOWN;  // S same as QWERTY
	if (evt.keyCode === 81) dir = DIR_LEFT;  // Q
	//if (evt.keyCode === 68) dir = DIR_RIGHT; // D same as QWERTY

	// handle input
	// etc.
};
10

The new way to handle this is:

The KeyboardEvent.code property represents a physical key on the keyboard.

Handle keyboard events in a game

This example establishes an event listener for keydown events that handle keyboard input for a game that uses the typical “WASD” keyboard layout for steering forward, left, backward, and right. This will use the same four keys physically regardless of what the actual corresponding characters are, such as if the user is using an AZERTY keyboard.