Creo que este es un problema de Chrome, ya que solo parece que Chrome, Edge y OBS. Sin embargo, eso es un problema porque esa es la mayor parte de mi público objetivo. No hay parpadeo en Firefox, así que creo que solo necesito un trabajo para los navegadores basados en Chromium.

El parpadeo solo parece durar 1 rotación a través de la animación, sin embargo, ocasionalmente volverá en momentos aleatorios. También vuelve cada vez que cambiamos la animación del sprite.

Antes de ejecutar el siguiente código, ya hemos importado la imagen como un objeto Javascript. Cada imagen tiene múltiples estados entre los que podemos alternar. Cada estado tiene 10 marcos que se cargan como URL de datos y se cambian entre ellos para que el parpadeo no se produzca al cargar las imágenes.

Actualmente estamos probando con muy pocas imágenes, por lo que el tamaño total del objeto es de unos pocos Kb.

 //Set up Canvas Javascript Elements const canvas = document.getElementById('mainCanvas'); const bufferCanvas = document.getElementById('bufferCanvas'); //Get Canavas 2d context const ctx = canvas.getContext('2d'); const bctx = bufferCanvas.getContext('2d'); //Set Canvas Size - Broken up into multiple lines to more easily enable and disable elements during testing const CANVAS_WIDTH = 364; const CANVAS_HEIGHT = 444; canvas.width = CANVAS_WIDTH; canvas.height = CANVAS_HEIGHT; bufferCanvas.width = CANVAS_WIDTH; bufferCanvas.height = CANVAS_HEIGHT; //Sets current animation, initial frame, and cycle count var currentAnimation = 'idle' var currentFrame = 0; var cycle = 0; function animate(){ //Only incrementing frames when the cycle mod 10 is 0 slows it down if(cycle % 10 == 0){ currentFrame++; if(currentFrame >= currentImage[currentAnimation].length){ currentFrame = 0; } playerImage.src = currentImage[currentAnimation][currentFrame]; } //Draws the buffer canvas prior to clearing the main canvas bctx.drawImage(playerImage, 0, 0); //Clears main Canvas ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); //Draws new image to main Canvas ctx.drawImage(bufferCanvas, 0, 0); //Clears buffer canvas once main canvas has been drawn bctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); //Resets cycle to maintain a manageable number cycle++; if(cycle >= 10000){ cycle = 0; } //Calls itself to loop requestAnimationFrame(animate); }