pixi.js-keyboard (2021 Pixi.js v5)

Handle keyboard events elegantly and simple.

Demo: http://134.122.95.172/pixijs/

Download: http://134.122.95.172/pixijs/demo.zip (browserify)

Installation

npm install --save pixi.js-keyboard pixi.js-mouse

Reference

Keycodes: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code/code_values

API

Keyboard

.isKeyDown('KeyW')

Checks if the key is held.

.isKeyPressed('KeyW')

Checks if the key was pressed, holding will not trigger this more than once.

.isKeyReleased('KeyW')

Checks whether the key was just released.

.update()

Ensure to use this for correct event handling at the end of the game loop.

.events.on('pressed', null, (keyCode, event) => { console.log(keyCode); });

Callback when any key is pressed.

.events.on('released', null, (keyCode, event) => { console.log(keyCode); });

Callback when any key is released.

.events.on('down', null, (keyCode, event) => { console.log(keyCode); });

Callback when any key is down.

.events.on('pressed_KeyW', null, (keyCode, event) => { console.log(keyCode); });

Callback when a particular key is pressed.

.events.on('released_KeyW', null, (keyCode, event) => { console.log(keyCode); });

Callback when a particular key is released.

.events.on('down_KeyW', null, (keyCode, event) => { console.log(keyCode); });

Callback when a particular key is down.

Example

index.js

const PIXI = require('pixi.js');
const Keyboard = require('pixi.js-keyboard');
const Mouse = require('pixi.js-mouse');
 
//Aliases
var loader = PIXI.Loader.shared;
   
//Create a Pixi Application
var app = new PIXI.Application({
  width: document.documentElement.clientWidth, 
  height: document.documentElement.clientHeight,                       
  antialiasing: true, 
  backgroundAlpha: 0.1, 
  resolution: 1
});
 
window.addEventListener("resize", function() {
  app.renderer.resize(document.documentElement.clientWidth, document.documentElement.clientHeight);
});
 
app.view.addEventListener('contextmenu', (e) => {
  window.wasRightClick = true;
  //e.preventDefault();
});
 
//Add the canvas that Pixi automatically created for you to the HTML document
app.view.id = 'main';
document.body.appendChild(app.view);
 
//Use Pixi's built-in `loader` module to load an image
var sprites = {};

loader.add("bunny", "images/bunny.png");

// The `load` method loads the queue of resources, and calls the passed in callback called once all resources have loaded.
loader.load((loader, resources) => {
  // resources is an object where the key is the name of the resource loaded and the value is the resource object.
  // They have a couple default properties:
  // - `url`: The URL that the resource was loaded from
  // - `error`: The error that happened when trying to load (if any)
  // - `data`: The raw data that was loaded
  // also may contain other properties based on the middleware that runs.
  sprites.bunny = new PIXI.Sprite(resources.bunny.texture);
});

// throughout the process multiple signals can be dispatched.
loader.onProgress.add(() => {}); // called once per loaded/errored file
loader.onError.add(() => {}); // called once per errored file
loader.onLoad.add(() => {}); // called once per loaded file
loader.onComplete.add(setup); // called once when the queued resources all load.

var state;
 
function getAngleTo(mx, my, px, py) {
  var self = this;
  var distX = my - py;
  var distY = mx - px;
  var angle = Math.atan2(distX, distY);
  // var degrees = angle * 180/ Math.PI;
  return angle;
}
 
function getAngleX(length, angle) {
  return Math.cos(angle) * length;
}
 
function getAngleY(length, angle) {
  return Math.sin(angle) * length;
}
 
function setup() {
  const bunny = sprites.bunny;
  
  // Introduce the `bunny` sprite 
  bunny.position.set(100, 100);
  bunny.anchor.set(0.5, 0.5);
  app.stage.addChild(bunny);
  
  // Set the game state
  state = play;
 
  // Start the game loop 
  app.ticker.add(delta => gameLoop(delta));
  
  Mouse.events.on('released', null, (buttonCode, event, mouseX, mouseY, mouseOriginX, mouseOriginY, mouseMoveX, mouseMoveY) => {
    console.log(buttonCode, mouseOriginX, mouseOriginY, mouseX, mouseY, mouseMoveX, mouseMoveY);
  });
}
 
function gameLoop(delta){
  // Update the current game state:
  state(delta);
 
  Keyboard.update();
  Mouse.update();
}
 
function play(delta) {
  const bunny = sprites.bunny;
  const speed = 5 * delta;
  
  // Keyboard
  if (Keyboard.isKeyDown('ArrowLeft', 'KeyA'))
    bunny.x -= speed;
  if (Keyboard.isKeyDown('ArrowRight', 'KeyD'))
    bunny.x += speed;
  
  if (Keyboard.isKeyDown('ArrowUp', 'KeyW'))
    bunny.y -= speed;
  if (Keyboard.isKeyDown('ArrowDown', 'KeyS'))
    bunny.y += speed;
  
  // Mouse
  bunny.rotation = getAngleTo(Mouse.getPosX(), Mouse.getPosY(), bunny.x, bunny.y);
  
  if (Mouse.isButtonDown(Mouse.Button.LEFT)) {
    bunny.x += getAngleX(speed, bunny.rotation);
    bunny.y += getAngleY(speed, bunny.rotation);
  }
  
  if (Mouse.isButtonDown(Mouse.Button.RIGHT)) {
    bunny.x -= getAngleX(speed, bunny.rotation);
    bunny.y -= getAngleY(speed, bunny.rotation);
  }
}

index.html

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">

    <title>Example</title>
    <style>
      body, main {
        margin: 0;
        padding: 0;
      }
      
      body {
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <script src="bundle.js"></script>
  </body>
</html>

Browserify

Install globally: npm install -g browserify

Build bundle.js: browserify index.js -o bundle.js

Or download the example

Download: http://134.122.95.172/pixijs/demo.zip