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

try SpriteSheetUtils.exractFrame (см. SpriteSheetUtils ). Это именно то, что вы делаете в своем пользовательском коде.

Answer 2

Проблема в вашем коде заключается в том, что свойство frame.image указывает на исходное растровое изображение, которое является одинаковым для всех кадров в таблице спрайтов (если у вас нет таблицы изображений с несколькими изображениями).

Для отображениякадр из таблицы спрайтов, используйте 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 );
}

Answer 3

Ну, хотя мне не удалось решить проблему с 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 );
}