get() 函数 returns p5.js 中的空像素数组

Question

我想做的事情与this video. In p5.js, I am using get()功能类似。使用这个之后，我将创建小图像（通过划分大tileset）并将它们推入一个数组。但是在我的代码中 get() returns 一个 空像素数组 。这是我的代码的一部分：

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
}

我尝试使用 this，但它只会在我的小图片上绘制垂直的粉红色线条。

我的图块集：https://www.kenney.nl/assets/pixel-shmup（右侧）

我现在用的是单图，但我想知道这个问题的解决方法。谢谢

Answer 1

我认为这里的问题是您没有等待图像实际加载。 loadImage 函数是 异步的 。也就是说，它仅开始加载图像的过程，但 returns 在它真正完成加载图像之前。因此，之后的任何代码都会立即运行，而加载仍在进行中。加载完成后可以使用回调函数给运行代码。这是您的代码的修改版本，应该可以缓解该问题：

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");
    }
  );
}

get() 函数 returns p5.js 中的空像素数组

get() function returns an empty pixels array in p5.js

javascript

image

p5.js