P5.play animations and animated sprites

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

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