Phaser.JS Spritesheet Animation not working

Issue

This isn't creating a Phaser.js animation and cycling through it one the 'wind' spritesheet. The wind spritesheet is 8 wide and 1 tall, and each sprite is 32x32 pixels. All variables not defined in this snippet are all found in a different file. All files are imported correctly, along with Phaser.JS. Another issue with the wind sprite sheet is when placing it using mapData, it loads the entire spritesheet to the screen, not cycling through each frame of it.

// Initialize Phaser game
const game = new Phaser.Game(800, 576, Phaser.AUTO, 'game-container', {
    //25x18 grid for objects, assuming they are 32x32
    preload: preload,
    create: create,
    update: update,
});

// Preload game assets
function preload() {
    game.load.image('player', 'assets/player.png');
    game.load.image('wall', 'assets/wall.png');
    game.load.image('wallend', 'assets/wallend.png');
    game.load.image('box', 'assets/box.png');
    game.load.image('sign', 'assets/sign.png');
    game.load.image('interaction', 'assets/interaction.png');
    game.load.spritesheet('wind', 'assets/wind.png', { frameWidth: 32, frameHeight: 32 })
}

// Create game objects
function create() {

    // Enable arcade physics
    game.physics.startSystem(Phaser.Physics.ARCADE);
    map = game.add.group();
    map.enableBody = true;
    boxes = game.add.group();
    boxes.enableBody = true;
    signs = game.add.group();
    signs.enableBody = true;
    wind = game.add.group()
    wind.enableBody = true;
    dialogueBox = game.add.graphics(0, 0);
    dialogueBox.lineStyle(5, 0xffd700, 1);
    dialogueBox.beginFill(0x000000); // Set the fill color to gold
    dialogueBox.drawRect(75, 375, 650, 150);
    dialogueBox.endFill(); // End the fill
    dialogueBox.visible = false;
    dialogueSpeaker = this.add.text(100, 385, 'null', {
        fontSize: 15,
        color: '#FFFF00',
        fill: '#FFFF00',
        fontFamily: 'main',
    });
    dialogueText = this.add.text(110, 410, 'null', {
        fontSize: 22,
        color: '#FFFFFF',
        fill: '#FFFFFF',
        fontFamily: 'main',
        wordWrap: true,
        wordWrapWidth: 625,
    });
    dialogueText.visible = false;
    dialogueSpeaker.visible = false;
    for (let row = 0; row < mapData.length; row++) {
        for (let col = 0; col < mapData[row].length; col++) {
            if (mapData[row][col] === -1) {
                const wallend = map.create(col * 32, row * 32, 'wallend');
                wallend.body.immovable = true;
                wallend.body.setSize(32, 16, 0, 8); //let player tuck under objects
            } else if (mapData[row][col] === 1) {
                const wall = map.create(col * 32, row * 32, 'wall');
                wall.body.immovable = true;
            } else if (mapData[row][col] === 2) {
                const winds = wind.create(col *32, row * 32, 'wind')
            }
        }
    }
    for (let row = 0; row < mapObject.length; row++) {
        for (let col = 0; col < mapObject[row].length; col++) {
            if (mapObject[row][col] === -1) {
                player = game.add.sprite(col * 32, row * 32, 'player');
            } else if (mapObject[row][col] === 2) {
                const box = boxes.create(col * 32, row * 32, 'box');
            } else if (
                typeof mapObject[row][col] === 'string' &&
                mapObject[row][col].startsWith('3')
            ) {
                const sign = signs.create(col * 32, row * 32, 'sign');
                sign.id = mapObject[row][col];
                sign.body.setSize(32, 20, 0, 36);
            }
        }
    }
    game.physics.arcade.enable(player);
    player.body.collideWorldBounds = true;
    // Create player

    // Set up keyboard input
    cursors = game.input.keyboard.createCursorKeys();

    // Set camera to follow player
    game.camera.follow(player);
    interaction = game.add.sprite(20, 20, 'interaction');
    interaction.visible = false;
    interaction.scale.setTo(0.75, 0.75);
  this.anims.create({
    key: 'windAnimation',
    frames: this.anims.generateFrameNumbers('wind', { start: 0, end: 7 }),
    frameRate: 10,
    repeat: -1
  });

  // Play wind animation for each wind sprite
  wind.children.iterate(function (child) {
    child.anims.play('windAnimation');
  });
}

