在 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 设置动画时遇到问题的主要内容,如果未能解决你的问题,请参考以下文章
来自 TexturePacker 的 EaselJS Spritesheets