似乎 `setVelocityX` 不同意击键。我错过了什么吗？

Question

我正在学习 Phaser3 tutorial。

这是我从教程中移植的代码。

class BootScene extends Phaser.Scene {
  constructor() {
    super({
      key: 'BootScene'
    });
  }

  preload() {
        // map tiles
        this.load.image('tiles', 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/map/spritesheet.png');
        
        // map in json format
        this.load.tilemapTiledJSON('map', 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/map/map.json');
        
        // our two characters
        this.load.spritesheet('player', 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/RPG_assets.png', { frameWidth: 16, frameHeight: 16 });
  }

  create() {
    this.scene.start('WorldScene');
  }
}

class WorldScene extends Phaser.Scene {
  constructor() {
    super({
      key: 'WorldScene'
    });
  }

  create() {
    // create your world here
    var map = this.make.tilemap({ key: 'map' });
    // creates a tileset image
    var tiles = map.addTilesetImage('spritesheet', 'tiles');
    var grass = map.createLayer('Grass', tiles, 0, 0);
    var obstacles = map.createLayer('Obstacles', tiles, 0, 0);
    obstacles.setCollisionByExclusion([-1]);
    this.player = this.physics.add.sprite(25, 25, 'player', 6);
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update(time, delta) {
    this.player.body.setVelocity(0);
    // Horizontal movement
    if (this.cursors.left.isDown) {
      this.player.body.setVelocityX(-80);
    }
    else if (this.cursors.right.isDown) {
      this.player.body.setVelocityX(80);
    }
    // Vertical movement
    if (this.cursors.up.isDown) {
      this.player.body.setVelocityY(-80);
    }
    else if (this.cursors.down.isDown) {
      this.player.body.setVelocityY(80);
    }
  }
}

var bootScene = new BootScene();
var worldScene = new WorldScene();

var config = {
  type: Phaser.AUTO,
  parent: 'content',
  width: 320,
  height: 240,
  zoom: 2,
  pixelArt: true,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 }
    }
  },
  scene: [
    BootScene,
    WorldScene
  ]
};
var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

我对 setVelocityX 方法感到困惑。根据 doc，方法设置

the velocity, in pixels per second.

为了检查这一点，我将播放器移到了树的左侧

然后快速点击向右箭头键。将播放器从左侧移动到右侧需要大约 4 次点击。

我想我用作参考的树可以算作一个瓦片，每个 map.json 的宽度为 16。因此，一次击键代表大约 3~4 个像素，而代码

this.player.body.setVelocityX(-80);

设置速度为每秒 80 像素。

似乎setVelocityX不同意击键。我错过了什么吗？

PS：我确实按住了按键整整1秒，但播放器也没有移动80像素。

Answer 1

好吧，如果你只是点击，它不会整整一秒移动。按下键的时间（可以是几毫秒）。

而且还取决于update函数的更新率，并不总是恒定的。 （可以看到通过参数delta传递给update函数，update(time, delta)）这里的link to the documentation

If you want to test it, just hold the key for 1 second. btw.: drag and acceleration can come also into play, if set.

已编辑，以便在 1 秒后记录位置：
结果会因电脑而异，但对我来说是80px左右

class BootScene extends Phaser.Scene {
  constructor() {
    super({
      key: 'BootScene'
    });
  }

  preload() {
        // map tiles
        this.load.image('tiles', 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/map/spritesheet.png');
        
        // map in json format
        this.load.tilemapTiledJSON('map', 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/map/map.json');
        
        // our two characters
        this.load.spritesheet('player', 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/RPG_assets.png', { frameWidth: 16, frameHeight: 16 });
  }

  create() {
    this.scene.start('WorldScene');
  }
}

class WorldScene extends Phaser.Scene {
  constructor() {
    super({
      key: 'WorldScene'
    });
  }

  create() {
    // create your world here
    var map = this.make.tilemap({ key: 'map' });
    // creates a tileset image
    var tiles = map.addTilesetImage('spritesheet', 'tiles');
    var grass = map.createLayer('Grass', tiles, 0, 0);
    var obstacles = map.createLayer('Obstacles', tiles, 0, 0);
    obstacles.setCollisionByExclusion([-1]);
    this.player = this.physics.add.sprite(25, 25, 'player', 6);
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update(time, delta) {
    this.player.body.setVelocity(0);
   
    // Horizontal movement
    if (this.cursors.left.isDown) {
      this.player.body.setVelocityX(-80);
      if(!this._press){
       this.start = (new Date()).getTime();
       this.startX = this.player.body.x; 
        this._press = true;
       setTimeout(()=>{
        console.info(`Started at x-Position: ${this.startX} -> Ended at x-Position: ${this.player.body.x} = distance: ${ Math.abs(this.player.body.x - this.startX) }`);
       }, 1000)
       }
    }
    else if (this.cursors.right.isDown) {
      this.player.body.setVelocityX(80);
    }
    // Vertical movement
    if (this.cursors.up.isDown) {
      this.player.body.setVelocityY(-80);
    }
    else if (this.cursors.down.isDown) {
      this.player.body.setVelocityY(80);
    }
  }
}

var bootScene = new BootScene();
var worldScene = new WorldScene();

var config = {
  type: Phaser.AUTO,
  parent: 'content',
  width: 320,
  height: 240,
  zoom: 2,
  pixelArt: true,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 }
    }
  },
  scene: [
    BootScene,
    WorldScene
  ]
};
var game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

My result was: Started at x-Position: 135.66666666666652 -> Ended at x-Position: 55.66666666666669 = distance: 79.99999999999983