Search code examples
htmlhtml5-canvaseaseljscreatejssprite-sheet

Create a Sprite from raw RGBa data

I take several snapshots from playing video on canvas and thus getting raw RGB images into memory.

In the documentations its states that Sprite class accepts a Spritesheet instance only.

  • Is there any way to create a Sprite from raw RGBa?
  • Or maybe convert that raw data into separate Bitmap data and then put into the Sprite sheet somehow?
Solution

  • You just need to construct a SpriteSheet using your Image instances. See the docs for details:

    http://createjs.com/Docs/EaselJS/classes/SpriteSheet.html

    SpriteSheet supports multiple source images, so each frame could be a separate image.

    Alternatively, if you want to combine a bunch of frames into a single, more efficient source image and produce a SpriteSheet from it, you should look at using SpriteSheetBuilder. There are some simple examples of this with EaselJS, and of course docs:

    http://createjs.com/Docs/EaselJS/classes/SpriteSheetBuilder.html