createjs spritesheet不是动画

时间:2013-04-03 06:43:33

标签: javascript canvas html5-canvas easeljs createjs

我已经尝试将spritesheet移动了一段时间,并尝试了在easeljs文档中的各种方法。我仍然无法让血腥的东西工作。所以我希望你们中的一些人可以看看它。

我正在使用的spritesheet是160x40,其中1个精灵是40x40。

这是我的敌人功能应该有动画:(第25行是创作。在移动功能中是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 = [];
} 

请求敌人创建功能。 (p.s阶段在股票代码中更新,运行正常)

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);
}

1 个答案:

答案 0 :(得分:1)

在构造spritesheet时尝试指定spritesheet中的帧数。

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