移动时切比雪夫距离 x 坐标错误

所以我正在复制移相器切比雪夫距离示例，并在解决方案之后here https://stackoverflow.com/questions/75478712/this-gamestate-variable-not-recognized-phaser-js我遇到错误Cannot read properties of null (reading 'x') for origin.x,

奇怪的是，这种情况发生在我从x=0

code

import Phaser from "../lib/phaser.js";

export default class Game extends Phaser.Scene {
  constructor() {
    super("game1");
  }

  preload() {
    this.load.image(
      "Tileset",
      "https://cdn.glitch.global/cc90578e-c3d0-47c5-bb0d-f5a81263b5b6/pixil-frame-0%20(17).png?v=1675985219390"
    );
    this.load.tilemapTiledJSON(
      "map",
      "https://cdn.glitch.global/cc90578e-c3d0-47c5-bb0d-f5a81263b5b6/Map.tmj?v=1675985261369"
    );
    this.load.spritesheet(
      "player",
      "https://cdn.glitch.global/cc90578e-c3d0-47c5-bb0d-f5a81263b5b6/pixil-frame-0%20(13).png?v=1675904194091",
      { frameWidth: 32, frameHeight: 32 }
    );
  }

  create() {
    this.gameState = {
      map: "",
      cursors: "",
    };

    this.gameState.map = this.make.tilemap({ key: "map" });
    this.tiles = this.gameState.map.addTilesetImage("tileSet", "Tileset");
    this.worldLayer = this.gameState.map.createLayer(
      "Block Layer",
      this.tiles,
      0,
      0
    );

    this.player = this.physics.add.sprite(0, 1600, "player", 1);

    this.cameras.main.setBounds(
      0,
      0,
      this.gameState.map.widthInPixels,
      this.gameState.map.heightInPixels
    );
    this.cameras.main.startFollow(this.player);

    this.gameState.cursors = this.input.keyboard.createCursorKeys();
    this.physics.add.collider(this.player, this.worldLayer);
  }

  update() {
    if (this.gameState.cursors.left.isDown) {
      this.player.setVelocityX(-50);
    } else if (this.gameState.cursors.right.isDown) {
      this.player.setVelocityX(50);
    } else if (this.gameState.cursors.up.isDown) {
      this.player.setVelocityY(-50);
    } else if (this.gameState.cursors.down.isDown) {
      this.player.setVelocityY(-50);
    } else {
      this.player.setVelocityX(0);
    }

    this.updateMap();
  }
  
  updateMap() {
  console.log(this.gameState);
  var origin = this.gameState.map.getTileAtWorldXY(
    this.player.x,
    this.player.y
  );
  this.gameState.map.forEachTile(function (tile) {
    var dist = Phaser.Math.Distance.Chebyshev(
      origin.x,
      origin.y,
      tile.x,
      tile.y
    );

    tile.setAlpha(1 - 0.1 * dist);
  }, this);
}
}

由于您以物理速度移动玩家，因此玩家可能位于地图之外，或者在没有瓷砖的位置.

When map.getTileAtWorldXY被调用时位置在地图之外（或其他一些无效位置），或者图层上该位置没有放置图块，该函数将返回null，这可能就是您收到此特定错误的原因。
(文档链接 https://newdocs.phaser.io/docs/3.54.0/focus/Phaser.Tilemaps.Tilemap-getTileAtWorldXY)

简单的解决方案就是退出该函数，当origin equals null。像这样：

 updateMap() {
      
    var origin = this.gameState.map.getTileAtWorldXY(
        this.player.x,
        this.player.y
    );

   if(!origin){
       return;
   }
   ...
}

或者你可以有一个像这样的变量：this.gameState.lastValidPosition，当玩家具有有效位置时设置，并使用此变量，以防出现错误

 updateMap() {
      
    var origin = this.gameState.map.getTileAtWorldXY(
        this.player.x,
        this.player.y
    );

   if(!origin && !this.gameState.lastValidPosition ){
       // origin is invalid and we have no valid last position
       return;
   } else if( !origin ) { // origin is null, w use the last valid position
       origin = this.gameState.lastValidPosition;
   } else { // origin is not null, so we save this position
      this.gameState.lastValidPosition = origin;
   }
   ...
}

两种解决方案都会产生exact相同的结果（对于大多数用例）。哪个操作系统将光源保持在最后一个已知/有效的位置。

Update:
更简单的解决方案可能是使用第三个参数nonnull，函数的map.getTileAtWorldXY （如果问题是缺少瓷砖），这将返回一个带有索引的图块-1代替null.

like:

    var origin = this.gameState.map.getTileAtWorldXY(
        this.player.x,
        this.player.y, 
        true
    );