EaselJS和SpriteSheet

Question

我只是试图让一个精灵表每一帧但我不断收到为第一个帧，下面的代码：

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(); 
} 

我会坚持这件事上的小提琴，但有将与图像跨域问题。

Answer 1

好吧，虽然我无法解决EaselJS的问题，但我只是解决了这个问题。我创建了一个复制的getFrame功能EaselJS的精灵东西是为了做一个功能，那就是：

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); 
} 

Answer 2

尝试SpriteSheetUtils.exractFrame（见SpriteSheetUtils）。它完全是你在你的自定义代码中做的。

Answer 3

在你的代码的问题是，frame.image属性指向源位图，这是在spritesheet所有帧相同的（除非你有一个多图像spritesheet）。

要从spritesheet显示帧，请使用Sprite。例如，修改您的代码：

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); 
}