Skip to content

Guide InputController

Derek edited this page Jun 11, 2016 · 2 revisions

The InputController is the main interface for receiving input events. Ludic attaches mouse and keyboard event listeners on the Canvas element to handle inputs. The InputController is created in the BaseApp constructor and set on the Ludic singleton object as Ludic.input.

Creating InputEventListeners

To create a listener:

var listener = Ludic.input.newEventListener(keyConfig);
Ludic.input.addEventListener(listener);

Passing true as the last parameter automatically adds the listener to the InputController. So the above can be shortened to:

var listener = Ludic.input.newEventListener(keyConfig, true);

There is an additional parameter that can be used. A binder object will be used as the thisArg when calling the listener callback methods.

var listener = Ludic.input.newEventListener(keyConfig, this, true);

The keyConfig is an object that maps KeyboardEvent keycodes to listener methods.

var keyConfig = {
  // maps the spacebar to the input action 'home'
  '32': 'home',
  // maps the spacebar to the function 'onSpaceDown'
  '32': this.onSpaceDown,
  // maps the spacebar to either an action or a function, with additional options
  '32': {
    // either the string of an event action, or a function (ie. this.onSpaceDown)
    method: 'home',
    // (optional) [ 'down'/'up'/'both' ] specifies which direction fires the event handler, keyup, keydown
    direction: 'down',
    // (optional) only fires the event if the shift key is down
    shiftKey: true, 
    // (optional) only fires the event if the alt key is down
    altKey: true,
    // (optional) only fires the event if the control key is down
    ctrlKey: true,
    // (optional) only fires (each) the event once
    once: true,
    // (optional) binds the method. top binder precedence, followed by binder passed to listener constructor, followed by the listener itself 
    binder: this
  },
  // array of options objects allow for handling multiple types of key events
  '32': [
    {
      method: function(){
        console.log('space bar with shift key');
      },
      shiftKey: true,
    },
    {
      method: function(){
        console.log('space bar without shift key');
      },
      shiftKey: false,
    }
  ],
  // shorthand for specifying direction without needing options object
  '32.down': 'home'
}

The InputEventListener class

The InputEventListener class is an interface for adding callbacks to receive events from the InputController

The actions on the InputEventListener class are modeled after a gamepad controller, particularly, a PlayStation Controller. Its done this way to abstract away the need to write input handlers for both a keyboard and a gamepad. If you think about the gamepad as the main interface for interaction between a user and the game, then map keys to those already existing actions, you've simplified your handling source code. If you do not wish to support gamepads, it is still possible to map keys to any function you wish using the keyConfig mapping API above.

For Example:

var keyConfig = {
  '32': 'cross'
};
var listener = Ludic.input.newEventListener(keyConfig, this, true);

listener.cross = this.jump();

In the above example, we map the spacebar (keycode 32), to the cross action, which executes the player jump function. You can map any key(s) to the cross action. Information on the Gamepad API can be found here

Ludic

Clone this wiki locally