Show:
Module: p5play

Represents a sprite sheet and all it's frames. To be used with SpriteAnimation, or static drawing single frames.

There are two different ways to load a SpriteSheet

  1. Given width, height that will be used for every frame and the number of frames to cycle through. The sprite sheet must have a uniform grid with consistent rows and columns.

  2. Given an array of frame objects that define the position and dimensions of each frame. This is Flexible because you can use sprite sheets that don't have uniform rows and columns.

Constructor

SpriteSheet
(
  • image
)

Defined in lib/p5play.js:3183

Parameters:

  • image Object

    String image path or p5.Image object

Example:

// Method 1 - Using width, height for each frame and number of frames
explode_sprite_sheet = loadSpriteSheet('assets/explode_sprite_sheet.png', 171, 158, 11);

// Method 2 - Using an array of objects that define each frame
var player_frames = loadJSON('assets/tiles.json');
player_sprite_sheet = loadSpriteSheet('assets/player_spritesheet.png', player_frames);

Methods

_generateSheetFrames ()
private

Defined in lib/p5play.js:3248

Generate the frames data for this sprite sheet baesd on user params

clone () SpriteSheet

Defined in lib/p5play.js:3314

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

Returns:

SpriteSheet:

A clone of the current SpriteSheet

drawFrame
(
  • frame_name
  • x
  • y
  • width
  • height
)

Defined in lib/p5play.js:3277

Draws a specific frame to the canvas.

Parameters:

  • frame_name Object

    Can either be a string name, or a numeric index.

  • x Object

    x position to draw the frame at

  • y Object

    y position to draw the frame at

  • [width] Object optional

    optional width to draw the frame

  • [height] Object optional

    optional height to draw the frame