Maybe it’s just me but I had an issue earlier today where the SpriteSheet class of EaselJS wasn’t returning the correct frames. After a lot of Googling, starting a thread on Stackoverflow and reading the source code of the library I decided to do a workaround: all I needed to do was to simply take an image and divide it into tiles.
So what I had before was:
{
var c = new Container();
var d = { };
var l = rx * ry;
var lx = 0;
var ly = 0;
var m = Math.floor( l / 2 );
var f;
var s;
var t;
master = new Bitmap( e.target );
master.alpha = .1;
c.addChild( master );
d.images = [ e.target ];
d.frames = { width: lw, height: lh, count: l };
s = new SpriteSheet( d );
tiles = [ ];
for ( var i = 0; i < l; i++ )
{
t = new Bitmap( s.getFrame( i ).image );
tiles.push( t );
}
}
According to the EaselJS docs this would then split up the sprite into frames that I can then access. After looking through the code and doing lots of debugging I couldn’t work out what was going wrong. So then I looked at using the SpriteSheetUtils static class by simply replacing the following:
With…
This just returned the first frame, lame. So I thought screw this and just do it myself. I created a function that simply takes an array containing the ‘x, y, width and height’ of the clip and the image it should clip, here it is:
{
var cs = document.createElement( 'canvas' );
var c = cs.getContext( '2d' );
cs.height = p[ 3 ];
cs.width = p[ 2 ];
c.drawImage( i, p[ 0 ], p[ 1 ], p[ 2 ], p[ 3 ], 0, 0, p[ 2 ], p[ 3 ] );
return new Bitmap( cs );
}
All that happens is that I create a temporary canvas element and using the ‘drawImage‘ function I draw part of our image onto it. EaselJS then allows me to pass into it the canvas element and then I can use it as an layered object thanks to this awesome library.
