API Documentation for: 0.6.0

SpriteSheetUtils Class

Defined in: SpriteSheetUtils:34
Module: EaselJS

The SpriteSheetUtils class is a collection of static methods for working with SpriteSheets. A sprite sheet is a series of images (usually animation frames) combined into a single image on a regular grid. For example, an animation consisting of 8 100x100 images could be combined into a 400x200 sprite sheet (4 frames across by 2 high). The SpriteSheetUtils class uses a static interface and should not be instantiated.

Item Index





  • spriteSheet
  • horizontal
  • vertical
  • both

Defined in addFlippedFrames:63

This is an experimental method, and may be buggy. Please report issues.

Extends the existing sprite sheet by flipping the original frames horizontally, vertically, or both, and adding appropriate animation & frame data. The flipped animations will have a suffix added to their names (_h, _v, _hv as appropriate). Make sure the sprite sheet images are fully loaded before using this method.

For example:
SpriteSheetUtils.addFlippedFrames(mySpriteSheet, true, true); The above would add frames that are flipped horizontally AND frames that are flipped vertically.

Note that you can also flip any display object by setting its scaleX or scaleY to a negative value. On some browsers (especially those without hardware accelerated canvas) this can result in slightly degraded performance, which is why addFlippedFrames is available.


  • spriteSheet SpriteSheet
  • horizontal Boolean

    If true, horizontally flipped frames will be added.

  • vertical Boolean

    If true, vertically flipped frames will be added.

  • both Boolean

    If true, frames that are flipped both horizontally and vertically will be added.


  • spriteSheet
  • frame
Image static

Defined in extractFrame:92

Returns a single frame of the specified sprite sheet as a new PNG image. Note that in almost all cases it is better to display a single frame using a paused instance of BitmapAnimation, than it is to slice out a frame using this method and display it with a Bitmap instance.


  • spriteSheet Image

    The SpriteSheet instance to extract a frame from.

  • frame Number

    The frame number or animation name to extract. If an animation name is specified, only the first frame of the animation will be extracted.


Image: a single frame of the specified sprite sheet as a new PNG image.


  • rbgImage
  • alphaImage
  • canvas
Canvas static

Defined in mergeAlpha:119

Merges the rgb channels of one image with the alpha channel of another. This can be used to combine a compressed JPEG image containing color data with a PNG32 monochromatic image containing alpha data. With certain types of images (those with detail that lend itself to JPEG compression) this can provide significant file size savings versus a single RGBA PNG32. This method is very fast (generally on the order of 1-2 ms to run).


  • rbgImage Image

    The image (or canvas) containing the RGB channels to use.

  • alphaImage Image

    The image (or canvas) containing the alpha channel to use.

  • canvas Canvas

    Optional. If specified, this canvas will be used and returned. If not, a new canvas will be created.


Canvas: A canvas with the combined image data. This can be used as a source for Bitmap or SpriteSheet.



HTMLCanvasElement | Object protected static

Defined in _workingCanvas:46


CanvasRenderingContext2D protected static

Defined in _workingContext:54