在P5.js中合并图像

Question

我正在使用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;
}

编辑

在阅读我的代码数小时后，我终于理解了发生了什么：

1. 我有一个包含所有组件定义（包括URL img）的JSON。
2. 我将此JSON发送到负责组件渲染的类中。
3. 我在预加载中调用构造函数，但是组件图像不会加载，除非我执行以下操作：

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

在加载JSON后，createComponents方法会加载不同的图像。

- Sonya

---

你能展示一下如何定义 this.components 和 this.boxsize 吗？另外你是怎么调用这个方法的？ - Jacob Stuligross

欢迎来到StackOverflow @Sonya。虽然在问题中减少代码只保留必要的元素是好的，但您确实需要包含足够的代码以使您的问题可重现（请参见：https://stackoverflow.com/help/minimal-reproducible-example）。对于p5js，您几乎总是应该在问题中包含可运行的片段：https://dev59.com/D8Dqa4cB1Zd3GeqPgZPZ。 - Paul Wheeler

@Sonya，你正在直接调用image()函数，这会在p5默认的画布上进行渲染：相反，你应该将其渲染到你的p5.Graphics实例中：gameImg.image(...)。Paul的详细示例演示了这一点（+1）。 - George Profenza

Answer 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;
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>

- Paul Wheeler