玩家不动 Phaser3 学习答案

【问题标题】：Player does not move Phaser3 Learn玩家不动 Phaser3 学习
【发布时间】：2022-10-04 15:55:43
【问题描述】：

我通过查看phaser3的第6页来学习，但即使我在网站上做同样的事情也会出现错误。我可以跳，但是左右控制器有错误。这是为什么？

我应该如何指定类型？我需要你们的帮助，伙计们！

未捕获的类型错误：无法读取未定义的属性（读取“持续时间”）

function App() {
  // ..
  let platforms;
  let player: any;
  let cursors: any;

  function preload(this:any){
    // ..
    this.load.image('dude', 'src/assets/dude.png', {frameWidth: 32, frameHeight: 48});
  }

  function create(this:any){
    this.add.image(400,300,'sky');
    this.add.image(0,0, 'star').setOrigin(0, 0);

    platforms = this.physics.add.staticGroup();;
    platforms.create(400,568, 'plane').setScale(2).refreshBody();
    // ..

    player = this.physics.add.sprite(100, 450, 'dude')

    player.setBounce(0.2);
    player.setCollideWorldBounds(true);

    this.anims.create({
      key: 'left',
      frames:this.anims.generateFrameNumbers('dude', {start:0, end:3}),
      frameRate: 10,
      repeat: -1
    });

    this.anims.create({
      key: 'turn',
      frames:[{key: 'dude', frame:4}],
      frameRate: 20
    });

    this.anims.create({
      key: 'right',
      frames:this.anims.generateFrameNumbers('dude', {start:5, end:8}),
      frameRate: 10,
      repeat: -1
    });

    this.physics.add.collider(player, platforms);
    
    cursors = this.input.keyboard.createCursorKeys();
    console.log(cursors)
  }

  function update(){
    if(cursors.left.isDown) {
      player.setVelocityX(-160);
      player.anims.play('left', true);
    } else if(cursors.right.isDown){
      player.setVelocityX(160);
      player.anims.play('right', true);
    } else {
      player.setVelocityX(0);
      player.anims.play('turn');
    }
    if(cursors.up.isDown && player.body.touching.down){
      player.setVelocityY(-330);
    }
  }

// ..

【问题讨论】：

标签： typescript phaser-framework

【解决方案1】：

由于代码似乎是正确的，因此问题可能大概是因为图片的frameWidth 和/或frameHeight 可能太大了（意思是：大于实际图像尺寸，即使相差 1px就足够了，导致错误）.这可能会产生如下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'duration') ...

但它仍然会显示图像。只需检查图像的尺寸（preload 函数中加载的那个）, 是 frameWidth 和 frameHeight 的倍数。

基于这个较旧的答案(https://stackoverflow.com/a/72067212/1679286)

【讨论】：