phaserjs / phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
https://phaser.io
MIT License
37.22k stars 7.1k forks source link

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

Closed jlangsu closed 5 months ago

jlangsu commented 2 years ago

Version

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

zekeatchan commented 5 months ago

This issue will not be fixed.

We are currently focusing our efforts on developing a new renderer (that will address this issue) and the next version of PhaserJS.

Thanks for bringing this to our attention and we appreciate your understanding.