Particular Triangles not Rendering in Meshes & Mesh Debug Not Aligning in Camera

[jlangsu]

Version

• Phaser Version: 3.55.2

• Operating system: MacOs, Ubuntu

• Browser: Chrome, Firefox

Description

Triangles/faces of a Mesh object appear not to be rendering in specific locations at zoom value different than 1. Corresponding mesh debug doesn't appear aligned with mesh in camera view.

Example Test Code

Code Setup: https://glitch.com/edit/#!/salt-instinctive-dish
Live Demo: https://salt-instinctive-dish.glitch.me/

const Phaser = require('phaser');

class Tile {
  constructor(x, y) {
    this.vertices = [];
    this.uvs = [];
    this.x = x;
    this.y = y;
    this.setVertices();
  }

  setVertices() {
    const x = 16 * this.x - 128;
    const y = 128 - (16 * (this.y + 1));
    this.vertices = [
      x,
      y + 16,
      x,
      y,
      x + 16,
      y + 16,
      x,
      y,
      x + 16,
      y,
      x + 16,
      y + 16
    ];
    this.uvs = [0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0];
  }
}

class Chunk extends Phaser.GameObjects.Mesh {
  constructor(scene, x, y) {
    super(scene, x, y, "");
    this.x = x * 256;
    this.y = y * 256;
    this.scene.add.existing(this);
    this.panZ(256 / (2 * Math.tan(Math.PI / 16)));
    this.setOrtho(this.width, this.height);
    this.generateVertices();
    this.debug = this.scene.add.graphics();
    this.setDebug(this.debug);
  }

  update() {
    this.debug.clear();
    this.debug.lineStyle(1, 0x00ff00);
  }

  generateVertices() {
    const vertices = [];
    const uvs = [];
    for (let x = 15; x >= 0; x--) {
      for (let y = 15; y >= 0; y--) {
        const tile = new Tile(x, y)
        vertices.push(...tile.vertices);
        uvs.push(...tile.uvs);
      }
    }
    this.addVertices(vertices, uvs);
  }
}

class Game extends Phaser.Scene {
  constructor() {
    super("hello-world");
    this.meshes = [];
  }

  create() {
    this.cameras.main.setZoom(4);
    for (let i = -4; i < 4; i++) {
      for (let j = -4; j < 4; j++) {
        this.meshes.push(new Chunk(this, i, j));
      }
    }
    this.playerSprite = this.physics.add.sprite(0, 0, '');
    this.cameras.main.startFollow(this.playerSprite);
    this.controls = {};
    this.controls.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    for (const mesh of this.meshes) {
      mesh.update();
    }

    this.playerSprite.setVelocity(0);

    // horizontals
    if (!this.controls.cursors.up.isDown && !this.controls.cursors.down.isDown) {
      if (this.controls.cursors.left.isDown) {
        this.playerSprite.setVelocityX(-120);
      } else if (this.controls.cursors.right.isDown) {
        this.playerSprite.setVelocityX(120);
      }
    } else {
      if (this.controls.cursors.left.isDown) {
        this.playerSprite.setVelocityX(-120 / 1.5);
      } else if (this.controls.cursors.right.isDown) {
        this.playerSprite.setVelocityX(120 / 1.5);
      }
    }

    // verticals
    if (!this.controls.cursors.left.isDown && !this.controls.cursors.right.isDown) {
      if (this.controls.cursors.up.isDown) {
        this.playerSprite.setVelocityY(-120);
      } else if (this.controls.cursors.down.isDown) {
        this.playerSprite.setVelocityY(120);
      }
    } else {
      if (this.controls.cursors.up.isDown) {
        this.playerSprite.setVelocityY(-120 / 1.5);
      } else if (this.controls.cursors.down.isDown) {
        this.playerSprite.setVelocityY(120 / 1.5);
      }
    }
  }
}

const settings = {
  width: Math.floor(window.innerWidth),
  height: Math.floor(window.innerHeight),
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 0 }
    }
  },
  scale: {
    mode: Phaser.Scale.RESIZE,
    width: "100%",
    height: "100%"
  },
  pixelArt: true,
  roundPixels: true,
  antialias: false,
  scene: [Game]
};

const game = new Phaser.Game(settings);

Additional Information

https://cdn.discordapp.com/attachments/416623653741133837/974038652994867240/mesh-debug.gif