Reputation: 3489
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);
}
Upvotes: 0
Views: 863
Reputation: 4402
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]
}
});
Upvotes: 1