Merge images in P5.js

Question

I'm making a game on p5.js and I want to Merge the image of each component to get the background of the game, but using createGraphics doesn't work. Here is the code:

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

EDIT

After reading my code for hours I finally understand what was happening:

I have a JSON with the definitions of all the components (incluiding the URL img)
I send this JSON to a class that manage the render of componets.
I call the constructor on the preload, but the components images won't load ulless i do this:

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

The idea is after load the JSON the method createComponents load the diferent images.

Can you show how you define `this.components` and `this.boxsize`? and also how you call this method? — Jacob Stuligross, May 11 '21 at 17:59
Welcome to StackOverflow @Sonya. While it's good to reduce the code in your questions to just the essential elements, you do need to include enough of your code to make your issue reproducible (please see: https://stackoverflow.com/help/minimal-reproducible-example). For p5js you should almost always include a runnable snippet in your question: https://stackoverflow.com/questions/67410651/how-do-i-include-a-runnable-p5-js-sketch-in-a-stackoverflow-question — Paul Wheeler, May 11 '21 at 20:02
@Sonya You're calling `image()` directly which renders in the p5's default canvas: instead you want to render into your `p5.Graphics` instance: `gameImg.image(...)`. Paul's detailed example demonstrated this (+1) — George Profenza, May 11 '21 at 20:21

score 7 · Answer 1 · answered May 11 '21 at 20:00

If there is something wrong with your code it is not evident from the very minimal fraction you posted. Most likely the issue is with how you are loading the images or using the resulting p5.Graphics instance. Here is a working example where I've filled in the blanks with a simple use case:

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>

Merge images in P5.js

EDIT

1 Answers1