在 EaselJS 中为 spritesheet 设置动画时遇到问题

Posted

技术标签:

【中文标题】在 EaselJS 中为 spritesheet 设置动画时遇到问题【英文标题】:Trouble animating spritesheet in EaselJS 【发布时间】:2015-06-09 15:38:03 【问题描述】:

我正在尝试使用 EaselJS 为 spritesheet 设置动画,但我不断收到未捕获的类型错误:undefined is not a function on this line - bmpAnimation = new createjs.BitmapAnimation(spriteSheet); 到目前为止,这是我的代码:

// javascript Document
window.onload = function()

//Creating a new Stage instance, passing in our canvas element's ID.
var stage = new createjs.Stage("canvas"),

imgMonsterARun = new Image();
imgMonsterARun.src = "img/MonsterARun.png";

    var spriteSheet = new createjs.SpriteSheet(
        // image to use
        images: [imgMonsterARun], 
        // width, height & registration point of each sprite
        frames: width: 64, height: 64, regX: 32, regY: 32, 
        animations:     
            walk: [0, 9, "walk"]
        
    );

    // create a BitmapAnimation instance to display and play back the sprite sheet:
    bmpAnimation = new createjs.BitmapAnimation(spriteSheet);

    // start playing the first sequence:
    bmpAnimation.gotoAndPlay("walk");     //animate

    // set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds
    // of animated rats if you disabled the shadow.
    bmpAnimation.shadow = new createjs.Shadow("#454", 0, 5, 4);

    bmpAnimation.name = "monster1";
    bmpAnimation.direction = 90;
    bmpAnimation.vX = 4;
    bmpAnimation.x = 16;
    bmpAnimation.y = 32;

    // have each monster start at a specific frame
    bmpAnimation.currentFrame = 0;
    stage.addChild(bmpAnimation);

    createjs.Ticker.setFPS(60);
    createjs.Ticker.useRAF = true;
    createjs.Ticker.addListener(window);

        function tick() 
               
            // Hit testing the screen width, otherwise our sprite would disappear
            if (bmpAnimation.x >= screen_width - 16) 
                // We've reached the right side of our screen
                // We need to walk left now to go back to our initial position
                bmpAnimation.direction = -90;
            

            if (bmpAnimation.x < 16) 
                // We've reached the left side of our screen
                // We need to walk right now
                bmpAnimation.direction = 90;
            

            // Moving the sprite based on the direction & the speed
            if (bmpAnimation.direction == 90) 
                bmpAnimation.x += bmpAnimation.vX;
            
            else 
                bmpAnimation.x -= bmpAnimation.vX;
            

            // update the stage:
            stage.update();
        
        tick();

;

任何帮助将不胜感激。

【问题讨论】:

解决了这个问题! 0.8.0 版本不支持 BitmapAnimation 必须使用 0.6.0 【参考方案1】:

在 0.8.0 中,您可以使用普通的 SpriteSheet 创建动画 SpriteSheet。在http://createjs.com/Demos/EaselJS/SpriteSheet 上查看演示(确保检查“实时编辑”下的代码 ;-))

【讨论】:

【参考方案2】:

尝试使用 "Sprite" 而不是 "BitmapAnimation"。

那是

bmpAnimation = new createjs.BitmapAnimation(spriteSheet);

变成

bmpAnimation = new createjs.Sprite(spriteSheet);

为我工作。

【讨论】:

以上是关于在 EaselJS 中为 spritesheet 设置动画时遇到问题的主要内容,如果未能解决你的问题,请参考以下文章

easelJS入门事件spritesheet

EaselJS spritesheet 动画使背景消失

来自 TexturePacker 的 EaselJS Spritesheets

Spritesheet 动画 easeljs-0.7.1.min.js

EaselJS MultiRow Spritesheet

EaselJS spritesheet 动画在画布上不可见,但没有错误