Lo que quiero hacer es similar a este video . En p5.js, estoy usando la función get() . Después de usar esto, crearé imágenes pequeñas (dividiendo un gran conjunto de mosaicos) y las insertaré en una matriz. Pero en mi código get() devuelve una matriz de píxeles vacía . Aquí hay una parte de mi código:
tilesImages = []; // tiles array function preload() { let tilesImage = loadImage(TILEMAP_PATH + "tiles.png", () => { console.log("Tiles loaded successfully"); // It logs this }, () => { console.log("An error occured when tiles loaded"); }); for (let i = 0; i < TILE_HORIZONTAL; i++) { for (let j = 0; j < TILE_VERTICAL; j++) { let x = i * TILE_SIZE + TILES_SPACE; let y = j * TILE_SIZE + TILES_SPACE; if (i == 0) { x = 0; } if (j == 0) { y = 0; } var img = tilesImage.get(x, y, TILE_SIZE, TILE_SIZE); // get tiles from tileset tilesImages.push(img); } } } function setup() { console.log(tilesImages[0].pixels); // returns empty }Traté de usar esto , pero solo dibuja líneas rosas verticales en mi pequeña imagen.
Mi mosaico: https://www.kenney.nl/assets/pixel-shmup (a la derecha)
Estoy usando imágenes individuales ahora, pero quiero saber la solución a este problema. Gracias
Creo que el problema aquí es que no está esperando que se cargue la imagen. La función loadImage es asíncrona . Es decir, solo inicia el proceso de carga de la imagen, pero regresa antes de que realmente termine de cargar la imagen. Entonces, cualquier código que venga después se ejecutará de inmediato, mientras la carga aún está en progreso. Puede usar la función de devolución de llamada para ejecutar el código después de que se complete la carga. Aquí hay una versión modificada de su código que debería aliviar el problema:
tilesImages = []; // tiles array function preload() { let tilesImage = loadImage( TILEMAP_PATH + "tiles.png", () => { console.log("Tiles loaded successfully"); // It logs this // Wait until loading is complete to use tilesImage.get() for (let i = 0; i < TILE_HORIZONTAL; i++) { for (let j = 0; j < TILE_VERTICAL; j++) { let x = i * TILE_SIZE + TILES_SPACE; let y = j * TILE_SIZE + TILES_SPACE; if (i == 0) { x = 0; } if (j == 0) { y = 0; } var img = tilesImage.get(x, y, TILE_SIZE, TILE_SIZE); // get tiles from tileset tilesImages.push(img); } } }, () => { console.log("An error occured when tiles loaded"); } ); }