EaselJS and SpriteSheet - sprite-sheet

Question

I'm simply trying to get each frame in a sprite sheet but all I keep getting is the first frame, here's the code:
function handleImageLoaded(e)
{
var c = new Container();
var d = { };
var l = rx * ry;
var lh = canvas.height / ry;
var lw = canvas.width / rx;
var lx = 0;
var ly = 0;
var s;
var t;
d.images = [ e.target ];
d.frames = { width: lw, height: lh, count: l };
s = new SpriteSheet( d );
for ( var i = 0; i < l; i++ )
{
t = new Bitmap( s.getFrame( i ).image );
t.x = lx++ * lw;
t.y = ( lx == rx ? ly++ : ly ) * lh;
lx = lx == rx ? 0 : lx;
c.addChild( t );
}
stage.addChild( c );
stage.update();
}
I would stick this up on a fiddle but there'd be cross domain issues with the image.

Answer 1

try SpriteSheetUtils.exractFrame (see SpriteSheetUtils). It does exactly what you do in your custom code.

Answer 2

The issue in your code is that the frame.image property points to the source bitmap, which is the same for all frames in the spritesheet (unless you have a multi-image spritesheet).
To display a frame from a spritesheet, use Sprite. For example, modifying your code:
for ( var i = 0; i < l; i++ )
{
t = new Sprite(spriteSheet, i);
t.x = lx++ * lw;
t.y = ( lx == rx ? ly++ : ly ) * lh;
lx = lx == rx ? 0 : lx;
c.addChild( t );
}

Answer 3

Well, while I wasn't able to fix the problem with EaselJS, I just worked around it. I created a function that replicated the getFrame function that EaselJS's sprite stuff was meant to do, here it is:
function generateTile(p, i)
{
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 );
}