Phaser3 - 无法旋转汽车且瓦片地图不完全可见

Question

我目前正在尝试将以下 Phaser2 示例 (https://phaser.io/examples/v2/tilemaps/fill-tiles) 移植到 Phaser3 中。但是，目前我遇到了两个问题：

我似乎无法旋转车辆，因为 left/right 键不起作用。

我似乎无法让 tilemap 正确显示，它似乎被切断了。

    import Phaser from "phaser";
    
    const config = {
      type: Phaser.AUTO,
      parent: "phaser-example",
      width: 800,
      height: 600,
      physics: {
        default: 'arcade'
      },
      scene: {
        preload: preload,
        create: create,
        update: update,
        render: render
      }
    };
    
    const game = new Phaser.Game(config);
    let cursors;
    let player;
    let map;
    let speed = 0;
    
    function preload() {
      this.load.tilemapTiledJSON('desert', 'desert.json');
      this.load.image('tiles', 'https://examples.phaser.io/assets/tilemaps/tiles/tmw_desert_spacing.png')
      this.load.image('car', 'http://labs.phaser.io/assets/sprites/car90.png')
    }
    
    function create() {
      map = this.make.tilemap({ key: 'desert' });
      const tiles = map.addTilesetImage('Desert', 'tiles');
      const layer = map.createDynamicLayer('Ground', tiles, 0, 0);
    
      cursors = this.input.keyboard.createCursorKeys();
      player = this.physics.add.sprite(450, 80, 'car');
    
      this.cameras.main.startFollow(player, true, 0.05, 0.05);
    }
    
    function update() {
    
      // Drive forward if cursor up key is pressed down
    
      if (cursors.up.isDown && speed <= 400) {
        speed += 10;
      } else {
        if (speed >= 10) {
          speed -= 10
        }
      }
    
      // Drive backwards if cursor down key is pressed down
    
      if (cursors.down.isDown && speed >= -200) {
        speed -= 5;
      } else {
        if (speed <= -5) {
          speed += 5
        }
      }
    
      // Steer the car
    
      if (cursors.left.isDown) {
        player.body.angularVelocity = -5 * (speed / 1000);
      } else if (cursors.right.isDown) {
        player.body.angularVelocity = 5 * (speed / 1000);
      } else {
        player.body.angularVelocity = 0;
      }
    
      player.body.velocity.x = speed * Math.cos((player.body.angle - 360) * 0.01745);
      player.body.velocity.y = speed * Math.sin((player.body.angle - 360) * 0.01745);
    }
    
    function render() {
    }

我该如何解决这个问题？

Answer 1

我在没有资产的空白项目中加载了代码，并且能够看到缺少对象的图像旋转。但是，看起来 angular 旋转中速度的依赖性太低了。如果减少用于计算 angular 速度的速度缩放比例的降低，则可以使汽车转得更快。证明 -> https://stackblitz.com/edit/phaser-2-example-so

Phaser3 - 无法旋转汽车且瓦片地图不完全可见

Phaser3 - Cannot rotate car and tilemap is not fully visible

javascript

phaser-framework