npm

Bring the best of OSS JavaScript development to your projects with npm Orgs - private packages & team management tools.Learn more »

pixi.js-keyboard

1.0.9 • Public • Published

pixi.js-keyboard

pixi.js-keyboard is a WORKING (2019) plugin for Pixi.js v3.0.8 or higher to manage the keyboard events easily.

Demo: http://ocservers.com/demos/pixi.js-events/

Installation

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

Reference

All keycodes such as 'ArrowLeft': https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

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.

Usage: Example (Browserify | Webpack)

// Copy a png image as 'images/cat.png'
const PIXI = require('pixi.js');
const Keyboard = require('pixi.js-keyboard');
const Mouse = require('pixi.js-mouse');
 
//Aliases
let Application = PIXI.Application,
    Container = PIXI.Container,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite;
 
//Create a Pixi Application
let app = new Application({
    width: document.body.clientWidth, 
    height: document.body.clientHeight,                       
    antialiasing: true, 
    transparent: false, 
    resolution: 1
  }
);
 
window.addEventListener("resize", function() {
  app.renderer.resize(window.innerWidth, window.innerHeight);
});
 
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
loader
  .add([
    "images/cat.png"
  ])
  .on("progress", loadProgressHandler)
  .load(setup);
 
function loadProgressHandler(loader, resource) {
  //Display the file `url` currently being loaded
  console.log("loading: " + resource.url);
  //Display the precentage of files currently loaded
  console.log("progress: " + loader.progress + "%"); 
}
 
var cat, 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() {
  console.log("setup"); 
 
  //Create the `cat` sprite 
  cat = new Sprite(resources["images/cat.png"].texture);
  cat.position.set(100, 100);
  cat.anchor.set(0.5, 0.5);
  app.stage.addChild(cat);
  
  //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 speed = 5 * delta;
  
  // Keyboard
  if (Keyboard.isKeyDown('ArrowLeft', 'KeyA'))
    cat.x -= speed;
  if (Keyboard.isKeyDown('ArrowRight', 'KeyD'))
    cat.x += speed;
  
  if (Keyboard.isKeyDown('ArrowUp', 'KeyW'))
    cat.y -= speed;
  if (Keyboard.isKeyDown('ArrowDown', 'KeyS'))
    cat.y += speed;
  
  // Mouse
  cat.rotation = getAngleTo(Mouse.getPosX(), Mouse.getPosY(), cat.x, cat.y);
  
  if (Mouse.isButtonDown(Mouse.Button.LEFT)) {
    cat.x += getAngleX(speed, cat.rotation);
    cat.y += getAngleY(speed, cat.rotation);
  }
  if (Mouse.isButtonDown(Mouse.Button.RIGHT)) {
    cat.x -= getAngleX(speed, cat.rotation);
    cat.y -= getAngleY(speed, cat.rotation);
  }
}

install

npm i pixi.js-keyboard

Downloadsweekly downloads

5

version

1.0.9

license

ISC

last publish

collaborators

  • avatar
Report a vulnerability