2017/11/25

Biblioteca p5.play

p5.play es una biblioteca de p5.js (que a su vez es una biblioteca de JavaScript) que nos permite trabajar con la clase Sprite, haciendo mucho más sencilla la creación de animaciones, detección de colisiones, interacción con teclado y ratón, etc.

En el ejemplo de más abajo he creado un Sprite con una animación formada por una secuencia de ocho dibujos. Si pulsas con el ratón en cualquier punto del área amarilla, el Sprite se moverá persiguiendo el click.



Código html:
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Prueba p5.play.js</title>
    <script src="libraries/p5.js"></script>
    <script src="libraries/p5.play.js"></script>
    <script src="code.js"></script>
</head>
  <body style="text-align:center; margin:0px">
  </body>
</html>

Código p5.js:
var alien;
var secuenciaInvader;

function preload(){
  secuenciaInvader = loadAnimation(
    "images/SpriteAlien04a.png",
    "images/SpriteAlien04b.png",
    "images/SpriteAlien04c.png",
    "images/SpriteAlien04d.png",
    "images/SpriteAlien04e.png",
    "images/SpriteAlien04f.png",
    "images/SpriteAlien04g.png",
    "images/SpriteAlien04h.png"
    );
}

function setup() {
  createCanvas(500, 500);
  alien = createSprite(width/2, height/2,40,25);
  alien.addAnimation("default", secuenciaInvader);
  alien.rotateToDirection = false;
  alien.maxSpeed = 2;
  alien.friction = 0.05;
}

function draw() {
  background(255,215,0);
  if (mouseIsPressed) {
    alien.attractionPoint(0.5, mouseX, mouseY);
  }
  drawSprites();
}