When I move camera the polygons disappear from canvas

Question

I am making isomorphic map maker (or am trying to so far) and am moving camera using the arrow keys. The problem I have is that when I go beyond the canvas range the map is cut.

It seems as it erases the parts that are not in canvas's range? I don't understand...

When I zoom out the objects are there, but when I reset the zoom the objects are not visible again.

Here is the code fragment I am using (I removed the debug mode and it is not even showing the polygons ;( ):

game.ts:

import 'phaser';

export default class Demo extends Phaser.Scene {

    private cameraMoveSpeed: number = 6;
    private tileSize: number = 64; // pixels
    private cursors: Phaser.Types.Input.Keyboard.CursorKeys;

    constructor() {
        super('demo');
    }

    preload() {
        this.load.image('grass', 'assets/grass.png');
    }

    create() {
        //  This will create a new object called "cursors", inside it will contain 4 objects: up, down, left and right.
        //  These are all Phaser.Key objects, so anything you can do with a Key object you can do with these.
        this.cursors = this.input.keyboard.createCursorKeys();
        this.cameras.main
            .setBounds(-2048, -2048, 2048 * 2, 2048 * 2, true) // TODO what should this be?
            .centerOn(0, 0)
            .setZoom(1);


        for (let i = 0; i < 20; i++) {
            for (let j = 0; j < 20; j++) {
                const x = j * this.tileSize;
                const y = i * this.tileSize;
                placetile.call(this, x, y); // Place tiles in isometric coordinates       

            }

        }

        // Zoom keys
        this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A)
            .on('down', function (key, event) {
                console.log('Plus Clicked');
                if (this.cameras.main.zoom < 2) {
                    this.cameras.main.zoom += 0.25;
                }
            }, this);


        let minusKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S)
            .on('down', function (key, event) {
                console.log('Minus Clicked');
                if (this.cameras.main.zoom > 0.25) {
                    this.cameras.main.zoom -= 0.25;
                }
            }, this);

        this.input.on('wheel', function (pointer, gameObjects, deltaX, deltaY, deltaZ) {
            if (deltaY < 0) {
                console.log('Scrolled up (rotate left)');
            } else {
                console.log('Scrolled down (rotate right)');
            }

        });
    }

    update() {
        //  For example this checks if the up or down keys are pressed and moves the camera accordingly.
        if (this.cursors.up.isDown) {
            this.cameras.main.y += this.cameraMoveSpeed;
        }
        else if (this.cursors.down.isDown) {
            this.cameras.main.y -= this.cameraMoveSpeed;
        }

        if (this.cursors.left.isDown) {
            this.cameras.main.x += this.cameraMoveSpeed;
        }
        else if (this.cursors.right.isDown) {
            this.cameras.main.x -= this.cameraMoveSpeed;
        }
    }
}

function placetile(x, y) {

    const isoPoint = cartesianToIsometric(new Phaser.Geom.Point(x, y));
    console.log(isoPoint, this.tileSize);
    const tile = this.add.polygon(isoPoint.x, isoPoint.y, [
        this.tileSize, 0,
        0, this.tileSize / 2,
        0 + this.tileSize, this.tileSize,
        0 + this.tileSize * 2, this.tileSize / 2
    ], 0xeeeeee)
        // const tile = this.add.sprite(isoPoint.x, isoPoint.y, 'grass')
        .setOrigin(0.5, 0.5)
        // .setDepth(y)
        .setInteractive(new Phaser.Geom.Polygon([
            this.tileSize, 0,
            0, this.tileSize / 2,
            0 + this.tileSize, this.tileSize,
            0 + this.tileSize * 2, this.tileSize / 2,
        ]), Phaser.Geom.Polygon.Contains)
        .on('pointerover', function (event) {
            this.setStrokeStyle(4, 0x7878ff, 0.5);
        })
        .on('pointerout', function (event) {
            this.setStrokeStyle(0);
        });

    console.log(tile);

    // this.input.enableDebug(tile, 0xff00ff);
}

const config: Phaser.Types.Core.GameConfig = {
    type: Phaser.AUTO,
    backgroundColor: '#eeeeee',
    scale: {
        width: 1280,
        height: 1024,
        parent: 'content'
        // mode: Phaser.Scale.RESIZE ????
    },
    scene: Demo,
    // physics: {
    //     default: 'arcade',
    //     arcade: {
    //         debug: true
    //     }
    // },
};

const game = new Phaser.Game(config);

function cartesianToIsometric(cartPt) {
    return new Phaser.Geom.Point(
        cartPt.x - cartPt.y,
        (cartPt.x + cartPt.y) / 2
    );
}

function isometricToCartesian(isoPt) {
    var tempPt = new Phaser.Geom.Point();
    tempPt.x = (2 * isoPt.y + isoPt.x) / 2;
    tempPt.y = (2 * isoPt.y - isoPt.x) / 2;
    return (tempPt);
}

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Phaser Demo</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    canvas {
      width: 100%;
      height: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="content"></div>
  </div>
  <script src="game.js"></script>
</body>

Answer 1

You're using this.camera.main.x and this.camera.main.y. Those properties seem as though they don't update rendering for previously offscreen textures. I linked a copy of your code that works when using this.camera.main.scrollX and this.camera.main.scrollY. Those are the correct properties to use for scrolling the camera.

Here's a link to the docs that explicitly states scrollX/scrollY as the properties to use for scrolling:

https://photonstorm.github.io/phaser3-docs/Phaser.Cameras.Scene2D.Camera.html#scrollX__anchor

Copied your code here with those changes to show working:

https://stackblitz.com/edit/phaser-camera-main-scrollx-not-x