[SOLVED]Game Controller Button Mapping

Phaser 3
1

Hello friends!

I am trying to set up gamepad controls for my game. I have done this previously in Phaser 2, but now I am working in Phaser 3 and there don’t seem to be a lot of resources on gamepad controls. I managed to code D-pad controls for left-right motion, but I need to also use the other buttons for actions…

Has anyone done this before?
I used parts of this tutorial:

any help or resources would be greatly appreciated :slight_smile:

1 Like
2

I messed around with this Phaser Example:

https://labs.phaser.io/view.html?src=src\input\gamepad\gamepad%20debug.js

It seems it recognises my controller, but I’m not sure how to get the button mappings into my game :sweat:

image
image.jpg799×601 96.8 KB

3

I’m pretty sure, the XBox controller and Playstation controller have different mapping keys. You will have to handle the keys for the controller your using and the other one in case others would use it. I managed to map buttons from an old phone numpad, I’m sure you will be able to figure this out.

4

I’m currently using a SNES controller clone which uses Xbox button mappings (if I recall correctly). My game will mostly be used for outreach by the same group people, using this controller, so that button mapping would be preferred.

Have you got any sources or code snippets which outline how to map buttons? I would really appreciate any info, as I’m not particularly advanced in game development by any means.

5

I figured out how to do this in the update() function:

update() {
	let pad = Phaser.Input.Gamepad.Gamepad;

	if (this.input.gamepad.total){
  		pad = this.input.gamepad.getPad(0);
	}
	if (pad.B){
		// console.log('From Instructions 1 to Level 1');
		this.scene.start('level1');
		// console.log("Stopping current Scene");
		this.scene.stop();
	}
	if (pad.A){
		// console.log('From Instructions 1 to Title');
		this.scene.start('gameTitle');
		// console.log("Stopping current Scene");
		this.scene.stop();
	}
}

I’m currently figuring out how to make this work in the create() function, as I have some event emitters which are tied to key presses and I want to make them compatible with the controller.

Currently trying to adapt this to work with the D-pad on the controller:

this.input.keyboard.on('keydown', event => {
        switch (event.key) {
            case 'ArrowLeft':
                this.activeSelection -= 1;
                this.events.emit('CHANGE_BUTTON');
                break;
            case 'ArrowRight':
                this.activeSelection += 1;
                this.events.emit('CHANGE_BUTTON');
                break;
            case 'ArrowDown':
                    this.activeSelection = 3;
                    this.events.emit('CHANGE_BUTTON');
                break;
            case 'ArrowUp':
                this.activeSelection = 1;
                this.events.emit('CHANGE_BUTTON');
                break;
            case 'Enter':
                this.events.emit('SELECTITEM');
                break;
        }
    });
1 Like
6

Thanks to Rich for directing me to this link:
https://photonstorm.github.io/phaser3-docs/Phaser.Input.Gamepad.Events.html#event:GAMEPAD_BUTTON_DOWN__anchor

I’ve now got this working with the following code:

this.pad.on('down', (pad, button, value) =>{
        switch (button.index) {
            case 12:
                this.activeText -= 1;
                this.events.emit('CHANGE_BUTTON');
                break;
            case 13:
                this.activeText += 1;
                this.events.emit('CHANGE_BUTTON');
                break;
            case 1:
                this.events.emit('SELECT');
                break;
        }           
    });

This is checking the index of the button that has been pressed on the controller and emits an event accordingly.

1 Like