Tilemap & Minimap

[mishelen]

Is there any way to render the tilemap layers and get the image? I just want to do a static minimap (it will not display changes in the world).

Initially, I tried to do this with a camera that looks at the game world with the ignoring of unnecessary objects. It turned out, but so-so, you need to carefully select the scale that would not be render artifacts.

At the moment, the mini-map is in another scene and accordingly it does not have access to the render of another scene, i.e. option with the camera does not work.

So I tried using the built-in renderer and its screenshot function. As I did, at the initialization stage of the map, I create an additional game instance with the world size equal to the minimap (in other words I make the game in the game) and try to make its screenshot.

At the result it comes with base64, but in my case it is invalid, and the expected size should be an order of magnitude greater. I suspect that because of the async of both the initialization of my map and the map itself in the map, this does not happen until the end.

GameInGame code:

const startMiniGame = tileMap => {
  const factor = 10;
  function preload() {
    this.load.image('tiles', tilesheet);
  }

  function create() {
    const mapData = Tilemaps.Parsers.Tiled('map', tileMap, undefined);
    this.map = new Tilemaps.Tilemap(this, mapData);
    const { widthInPixels, heightInPixels, tileHeight, tileWidth } = this.map;
    this.tiles = this.map.addTilesetImage('maptile', 'tiles', tileWidth, tileHeight, 1, 2);
    MapService.Layers.forEach(([layer]) => {
      this.map.createDynamicLayer(layer, this.tiles, 0, 0);
    });
    this.cameras.main.setBounds(0, 0, widthInPixels / factor, heightInPixels / factor);
    this.cameras.main.setZoom(factor);
  }

  return {
    type: Phaser.CANVAS,
    width: tileMap.widthInPixels / factor,
    height: tileMap.heightInPixels / factor,
    scene: {
      create,
      preload
    }
  };
};

And initialization:

// method of MapService
createMiniMapSnaphot = tileMap => {
    // there I can catch error event then. 
    // so, game.renderer.snapshot works but gives something wrong
    this.scene.sys.textures.on('onerror', (...args) => {
        console.error('onerror', ...args);
    });

    const game = new Phaser.Game(startMiniGame(tileMap));
    game.renderer.snapshot(image => {
        this.scene.sys.textures.addBase64('s', image);
    });
};

Perhaps someone who has encountered such a task or has some ideas?