directionArray = ['down'];
// Update game state
function update() {
    // Player movement
    player.body.velocity.x = 0;
    player.body.velocity.y = 0;
    if (!player.positionLocked) {
        if (game.input.keyboard.isDown(Phaser.Keyboard.A)) {
            player.body.velocity.x = -150;
            directionArray.push('left');
            game.input.keyboard.event.preventDefault();
            directionArray = directionArray.filter((element) => element !== 'right');
        } else {
            directionArray = directionArray.filter((element) => element !== 'left');
        }
        if (game.input.keyboard.isDown(Phaser.Keyboard.D)) {
            player.body.velocity.x = 150;
            directionArray.push('right');
            game.input.keyboard.event.preventDefault();
            directionArray = directionArray.filter((element) => element !== 'left');
        } else {
            directionArray = directionArray.filter((element) => element !== 'right');
        }
        if (game.input.keyboard.isDown(Phaser.Keyboard.W)) {
            player.body.velocity.y = -150;
            directionArray.push('up');
            game.input.keyboard.event.preventDefault();
            directionArray = directionArray.filter((element) => element !== 'down');
        } else {
            directionArray = directionArray.filter((element) => element !== 'up');
        }
        if (game.input.keyboard.isDown(Phaser.Keyboard.S)) {
            player.body.velocity.y = 150;
            directionArray.push('down');
            game.input.keyboard.event.preventDefault();
            directionArray = directionArray.filter((element) => element !== 'up');
        } else {
            directionArray = directionArray.filter((element) => element !== 'down');
        }
    }
    player.direction = directionArray[0];
    // Collision detection
    game.physics.arcade.collide(player, map);
    game.physics.arcade.collide(player, boxes);
    game.physics.arcade.collide(boxes, map);
    game.physics.arcade.collide(boxes, boxes);

    game.input.keyboard.onDownCallback = null;
    // Push box when player collides with it
    interaction.visible = false;
    game.physics.arcade.overlap(player, boxes, pushBox, null, this);
    game.physics.arcade.overlap(player, signs, pushSign, null, this);     

}

var speechIndex = 1;
function pushSign(player, sign) {
    interaction.x = player.x + 4.5;
    interaction.y = player.y - 25;
    if (player.inSign) {
        interaction.visible = false;
    } else {
        interaction.visible = true;
    }
    var id = sign.id;
    id = id.split(' ');
    id = parseInt(id[1]);
    dialogueSpeaker.text = speech[id][0];
    dialogueText.text = speech[id][speechIndex];

    game.input.keyboard.onDownCallback = function (event) {
        if (event.keyCode === Phaser.Keyboard.E) {
            if (player.inSign && speechIndex >= speech[id].length - 1) {
                player.inSign = false;
                dialogueBox.visible = false;
                dialogueText.visible = false;
                dialogueSpeaker.visible = false;
                player.positionLocked = false;
                speechIndex = 1;
            } else {
                player.inSign = true;
                dialogueBox.visible = true;
                dialogueSpeaker.visible = true;
                dialogueText.visible = true;
                player.positionLocked = true;
                dialogueText.text = speech[id][speechIndex];
                speechIndex++;
            }
        }
    };
}
// Push box function
function pushBox(player, box) {
    if (cursors.left.isDown) {
        box.body.velocity.x = -pushSpeed;
    } else if (cursors.right.isDown) {
        box.body.velocity.x = pushSpeed;
    } else if (cursors.up.isDown) {
        box.body.velocity.y = -pushSpeed;
    } else if (cursors.down.isDown) {
        box.body.velocity.y = pushSpeed;
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Simple 2D Top-Down Game</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div style="font-family:main; position: absolute; left:-1000px; visibility:hidden;">.</div>
        <p id="test">
            
        </p>
        <div id="game-container"></div>
        <script src="speech.js"></script>
        <!-- Holds the game speech -->
        <script src="maps.js"></script>
        <!-- Holds the game maps -->
        <script src="flags.js"></script>
        <!-- Holds the variables and flags for the game -->
        <script src="script.js"></script>
        <!-- Main script -->
    </body>
</html>

Solution

The issue is that your are mixing phaserCE with phaser3 syntax, one instance I noticed is in this line:

game.load.spritesheet('wind', 'assets/wind.png', { frameWidth: 32, frameHeight: 32 })

The correct syntax would be (link to the documentation)

 game.load.spritesheet('wind', 'assets/wind.png', 32, 32 )

The dimensions, have to be passed as a integer parameters, not as an object.

Side Note: If you are at the beginning of your project, I would recommend switching to Phaser 3, since it has more features, most examples are base on version 3 and there is also better/more documentation.

Answered By - winner_joiner