Sign in to follow this  

Tilemap & Minimap

Recommended Posts

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); = new Tilemaps.Tilemap(this, mapData);
    const { widthInPixels, heightInPixels, tileHeight, tileWidth } =;
    this.tiles ='maptile', 'tiles', tileWidth, tileHeight, 1, 2);
    MapService.Layers.forEach(([layer]) => {, this.tiles, 0, 0);
    this.cameras.main.setBounds(0, 0, widthInPixels / factor, heightInPixels / factor);

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

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?

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.