I am currently working on a project that is inspired by this particular video. Within p5.js, I have been utilizing the get() function. My goal is to divide a large tileset into smaller images and store them in an array. However, I have encountered an issue where the get() function is returning an empty pixels array. Here is a snippet of my code:
tilesImages = []; // tiles array
function preload() {
let tilesImage = loadImage(TILEMAP_PATH + "tiles.png", () => {
console.log("Tiles loaded successfully"); // This message is logged
}, () => {
console.log("An error occurred when loading tiles");
});
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);
tilesImages.push(img);
}
}
}
function setup() {
console.log(tilesImages[0].pixels);
}
In attempting to resolve this issue, I consulted this source, but it only resulted in drawing vertical pink lines on my small image.
The tileset I am using can be found at: (located on the right)
While I am currently resorting to single images, I am eager to discover a solution to this problem. Thank you.