Próbuję zbudować jeden poziomy przezroczysty obraz z tablicy ImageData, który będzie używany jako obraz sprite do animacji. Czy możesz wyjaśnić, jak mogę przekazać ramki do płótna, które jest szersze (szerokość X countFrames) i jak mogę przesunąć szerokość ImageData w iteracji? Dziękuję Ci.

var spriteFrames = [];

for (var i = 0; i < data.animator.frames; i++) {
    var imageData = new ImageData( 500, 400 );
    spriteFrames.push( imageData.data );
}

function generateSprite( data, width, height, numFrames ) {
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');
    canvas.width = width * numFrames,
    canvas.height = height;
    var idata = ctx.getImageData(0, 0, width * numFrames, height);
    var buffer = new Uint8ClampedArray( width * numFrames * height * 4);

    // some logic here
    for (var a = 0; a < data.length; a++) {

        for( var i = 0; i < data[a].length; i+=4 ) {

            var pos = i * numFrames;

            buffer[pos]   = data[a][i];
            buffer[pos+1] = data[a][i+1];
            buffer[pos+2] = data[a][i+2];
            buffer[pos+3] = data[a][i+3];

        }
    }

    idata.data.set(buffer);
    ctx.putImageData(idata, 0, 0);

    return canvas.toDataURL();
}

img.src = generateSprite( spriteFrames, width, height, spriteFrames.length );
0
gedrihoydo 20 listopad 2019, 01:13

1 odpowiedź

To było takie łatwe

for (var a = 0; a < spriteFrames.length; a++) {
    ctx.putImageData( spriteFrames[a].image, width * a, 0 );
}
0
gedrihoydo 21 listopad 2019, 13:01