Install

View README.md on github to see all examples

git clone https://github.com/RetroVX/phaser3-controls-plugin.git

phaserControlsPlugin.js

If using the plugin, install into your game config and now every scene can use the plugin under this.controls

import levelScene from "./scenes/levelScene.js";
import phaserControls from "./path/to/phaserControlsPlugin.js";

const config = {
	type: Phaser.AUTO,
	width: 800,
	height: 400,
	plugins: {
	scene: [
		{ key: 'phaserControls', plugin: phaserControls, mapping: 'controls' }
	]
	},
	parent: "gameCanvas",
	scene: [levelScene],
};

const game = new Phaser.Game(config);

// You can now access the plugin from any scene using this.controls
this.controls
	

phaserControls.js

If using the phaserControls class, import directly into the scene/scenes needed

import phaserControls from "./path/to/phaserControls.js";

export default class levelScene extends Phaser.Scene {
	constructor() {
		super();
	}

	create() {
		this.controls = new phaserControls(this);
	}

}
	

config

const config = {
	// name of the controller scheme
	name: 'WASDKeys',

	// if true then this control scheme will be used (only one scheme can be 'active' at one time)
	active: true,

	// setup controls
	controls: {
		up: 'W',
		down: 'S',
		left: 'A',
		right: 'D',
		shift: 'SHIFT',
		space: 'SPACE'
	},

	// optional. Pass any data you want to add to the control scheme
    data: {},

	// optional function to call whenever this control scheme is set to active
	// scene - (optional) the scene this function is running in
	// scheme - (optional) the control scheme object
	onActive: function(scene, scheme) {
		console.log(scheme.name + ' is active!');
	}
}
		

Basic Example

export default class levelScene extends Phaser.Scene {
	constructor() {
		super();
	}

	preload() {
		this.load.image('player', 'assets/player.png');
	}

	create() {

		this.player = this.add.sprite(400, 400, 'player');

		// set cursor keys active
		this.controls.createCursorKeys(true);

		// create wasd keys 
		this.controls.createWasdKeys();

		// add new control scheme
		const config = {
			name: 'azertyKeys',
			active: false,
			controls: {
				up: 'Z',
				down: 'S',
				left: 'Q',
				right: 'D',
				shift: 'SHIFT',
				space: 'SPACE',
			},
		}
		// add the control scheme
		this.controls.add(config);

		let basicExample = this.controls.createCombo({
			combo: 'AA',
			onMatch: function() {
				console.log('Combo AA Fired!')
			}
		})
	}

	update() {
		
		if(this.controls.keys.up.isDown) {
			this.player.y -= 4;
		}
		else if(this.controls.keys.down.isDown) {
			this.player.y += 4;
		}

		if(this.controls.keys.left.isDown) {
			this.player.x -= 4;
		}
		else if(this.controls.keys.right.isDown) {
			this.player.x += 4;
		}
	}
}