Cuando cargo mi página web, las líneas createImageBitmap no se ejecutan y mi lista de promesas se deja vacía, pero cuando vuelvo a cargar la página, las promesas están en la lista y la lista parece haberse llenado antes de que se llame a la función. . Esto está causando problemas y bloqueando mi juego, porque las promesas no están ahí para ser resueltas en imágenes.
¿Por qué sucede esto y qué puedo hacer para solucionarlo?
aquí hay un extracto modificado del código:
Spritesheets = { tileset_grass : new Image(), tileset : new Image(), player : new Image(), crawler : new Image(), creature : new Image(), items : new Image(), particles : new Image() }; Spritesheets.tileset_grass.src = "images/tileset_grass.png"; Spritesheets.tileset.src = "images/tileset.png"; Spritesheets.player.src = "images/player.png"; Spritesheets.crawler.src = "images/crawler.png"; Spritesheets.creature.src = "images/creature.png"; Spritesheets.items.src = "images/items.png"; Spritesheets.particles.src = "images/particles.png"; // separates spritesheets into separate sprites Images = { tileset_grass : { spriteW : 16, spriteH : 18 }, tileset : { spriteW : 16, spriteH : 16 }, player : { spriteW : 16, spriteH : 16 }, crawler : { spriteW : 16, spriteH : 16 }, creature : { spriteW : 16, spriteH : 16 }, items : { spriteW : 16, spriteH : 16 }, particles : { spriteW : 16, spriteH : 16 }, }; console.log(Images) function loadSprites() { for(let i = 0; i < Object.keys(Images).length; i++) { for(let k = 0; k < Spritesheets[Object.keys(Images)[i]].naturalWidth / Images[Object.keys(Images)[i]].spriteW; k++) { Images[Object.keys(Images)[i]][k] = createImageBitmap(Spritesheets[Object.keys(Images)[i]], k * Images[Object.keys(Images)[i]].spriteW, 0, Images[Object.keys(Images)[i]].spriteW, Images[Object.keys(Images)[i]].spriteH); }; }; console.log(Images) }; loadSprites();Al pasar un HTMLImageElement como fuente para createImageBitmap() , ese elemento debe estar en un estado decodificado, es decir, su evento de load debe haberse activado.
Funciona cuando recargas la página porque has tenido suerte y las imágenes se cargaron lo suficientemente rápido, desde el caché.
Por lo tanto, podría esperar el evento de load de todos estos HTMLImageElements antes de llamar a todos los createImageBitmap() , o podría refactorizar su código para hacerlo un poco más rápido* obteniendo todos los recursos como blobs y creando los ImageBitmaps a partir de estos blobs directamente, sin embargo, deberá almacenar el tamaño de las imágenes en su JS, junto con las opciones de recorte.
Spritesheets = { tileset_grass : "images/tileset_grass.png", tileset : "images/tileset.png", player : "images/player.png", crawler : "images/crawler.png", creature : "images/creature.png", items : "images/items.png", particles : "images/particles.png" }; // separates spritesheets into separate sprites Images = { tileset_grass : { // add the image's width and height info here (or somewhere else) width: XXX, height: XXX, spriteW : 16, spriteH : 18 } }; async function loadSprites() { const keys = Object.keys(Images); for(let i = 0; i < keys.length; i++) { const key = keys[i]; // fetch as Blob const blob = await fetch(Spritesheets[key]).then(resp => resp.ok && resp.blob()); const img = Images[key]; for(let k = 0; k < img.width / img.spriteW; k++) { img[k] = await createImageBitmap(blob, k * img.spriteW, 0, img.spriteW, img.spriteH); }; }; console.log(Images) };