Forums » Help » How to set input state from external UI

I've got a few buttons outside the canvas that perform the same function as a key press I've already got set up via ig.input.bind(). I know I could probably do this the hard way and just manipulate ig.input.presses[] but I'd rather do it the "right" way. How should I go about hooking up an external UI to allow it to trigger actions in my game?

I'm afraid you have to do it the hard way. There is a .bindTouch() method, but nothing similar for mouse clicks.

Put this in a plugin or somewhere else in your code (untested - I&039;m not quite sure how/if the #mouseup will fire correctly):

ig.Input.inject({
	bindClick: function( selector, action ) {
		var element = ig.$( selector );
		
		var that = this;
		element.addEventListener('mousedown', function(ev) {
			that.touchStart( ev, action );
		}, false);
		
		element.addEventListener('mouseup', function(ev) {
			that.touchEnd( ev, action );
		}, false);
	}
});

You can then use ig.input.bindClick('#idOfYourButton', 'jump') to bind that button to an action.


Or, a little bit easier if you just want "one shot" events, no continuous button pressing:

ig.Input.inject({
	trigger: function( action ) {
		this.actions[action] = true;
		this.presses[action] = true;
		this.delayedKeyup[action] = true;
	}
});

And then use ig.input.trigger('jump') to trigger an action.

Thanks Dominic, that works perfectly! I used the .trigger() form, since the UI buttons are for one-shot actions only, but I don't see why the first one wouldn't work either.

I love how that's considered "the hard way". :)

This was really helpful. If you have your keyboard bound to say arrow keys, and you want to use the on-screen joystick by Dominic (the part where he says "I'm sorry to hijack this thread..."), you can put the inject code in your main.js init:

ig.Input.inject({
    trigger: function( action ) {
        this.actions[action] = true;
        this.presses[action] = true;
        this.delayedKeyup[action] = true;
    }
});

and then something like this in update:

if (ig.game.joystick.input.x < -0.25 ) ig.input.trigger('left')
else if (ig.game.joystick.input.x > 0.25 ) ig.input.trigger('right')

if (ig.game.joystick.input.y < -0.25 ) ig.input.trigger('up')
else if (ig.game.joystick.input.y > 0.25 ) ig.input.trigger('down')