Why Cannot read property 'frame' of undefined error?

I'm studying phaser 3, got to animations, but for some reason an error occurs - Cannot read property 'frame' of undefined. I tried to find this property, but I don't even understand where it is. It seems that I am setting the frames property correctly, but an error still occurs. I tried changing the sprite sheet and I still get this error. The structure of the project itself is as follows: I threw the engine itself through a script into an html file and did the same with the file main.js and Game.js. I hope for your help (p.s. yes I googled)

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 file

<!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>

Sprite List

JavaScript Adalaide Livingston, Nov 20, 2020

0 Answers

Your Answer

To place the code, please use CodePen or similar tool. Thanks you!