p5play p5play

  • API Docs for Version: 2.3.0

    • Show:

    SpriteAnimation

    Module: p5play

    An SpriteAnimation object contains a series of images (p5.Image) that can be displayed sequentially.

    All files must be png images. You must include the directory from the sketch root, and the extension .png

    A sprite can have multiple labeled animations, see Sprite.addAnimation and Sprite.changeAnimation, however an animation can be used independently.

    An animation can be created either by passing a series of file names, no matter how many or by passing the first and the last file name of a numbered sequence. p5play will try to detect the sequence pattern.

    For example if the given filenames are "data/file0001.png" and "data/file0005.png" the images "data/file0003.png" and "data/file0004.png" will be loaded as well.

    Table of Contents

    Constructor

    SpriteAnimation
    (
    • fileName1
    • fileName2
    • fileNameN
    )

    Defined in lib/p5play.js:2667

    Parameters:

    • fileName1 String

      First file in a sequence OR first image file

    • fileName2 String

      Last file in a sequence OR second image file

    • [fileNameN] String optional multiple

      Any number of image files after the first two

    Example:

    var sequenceAnimation;
var glitch;

function preload() {
  sequenceAnimation = loadAnimation("data/walking0001.png", "data/walking0005.png");
  glitch = loadAnimation("data/dog.png", "data/horse.png", "data/cat.png", "data/snake.png");
}

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

function draw() {
  background(0);
  animation(sequenceAnimation, 100, 100);
  animation(glitch, 200, 100);
}

    Methods

    changeFrame
    (
    • frame
    )

    Defined in lib/p5play.js:3045

    Changes the current frame.

    Parameters:

    • frame Number

      Frame number (starts from 0).

    clone () SpriteAnimation

    Defined in lib/p5play.js:2882

    Objects are passed by reference so to have different sprites using the same animation you need to clone it.

    Returns:

    SpriteAnimation:

    A clone of the current animation

    draw
    (
    • x
    • y
    • r=0
    )

    Defined in lib/p5play.js:2907

    Draws the animation at coordinate x and y. Updates the frames automatically.

    Parameters:

    • x Number

      x coordinate

    • y Number

      y coordinate

    • [r=0] Number optional

      rotation

    getFrame () Number

    Defined in lib/p5play.js:3105

    Returns the current frame number.

    Returns:

    Number:

    Current frame (starts from 0)

    getFrameImage () p5.Image

    Defined in lib/p5play.js:3125

    Returns the current frame image as p5.Image.

    Returns:

    p5.Image:

    Current frame image

    getHeight () Number

    Defined in lib/p5play.js:3164

    Returns the current frame height in pixels. If there is no image loaded, returns 1.

    Returns:

    Number:

    Frame height

    getImageAt
    (
    • frame
    )
    p5.Image

    Defined in lib/p5play.js:3135

    Returns the frame image at the specified frame number.

    Parameters:

    • frame Number

      Frame number

    Returns:

    p5.Image:

    Frame image

    getLastFrame () Number

    Defined in lib/p5play.js:3115

    Returns the last frame number.

    Returns:

    Number:

    Last frame number (starts from 0)

    getWidth () Number

    Defined in lib/p5play.js:3146

    Returns the current frame width in pixels. If there is no image loaded, returns 1.

    Returns:

    Number:

    Frame width

    goToFrame
    (
    • toFrame
    )

    Defined in lib/p5play.js:3085

    Plays the animation forward or backward toward a target frame.

    Parameters:

    • toFrame Number

      Frame number destination (starts from 0)

    nextFrame ()

    Defined in lib/p5play.js:3059

    Goes to the next frame and stops.

    onComplete () SpriteAnimation

    Defined in lib/p5play.js:3035

    fire when animation ends

    Returns:

    SpriteAnimation
    play ()

    Defined in lib/p5play.js:3007

    Plays the animation.

    previousFrame ()

    Defined in lib/p5play.js:3072

    Goes to the previous frame and stops.

    rewind ()

    Defined in lib/p5play.js:3026

    Rewinds the animation to the first frame.

    stop ()

    Defined in lib/p5play.js:3017

    Stops the animation.

    Properties

    frameChanged

    Boolean

    Defined in lib/p5play.js:2769

    True if frame changed during the last draw cycle

    frameDelay

    Number

    Defined in lib/p5play.js:2731

    Delay between frames in number of draw cycles. If set to 4 the framerate of the animation would be the sketch framerate divided by 4 (60fps = 15fps)

    Default: 4

    images

    Array

    Defined in lib/p5play.js:2716

    Array of frames (p5.Image)

    looping

    Boolean

    Defined in lib/p5play.js:2760

    If set to false the animation will stop after reaching the last frame

    Default: true

    playing

    Boolean

    Defined in lib/p5play.js:2742

    True if the animation is currently playing.

    Default: true

    visible

    Boolean

    Defined in lib/p5play.js:2751

    Animation visibility.

    Default: true