What the best way to scale tiles quality on zoom in?

Phaser 3
1

Hi. I have a map created with tiles, all tiles are currently in PNG format, the problem is that when zoomed in enough the image quality is lost, and the image contains details that need to be visible. What method of solving this problem could you suggest saving the webgl rendering method?

this is my simple code to draw chunks:

  drawChunks() {
    const level = [
      [0, 1, 2, 3, 4, 5, 6, 7],
      [8, 9, 10, 11, 12, 13, 14, 15],
      [16, 17, 18, 19, 20, 21, 22, 23],
      [24, 25, 26, 27, 28, 29, 30, 31],
      [32, 33, 34, 35, 36, 37, 38, 39],
      [40, 41, 42, 43, 44, 45, 46, 47],
      [48, 49, 50, 51, 52, 53, 54, 55],
      [56, 57, 58, 59, 60, 61, 62, 63]
    ];

    const map = this.make.tilemap({
      data: level,
      tileWidth: CHUNK_WIDTH,
      tileHeight: CHUNK_HEIGHT
    });
    const tiles = map.addTilesetImage('background');

    if (!tiles) return;

    map.createLayer(0, tiles, 0, 0);

    const rectangle = this.add
      .rectangle(0, 0, this.imageWidth, this.imageHeight, CROPPED_IMAGE_VALUE, 0xff0000)
      .setOrigin(0);

    const button = new Button(rectangle);

    button
      .on('click', () => {
        EventBus.emit(eventBusNames.promoMissClicked);
        this.sound.play(eventBusNames.promoMissClicked);
      })
      .setClickInterval(DEFAULT_CLICK_INTERVAL)
      .setDragThreshold(DEFAULT_DRAG_THRESHOLD);
  }
2

You can try pixelArt: true in the game config to avoid antialiasing.

3

I already have this setting, in any case it does not solve the problem of quality deterioration when zooming in on raster images.
The question is probably more about replacing the tiles resolution when zooming
Or another solution with svg, but any addition of svg with a size of 8kx8k makes my game lag

4

SVG images are rasterized when a texture is created, then they’re rendered like any other WebGL texture. To get more detail, use the svgConfig argument in load.svg().

5

yes, i know this, but if i try to load big svg (8000x8000) via this.load.svg my game is lags and loading to long, also this work only in canvas rendering, but i need webgl, cuz i want to use mipmap filters

6

You could maybe load higher-resolution tiles on demand, but you could still get performance problems eventually.

Another way would be to use SVG images in DOMElement Game Objects.

7

i tried upload 16k16 for better resolution, its work fine on desktop, but on ios safari this just crashed