【问题标题】：Merge images in P5.js在 P5.js 中合并图像
【发布时间】：2021-05-12 13:57:26
【问题描述】：

我正在 p5.js 上制作游戏，我想合并每个组件的图像以获得游戏的背景，但是使用 createGraphics 不起作用。代码如下：

createGameMapImg() {
    let gameImg = createGraphics(this.width * this.boxSize, this.height * this.boxSize);

    gameImg.background(color('white'));

    for (let component of this.components) {
        image(component.img, component.x * this.boxSize, component.y * this.boxSize, component.width * this.boxSize, component.height * this.boxSize);
        if (component.img != undefined) gameImg.image(component.img, component.x * this.boxSize, component.y * this.boxSize, component.width * this.boxSize, component.height * this.boxSize);
    }

    return gameImg;
}

编辑

阅读我的代码几个小时后，我终于明白发生了什么：

我有一个包含所有组件定义的 JSON（包括 URL img）
我将此 JSON 发送到管理组件呈现的类。
我在预加载时调用构造函数，但组件图像不会加载，除非我这样做：

this.componetsJSON = loadJSON(componetsJSON, () => this.components = this.createComponets());

这个想法是在加载 JSON 之后，方法 createComponents 加载不同的图像。

【问题讨论】：

您能说明您是如何定义this.components 和this.boxsize 的吗？还有你怎么称呼这个方法的？
欢迎来到 StackOverflow @Sonya。虽然最好将问题中的代码减少到基本元素，但您确实需要包含足够的代码以使您的问题可重现（请参阅：stackoverflow.com/help/minimal-reproducible-example）。对于 p5js，您几乎应该总是在您的问题中包含一个可运行的 sn-p：stackoverflow.com/questions/67410651/…
@Sonya 你直接调用image()，它在p5的默认画布中呈现：而不是你想呈现到你的p5.Graphics实例中：gameImg.image(...)。 Paul 的详细示例证明了这一点 (+1)

标签： javascript p5.js

【解决方案1】：

如果您的代码有问题，则从您发布的极少部分中看不到。最有可能的问题在于您如何加载图像或使用生成的 p5.Graphics 实例。这是一个工作示例，我用一个简单的用例填补了空白：

const boxSize = 1;
let components;
let gameMap;

function preload() {
  // We need to load images in preload to make sure they are available when we're drawing them
  let tree = loadImage('https://www.paulwheeler.us/files/tree.png');
  components = [{
      img: loadImage('https://www.paulwheeler.us/files/game_map.png'),
      x: 0,
      y: 0,
      width: 200,
      height: 200
    },
    {
      img: tree,
      x: 20,
      y: 100,
      width: 56,
      height: 70
    },
    {
      img: tree,
      x: 120,
      y: 20,
      width: 56,
      height: 70
    }
  ];
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  gameMap = createGameMapImg();
}

function draw() {
  let size = min(width, height);
  image(gameMap, 0, 0);
}

function createGameMapImg() {
  let gameImg = createGraphics(width * boxSize, height * boxSize);

  gameImg.background(color('white'));

  for (let component of components) {
    // I'm not sure why this was in your code, since it looked
    // like the goal was to draw the images to the cameImg 
    // graphics object:
    // image(component.img, component.x * boxSize, component.y * boxSize, component.width * boxSize, component.height * boxSize);
    if (component.img != undefined) {
      gameImg.image(
        component.img,
        component.x * boxSize,
        component.y * boxSize,
        component.width * boxSize,
        component.height * boxSize
      );
    }
  }

  return gameImg;
}

&lt;script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"&gt;&lt;/script&gt;

【讨论】：