html5画布大型雪碧片动画性能优化

Question

我正在使用http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/的方法在画布上渲染雪碧片动画。

而且大多数情况下都很好

但是当雪碧单张图像是大(我的例子是30000*500，60帧png文件)时，性能非常差，尤其是在Android上。

我认为图像资源占用了太多内存，但是如何优化其内存使用呢？我试过用"ImageOptim“压缩图像，但没有产生任何明显的差别。

有人能给我一些在画布上渲染大型雪碧片时的性能优化建议吗？

Answer 1

使用ImageBitmaps。

您的图像可能太大，无法保存在图形卡内存，这意味着每次它必须移动到那里，这可能会使事情真的很慢。

ImageBitmap对象允许保持原始位图数据随时可供GPU使用，不需要额外的数据。

因此，在init，你会准备好你的ImageBitmaps并扔掉完整的图像。现在，只有准备放置的小位图才会传递给GPU。

​

async function initSprites( img, sprite_width = img.width, sprite_height = img.height ) {
  // you would have to make the sprite factory logic based on your actual spritesheet,
  // here Im using a simple fixed-size grid from wikimedia
  const sprites = [];
  for( let y = 0; y < img.height; y += sprite_height) {
    for( let x = 0; x < img.width; x += sprite_width ) {
      sprites.push(
        await createImageBitmap( img, x, y, sprite_width, sprite_height )
      );
    }
  }
  return sprites;
}
async function loadImage( url ) {
  var img = new Image();
  img.crossOrigin = 'anonymous';
  await new Promise( (res, rej) => {
    img.onload = (e) => res( img );
    img.onerror = rej;
    img.src = url;
  } );
  return img;
}

async function init() {
  const url = "https://upload.wikimedia.org/wikipedia/commons/b/be/SpriteSheet.png";
  const FPS = 10;
  const sprite_width = 132;
  const sprite_height = 97;
  
  // we don't keep any reference to the Image
  const sprites = await initSprites( await loadImage( url ), sprite_width, sprite_height );
  
  const canvas = document.getElementById( 'canvas' );
  const ctx = canvas.getContext( '2d' );
  const frame_time = 1000 / FPS;
  let sprite_index = 0;
  let lastTime = performance.now();
  
  requestAnimationFrame( update );
  
  function update( t ) {
    if( t - lastTime > frame_time ) {
      lastTime = t;
      sprite_index = (sprite_index + 1) % sprites.length;
      draw();
    }
    requestAnimationFrame( update );
  }
  
  function draw() {
    ctx.clearRect( 0, 0, canvas.width, canvas.height );
    // we just reproduce the original spritesheet
    // but animated
    let inner_index = 0;
    for(let y = 0; y < 3; y++) {
      for( let x = 0; x < 4; x ++ ) {
        inner_index ++;
        const index = (sprite_index + inner_index) % sprites.length;
        const sprite = sprites[ index ];
        ctx.drawImage( sprite, x * sprite_width, y * sprite_height );
      }
    }
  }
}

// for Safari and IE
monkeyPatchCreateImageBitmap();

init().catch( console.error );


// a very poor monkey patch, only allowing HTMLImageElement as source
// returns an HTMLCanvasElement
function monkeyPatchCreateImageBitmap() {
  if( typeof window.createImageBitmap === 'undefined' ) {
    window.createImageBitmap = monkeyPatch;
  }
  function monkeyPatch( img, sx = 0 , sy = 0, sw = img.width, sh = img.height ){
    const canvas = document.createElement( 'canvas' );
    canvas.width = sw;
    canvas.height = sh;
    canvas.getContext( '2d' )
      .drawImage( img, sx, sy, sw, sh, 0, 0, sw, sh );
    canvas.close = (e) => canvas.width = 0;
    return Promise.resolve( canvas );
  };
}

<canvas id="canvas" width="528" height="291"></canvas>

​