P5.play animations and animated sprites

First, download and copy this empty project which includes all the images and the p5.play library.

Animations

Animations are like images, you preload images and you display them in a certain place. The library takes care of storing and advancing the frames.

Creating animations from single images:

//animations like p5 images should be stored in variables
//in order to be displayed during the draw cycle
var ghost, asterisk;

//it's advisable (but not necessary) to load the images in the preload function
//of your sketch otherwise they may appear with a little delay
function preload() {

//create an animation from a sequence of numbered images
//pass the first and the last file name and it will try to find the ones in between
ghost = loadAnimation("assets/ghost_standing0001.png", "assets/ghost_standing0007.png");

//create an animation listing all the images files
asterisk = loadAnimation("assets/asterisk.png", "assets/triangle.png", "assets/square.png", "assets/cloud.png", "assets/star.png", "assets/mess.png", "assets/monster.png");
}

function setup() {
  createCanvas(800,300);
}

function draw() {
  background(255,255,255);  

  //specify the animation instance and its x,y position
  //animation() will update the animation frame as well
  animation(ghost, 300, 150);
  animation(asterisk, 500, 150);
}

Creating animations from a sprite sheet requires two steps:

1. loading and processing the sprite sheet
sprite_sheet = loadSpriteSheet(filename, frame width, frame height, number of frames);

2. loading the animation

explode_animation = loadAnimation(sprite_sheet);

Try to load an animation you made in piskel, you just have to change the parameters in loadSpriteSheet.

var sprite_sheet_image;
var sprite_sheet;
var explode_animation;

function preload() {
  // specify width and height of each frame and number of frames
  sprite_sheet = loadSpriteSheet('assets/explode_sprite_sheet.png', 171, 158, 11);
  explode_animation = loadAnimation(sprite_sheet);

  // load the full sprite sheet for example reference only
  sprite_sheet_image = loadImage('assets/explode_sprite_sheet.png');
}

function setup() {
  createCanvas(800, 225);
}

function draw() {
  background(255);

  // animate the sprite sheet
  animation(explode_animation, 100, 130);

  // show full sheet for example reference
  image(sprite_sheet_image, 250, 40, 500, 154);
}

Sprites

p5 play facilitates the creation of objects called sprites. Sprites are visual entities existing in a 2d space. They have coordinates, they can be assigned an appearance (images and animations) and specific functions for physics, collision or interaction.

A sprite is created once and it doesn’t need to be drawn every time.
The function drawSprites(); usually called at the end of the draw cycle will take care of all the visualization.

var boxSprite;

function setup() {
  createCanvas(800,600);
  //create a sprite with a placeholder rectangle as visual component
  boxSprite = createSprite(100, 150, 50, 100);
}

function draw() {
  background(240);

  //draw all the sprites
  drawSprites();
}

Here is how to create an animated sprite and some functions to control the animation
Don’t forget to check the examples and the reference

//Changing the sprites' animations
var character;
var spriteSheet;

//preload the spritesheets
function preload() {

  //load from spritesheet
  spriteSheet = loadSpriteSheet('assets/explode_sprite_sheet.png', 171, 158, 11);

}

function setup() {
  createCanvas(800,300);

  //create a sprite and add the 3 animations
  character = createSprite(400, 150, 50, 100);

  //label, first frame, last frame
  //the addAnimation method returns the added animation
  //that can be store in a temporary variable to change parameters
  character.addAnimation("floating", "assets/ghost_standing0001.png", "assets/ghost_standing0007.png");

  character.addAnimation("moving", "assets/ghost_walk0001.png", "assets/ghost_walk0004.png");

  character.addAnimation("spinning", "assets/ghost_spin0001.png", "assets/ghost_spin0003.png");

  var explodeAnimation = loadAnimation(spriteSheet);

  character.addAnimation('explode', explodeAnimation);

}

function draw() {
  background(255,255,255);  

  //keyDown returns true for a cycle if the key was just pressed
  //during this cycle. Useful to capture instant events in the draw cycle
  //without moving game logic to the mousePressed() function
  //mouseWentDown works the same way with mouse input
  if(keyWentDown("a") )
    {
    character.changeAnimation("moving");
    }

  if(keyWentDown("s") )
    {
    character.changeAnimation("spinning");
    }

  if(keyWentUp("s") )
    {
    character.changeAnimation("floating");
    }

  if(keyWentDown("d") )
    {
    character.animation.stop();
    }

  if(keyWentUp("d") )
    {
    character.animation.play();
    }

  if(keyWentDown(LEFT_ARROW))
    {
    character.animation.previousFrame();
    }

  if(keyWentDown(RIGHT_ARROW))
    {
    character.animation.nextFrame();
    }

  if(keyWentUp("f") )
  {
  character.changeAnimation("explode");
  character.animation.rewind();
  }

  //changing an animation when another one is done
  if(character.getAnimationLabel () == "explode" && character.animation.getFrame()==character.animation.getLastFrame())
    {
    character.changeAnimation("floating");
    }

  //draw the sprite
  drawSprites();
}

Posted in