Why Cannot read property 'frame' of undefined error?

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