Need help. Spritesheet animation not working!

[Jedi Knight]

hi. javascript and phaser noobie here. 

 

im building a game similar to the invaders example on the phaser website but i cant seem to get the explosion spritesheet im using to play the proper animation i want it to 

instead when i shoot an asteroid i get the entire sprite sheet spanned across the screen. also even though ive set 'loop' to false in the animation settings the explosion remains on the screen and after ive used all the explosions in the group the game crashes...

 

ill give you the entire code for the game. its crap anyway but hey we all gotta start somewhere right?

 

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render});

function preload() {

    game.load.image('tileset', 'assets/tileset.png');
    game.load.image('laser', 'assets/laser.png')
    game.load.image('player', 'assets/player1.png');
    game.load.atlasJSONArray('asteroid', 'assets/asteroids.png', 'assets/asteroid.json');
    game.load.atlasJSONArray('explosion', 'assets/explosion.png', 'assets/explosion.json', 100, 100);

}

//variables here
var player;
var asteroids;
var tileSet;
var lasers;
var bulletTime = 0;
var cursor;
var fireButton;
var explosions;

function create() {
    tileSet = game.add.tileSprite(0, 0, 800, 600, 'tileset');
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.renderer.renderSession.roundPixels = true;
    
    //player
    player = game.add.sprite(game.width/2, game.height,'player'); 
    player.anchor.setTo(0.5, 0.5);
    game.physics.enable(player, Phaser.Physics.ARCADE);
    player.body.collideWorldBounds = true;

    //asteroids
    asteroids = game.add.group();
    asteroids.enableBody = true;
    game.physics.arcade.enable(asteroids);
    asteroids.createMultiple(40, 'asteroid', 'asteroid');
    game.time.events.loop(100, addAsteroid, this);

    //pewpews
    lasers = game.add.group();
    lasers.enableBody = true;
    game.physics.arcade.enable(lasers);
    lasers.createMultiple(5, 'laser');

    //explosion
    explosions = game.add.group();
    explosions.createMultiple(10, 'explosion');

    //controls
    fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
    cursor = game.input.keyboard.createCursorKeys();
}

function update() {
    //scroll map
    tileSet.tilePosition.y += 7;

    //if alive
    if(player.alive) {

        //movement
        if (cursor.left.isDown) {
        player.body.velocity.x = -500;
        }

        else if (cursor.right.isDown) {
        player.body.velocity.x = 500;
        }

        else {
        player.body.velocity.x = 0;
        }
    
        if (cursor.up.isDown) {
        player.body.velocity.y = -320;
        }

        else if(cursor.down.isDown) {
        player.body.velocity.y = 320;
        }

        else {
        player.body.velocity.y = 0;
        }

        //firing button
        if(fireButton.isDown) {
        fireBullet();
        }

    }

    

    //debugging
   //game.debug.body(player);
   //game.debug.body(lasers);
   //game.debug.body(asteroids);

   //collisions
   game.physics.arcade.overlap(lasers, asteroids, asteroidVsLaser, null, this);
   //game.physics.arcade.overlap(asteroids, player, playerDie, null, this);

}

//debugging
function render() {
    //asteroids.forEachAlive(renderGroup, this);
    //lasers.forEachAlive(renderGroup, this);
}

//function renderGroup(laser) { 
    //game.debug.body(laser); 
//}

//add asteroids
function addAsteroid() {
    var asteroid = asteroids.getFirstDead();

    if (!asteroid) {
        return;
    }
        
    //set x values for asteroid to random number (0, 1500)
    asteroid.reset(game.rnd.integerInRange(0, game.width), -50);
    asteroid.animations.add('tumble', [0, 1, 2, 3, 4, 5, 6], 5, true);
    asteroid.animations.play('tumble');
    asteroid.body.setSize(30, 30, 20, 20);
    asteroid.body.gravity.y = 150;
    asteroid.checkWorldBounds = true;
    asteroid.outOfBoundsKill = true;

}

function setUpAsteroid(asteroid) {
    asteroid.anchor.x = 0.5;
    asteroid.anchor.y = 0.5;
    asteroid.animations.add('boom');
}

function fireBullet() {
    if(game.time.now > bulletTime && lasers.countDead() > 0) {
        var laser = lasers.getFirstDead();
        laser.reset(player.x, player.y - 10);
        laser.anchor.setTo(0.5, 0.5);
        laser.body.velocity.y = -500;
        laser.checkWorldBounds = true;
        laser.outOfBoundsKill = true;
        bulletTime = game.time.now + 300;
    }
}

function asteroidVsLaser(laser, asteroid) {
    var explosion = explosions.getFirstDead();
    explosion.reset(asteroid.x, asteroid.y);
    explosion.animations.add('boom', [0, 1, 2, 3, 4, 5], 5, false)
    explosion.animations.play('boom');

    laser.kill();
    asteroid.kill();
    
}

function playerDie(player, asteroid) {
    //player.kill();
    //asteroid.kill();
    //explosion.reset(player.x, player.y);

}

 

 

thanks for any help in advance and may the force be with you

[Jedi Knight]

just noticed i wasnt using the 'setUpAsteroid' function but when I try to use it like in the invader example from phaser's website it still does the same thing. spanning the spritesheet across the screen instead of playing an animation. lol 

[Jedi Knight]

bump

[Jedi Knight]

bumpy

 

anyone out there? 

[Milton]

game.load.atlasJSONArray('explosion', 'assets/explosion.png', 'assets/explosion.json', 100, 100);

What does the 100,100 do? (And is it an Array or a Hash?)

[Jedi Knight]

i think before i turned the asset into an atlas it was defining the sprites sheet size and its an array 

[drhayes]

Can you post the explosion.json file somewhere?