精灵位置根据画布大小而变化

Question

我的游戏具有基于用户屏幕尺寸的动态宽度和高度。我在地图上的不同位置设置精灵。问题是精灵位置将根据用户屏幕尺寸而关闭。所以在我的屏幕上没问题，但如果我切换到不同的屏幕，精灵位置将会偏离几个像素。我怎样才能使无论屏幕大小如何，精灵位置始终位于同一位置。以下是我的配置

    const parentContainer = document.getElementById("feed-container");
    const canvasWidth = parentContainer.clientWidth;
    const canvasHeight = parentContainer.clientHeight;
    const config: Phaser.Types.Core.GameConfig = {
      type: Phaser.AUTO,
      width: canvasWidth,
      height: canvasHeight,
      // render: {
      //   pixelArt: true,
      //   antialias: true,
      // },
      parent: "phaser-container",
      physics: {
        default: "arcade",
        arcade: {
          gravity: { x: 0, y: 0 },
          fixedStep: false,
        },
      },
      scene: { preload: preload, create: create, update: update },
    };

我当前如何定位精灵的示例

      let tree = this.physics.add
          .sprite(500, 300, "tree")
          .setScale(0.5);

Answer 1

如果你的意思是相对于屏幕，你应该使用下面的代码

this.iw = window.innerWidth;
this.ih = window.innerHeight;

然后使用此代码

      let tree = this.physics.add
          .sprite(500*this.iw, 300*this.ih, "tree")
          .setScale(0.5*(this.iw/this.ih));