Forums » Impact Engine » Trouble integrating Gamepad support

I've been folloing along Jesse Freeman's book, "HTML5 Games with ImpactJS" and I got to the part where I've added key bindings to the player's movement. I wanted to experiment with adding in gamepad support with this plugin (http://impactjs.com/forums/code/working-gamepad-support-for-chrome-22) but something weird is happening to the normal arrow key bindings. When the gamepad is enabled the arrow keys move the player very slowly and stuttery when you hold them down but the controller works fine. It's really bizarre. I'm using a logitech f310 in x-input. If you have a gamepad you're welcome to try it out.

Edit: I only get this issue AFTER I've pressed a button on the gamepad. So if you're coming into this without a gamepad and start messing with the arrow keys there will be no problem. Once you've pressed a button on the gamepad tho, it's almost as if it doesn't like arrow keys anymore.

Here's a link to the game.

So far, here is my main.js code:

ig.module( 
	'game.main' 
)
.requires(
	'impact.game',
	'impact.animation',
	'game.levels.dorm1',
	'game.entities.player',
	'plugins.gamepad.gamepad'
)
.defines(function(){

MyGame = ig.Game.extend({
	
	gravity: 300,
	// Load a font
	font: new ig.Font( 'media/04b03.font.png' ),
	
	
	init: function() {
		// Initialize your game here; bind keys etc.
		this.loadLevel( LevelDorm1 );
		ig.input.bind(ig.KEY.LEFT_ARROW, 'left' );
		ig.input.bind(ig.KEY.RIGHT_ARROW, 'right' );
		ig.input.bind(ig.KEY.X, 'jump' );
		ig.input.bind(ig.KEY.C, 'shoot' );

	},
	
	update: function() {
		// Add your own, additional update code here
		var player = this.getEntitiesByType(EntityPlayer)[0];
		if(player){
			this.screen.x = player.pos.x - ig.system.width/2;
			this.screen.y = player.pos.y - ig.system.height/2;
		}

		//Gamepad support
		var gamepad = new Gamepad.getState(0);      
	    var mappings = [[ gamepad.dpadLeft, ig.KEY.LEFT_ARROW ],
	                    [ gamepad.dpadRight, ig.KEY.RIGHT_ARROW ],
	                    [ gamepad.faceButton0, ig.KEY.X ],
	                    [ gamepad.faceButton1, ig.KEY.C ]];
	    new Gamepad.magic(gamepad, mappings);

	    // Update all entities and backgroundMaps
		this.parent();
	},
	
	draw: function() {
		// Draw all entities and backgroundMaps
		this.parent();
		
		// Add your own drawing code here
	}
});

// Start the Game with 60fps, a resolution of 320x240, scaled
// up by a factor of 2
ig.main( '#canvas', MyGame, 60, 320, 240, 2 );
});

Also I noticed that the same thing happens to the other keys as well. When you hold C down it basically RAINS grenades. If you hold the jump button down, you jump on repeat. I think something weird is happening where the gamepad crowds out the default input. I've been looking through the code for days now but still can't find a solution.

Is this really that difficult a problem to solve? I'm surprised no one has taken a crack at this...

It might just be that not many people have experimented with gamepad support in their ImpactJS games.

I was looking at it when I made Party Pillars, a multiplayer mayhem platforming game in Impact, but I really didn't think it was worth it when only Chrome supports gamepads. I later discovered that Chrome is the browser with the worst input latency, so it would be close to unplayable even if the controller support worked. I would recommend just using regular keyboard keybindings, and use joytokey or something similar to get the correct mappings.

Yeah I've pretty much given up on the whole gamepad thing. I mean maybe down the line once/if the technology gets better. But the bottom line is to make a great game and not waste time with peripherals. Impact is great for rapid prototyping and iterating. I'm focusing more on that nowadays rather than messing with something that would probably only see limited use anyway.

I've gotten the 360 controller to work fairly well in Chrome using the same Gamepad API plugin, but I don't map the gamepad to Impact's keybinding, I check against the gamepad state directly.

This is how I'm updating,

this.pad = Gamepad.getState(0);
if (this.pad == undefined) {
   this.pad = 0;
}
// Obtain previous gamepad state so we can properly perform "on button release" actions.
this.prevGamepadState = Gamepad.getPreviousState(0);
if (this.prevGamepadState == undefined) {
   this.prevGamepadState = 0;
}

and I check for input like so

move: function() {
    if (ig.input.state('left') || this.gamepad.pad.dpadLeft == 1) {
        this.moveLeft();
    } else if (ig.input.state('right') || this.gamepad.pad.dpadRight == 1) {
        this.moveRight();
    } else {
        this.stand();
    }

    if (ig.input.pressed('up') || this.gamepad.buttonReleased(this.gamepad.prevGamepadState.faceButton0, this.gamepad.pad.faceButton0)) {
        this.jump();
    }
}

So you check to see if there's keyboard movement first, if so use that. Else use the gamepad input.

If you want to see how I've implemented it.
https://github.com/MadballNeek/impactjs-overtime/blob/master/lib/game/entities/components/gamepadControllable.js
https://github.com/MadballNeek/impactjs-overtime/blob/master/lib/game/entities/components/controllers/playerController.js

Thanks! That's super helpful! I'm sure others who will be searching for this info in the future will also find this helpful.