Почему ошибка Cannot read property 'frame' of undefined?

Question

Vyacheslav1410 @Vyacheslav1410

Почему ошибка Cannot read property 'frame' of undefined?

Изучаю phaser 3, дошел до анимаций но почему-то возникает ошибка - Cannot read property 'frame' of undefined. Я пытался найти это свойство, но я даже не понимаю где оно. Вроде бы я правильно задаю свойство frames, но все равно вознкает ошибка. Я пробовал поменять спрайт-лист, и все равно появляется данная ошибка. Сама структура проекта такова: я закинул сам движок через script в html-файл и таким же образом поступил с файлом main.js и Game.js. Надеюсь на вашу помощь( p.s. да я гуглил)

let platforms;
let keyz;
let speed = 80;
Структура файла Game.js
class Game extends Phaser.Scene {
    constructor(){
        super('game')
    }
    // init(){

    // }
    preload(){
        this.load.image('bg', 'Assets/bg.png');
        this.load.image('platform-3', 'Assets/platform-3.png');
        this.load.image('platform-4', 'Assets/platform-4.png');
        this.load.image('player', 'Assets/player-3.png', {
            frameWidth: 70,
            frameHeight: 80,
        });
        
        
    }
    create(){
        this.bg = this.add.sprite(0,0, 'bg'); 
        this.bg.setOrigin(0,0)
        
        platforms = this.physics.add.staticGroup();
        platforms.create(750,620, 'platform-4')
        platforms.create(1250, 560, 'platform-4')
        

        platforms.create(195,640, 'platform-3') // start platform
       

  
        this.player = this.physics.add.sprite(50,610, 'player',)
        this.player.setBounce(0.1);
        this.player.setCollideWorldBounds(true);
        this.player.setGravityY(300)
        this.physics.add.collider(this.player,platforms);
        

        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNames('player', { start: 1, end: 5 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('player', { start: 3, end: 5}),
            frameRate: 10,
        });
        console.log( this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('player', { start: 3, end: 5}),
            frameRate: 10,
        }))
    
        

       
       
        

      
    }
    update(){
        keyz = this.input.keyboard.addKeys('W,A,D')
         if (keyz.D.isDown){ 
     
            this.player.setVelocityX(speed);
    
            this.player.anims.play('right',true)
    }
    else if(keyz.A.isDown){
        this.player.setVelocityX(-speed);
 
        this.player.anims.play('left',true)

    }
    else{

        this.player.setVelocityX(0)
    }

    }
}

Main.js

let game =  new Phaser.Game({
  type: Phaser.AUTO,
  width: 1280,
  height: 620,
  scene: Game,
  physics: {
    default: 'arcade',
    arcade: {
      debug: false
    }}
})

Html-файл

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mini-warrior</title>
</head>
<body>
    <style>
    body{
        margin-left: 0%;
        margin-top: 1px;
    }
    </style>
    <script  src="phaser.js"></script>
    <script  src="Game.js"></script>
    <script  src="main.js"></script>

</body>
</html>

Спрайт-лист