0

I've tried making a spritesheet move for a while now and tried various ways that are in the easeljs documentation. I still can't get the bloody thing to work though. So i was hoping some of you could take a look at it.

The spritesheet i'm using is 160x40 where 1 sprite is 40x40.

Here's my enemy function which should have the animation: (line 25-ish is the creation. In the move function is the gotoandplay)

var enemyWidth = 40;
var enemyHeight = 40;
function Enemy(number) {
    this.number = number;
    this.id = 'enemy';
    var randomStartLoc = new locationOutsidePlayfield();

    enemyLoc = new locationOutsidePlayfield();
    this.x = randomStartLoc.x;
    this.y = randomStartLoc.y;

    this.health = 100;

    //The damage a collision the enemy with a player does
    this.damage = 30;

    var target = new Target(this.x, this.y);
    this.velX = target.velX;
    this.velY = target.velY;

    this.hitScore = 25;
    this.killScore = this.hitScore*2;


    var spriteSheet = new createjs.SpriteSheet({
        images: ["resources/sprites/enemy_spritesheet.png"], 
        frames: {width:40, height:40},
        animations: {
            walk: [0, 3]
        }
    });

    this.sprite = new createjs.BitmapAnimation(spriteSheet);
    this.sprite.currentFrame = 0;

    this.sprite = new createjs.BitmapAnimation(spriteSheet);

    this.sprite.x = this.x;
    this.sprite.y = this.y;
    this.sprite.width = enemyWidth;
    this.sprite.height = enemyHeight;


    this.collide = function(arrayIndex, bullet) {
        if (bullet) {
            this.health -= player.damage;
        }

        if (this.health <= 0) {
            //Generate a number between 0 and 10. If it's 1(10% chance) a powerup will be made on the spot of the death.
            var percentage = Math.round(getRandomNumber(0, 10));

            //If the percentage is one and there are no powerUps on the stage it's okay to add a powerup.
            if (percentage < 6 && powerUp.length == 0) {
                var pwrp = new Powerup(this.x, this.y);
                powerUp.push(pwrp);
                if (!powerUpLayer) {
                    powerUpLayer = new createjs.Container();
                    stage.addChild(powerUpLayer);
                }
            }

            //Increase the score
            score.increaseScore(this.killScore);

            //Delete the object
            delete this;

            //Remove the sprite
            enemyLayer.removeChild(this.sprite);

            //Remove the enemy and the bullets from their array
            enemies.splice(arrayIndex, 1);
            for (var i in this.bullets) {
                ammoLayer.removeChild(this.bullets[i].sprite);
                delete this.bullets[i];
            }
            this.bullets = [];
        } else {
            //If the enemy didnt die, update the score with the hit score.
            score.increaseScore(this.hitScore);
        }

        countEnemies();
    }

    this.draw = function() {
        //enemyLayer.draw();
    }

    this.move = function() {
        this.sprite.gotoAndPlay("walk");  
        //Set a boolean that will check later on if the enemy should change direction. Therefore getting a new X an Y.
        var directionChange = false;
        this.x += this.velX;
        this.y += this.velY;

        this.sprite.x = this.x;
        this.sprite.y = this.y;

        if (this.y <= -150) {
            directionChange = true;
        }

        if (this.y >= (stage.canvas.height-this.sprite.height)+150) {
            directionChange = true;
        }

        if (this.x <= -150) {
            directionChange = true;
        }

        if (this.x >= (stage.canvas.width-this.sprite.width)+150) {
            directionChange = true;
        }

        if (directionChange == true) {
            var target = new Target(this.x, this.y);
            this.velX = target.velX;
            this.velY = target.velY;
        }
    }

    this.flickr = function() {
        this.sprite.alpha = 0.5;
        var enem = this.sprite;
        setTimeout(function() {
            enem.alpha = 1;
        }, 100);
    }

    this.bullets = [];
} 

As request the enemy creation function. (p.s the stage is updated in the ticker, which is running fine)

var enemies = [];
var newEnemiesAmount;
var oldEnemiesAmount;
function createEnemies(amount) {
    oldEnemiesAmount = (amount > 0) ? amount : oldEnemiesAmount;
    newEnemiesAmount = amount+(Math.floor(oldEnemiesAmount)/5)

    //Create a layer to spawn the enemies on
    enemyLayer = new createjs.Container();

    //Loop through the amount wanted.
    for (var i = 0; i < newEnemiesAmount; i++) {
        enemy = new Enemy(i);
        createEnemyBullet(enemy);
        //push the object in an array and add it to the newly made layer
        enemies.push(enemy);
        enemyLayer.addChild(enemy.sprite);
    }

    stage.addChild(enemyLayer);
}
CaptainCarl
  • 3,411
  • 6
  • 38
  • 71
  • Are you seeing the spritesheet display at all? You are not showing code for your application where the Enemy is created, the sprite added to the stage, or the stage updated -- can you perhaps show some context? – Lanny Apr 03 '13 at 20:04
  • Yes. I see the first image in the sequence. The project is pretty massive so a fiddle is no option to be honest. I was kinda hoping i just made a silly mistake in the creation of the spritesheet. Besides. The stage is updated in the ticker, so that shouldn't be a problem. I will add the enemy creation to my post. So by the time you're reading this it should be there ;-) – CaptainCarl Apr 04 '13 at 06:57
  • I don't see anything that is jumping out - perhaps isolate the SpriteSheet stuff to a spike to ensure it works -- I suspect there is something else that is externally affecting it. – Lanny Apr 04 '13 at 15:36
  • I'd second the suggestion to isolate the issue. Just create a test spritesheet directly at the stage in your game MAIN, and make it play. If it does not work, try creating test spritesheet JSON with ZOE from a set of PNGs, to double check it does not have to do with spritesheet config. – sbat Apr 10 '13 at 10:16
  • Can you confirm that the gotoAndPlay is working? Perhaps debug on that line, and ensure that its getting called. – Lanny Apr 15 '13 at 17:38
  • I'm sorry Lanny. I'm currently swamped with other work. I'll keep you posted! – CaptainCarl Apr 16 '13 at 06:27

1 Answers1

1

Try specifying the number of frames in the spritesheet when constructing the spritesheet.

var spriteSheet = new createjs.SpriteSheet({
    images: ["resources/sprites/enemy_spritesheet.png"], 
    frames: {width:40, height:40, count: 4},
    animations: {
        walk: [0, 3]
    }
});
Anish Patel
  • 4,332
  • 1
  • 30
  • 45