我正试图从SpriteSheet动画中水平翻转精灵。我从this example
开始我在创建 SpriteSheet 后立即添加了翻转的框架
var ss = new createjs.SpriteSheet(spriteSheet);
createjs.SpriteSheetUtils.addFlippedFrames(ss, true, false, false);
grant = new createjs.BitmapAnimation(ss);
...
我总是得到这个错误:
Uncaught TypeError: Cannot read property 'length' of null (SpriteSheetUtils.js l.174)
我看到有人在此github thread遇到同样的问题 并使用preload mecanism修复它。
该示例也使用预加载,所以我试图在资源加载后调用addFlippedFrames,但我仍然看到相同的错误。
有没有人能为我提供线索? 我该如何使用addFlippedFrames?
编辑: 这是我试过的代码:
使用我的spritesheet初始化舞台:
spriteSheet = new createjs.SpriteSheet({
"animations": {
"none": [0, 0],
"run": [0, 25],
"jump": [26, 63]
},
"images": ["characters/grant/runningGrant.png"],
"frames": {
"height": h,
"width": w,
"regX": 0,
"regY": 0,
"count": 64
}
});
sprite = new createjs.BitmapAnimation(spriteSheet);
sprite.x = startPosition.x;
sprite.y = startPosition.y;
// Add the sprite to the stage.
stage.addChild(this.sprite);
然后像这样使用预载:
var manifest = [{
src: "characters/grant/runningGrant.png",
id: "grant"
}
];
var loader = new createjs.LoadQueue(false);
loader.onFileLoad = handleFileLoad;
loader.onComplete = onResourcesLoaded;
loader.loadManifest(manifest);
和回调函数:
handleFileLoad = function(event) {
assets.push(event.item);
};
onResourcesLoaded = function() {
for (var i = 0; i < assets.length; i++) {
var item = assets[i];
var id = item.id;
var result = loader.getResult(id);
if (item.type == createjs.LoadQueue.IMAGE) {
var bmp = new createjs.Bitmap(result);
//does this Bitmap creation trigger the real bitmap loading ?
//is this loading asynchrous which would explain my problem.
//in this case, how can I manage the loading callback ?
}
}
//I would expect here to have the image fully loaded but its not
//A timeout of 2 seconds makes the addFlippedFrames works.
setTimeout(function(){
createjs.SpriteSheetUtils.addFlippedFrames(spriteSheet, true, false, false);
sprite.gotoAndPlay("run_h"); //I think "run_h" is used to launch the flipped version of "run"
}, 2000);
};
答案 0 :(得分:3)
你的问题是,你创建了一个带有image-url的SpriteSheet,这已经触发了一个加载过程,preload-js队列实际上没有加载任何东西,因为图像的加载已经在进行中,所以“onComplete” “-event在图像实际加载之前总是被触发 - 这是有道理的,因为不需要加载图像两次
我已经更新了你的jsfiddle并添加了一些评论:http://jsfiddle.net/K4TmS/1/(完整代码)
spriteSheet = new createjs.SpriteSheet({
"animations": {
"none": [0, 0],
"run": [0, 25],
"jump": [26, 63]
},
//this line in YOUR version triggered an own loading process, independent from the queue
"images": [result],
"frames": {
"height": 292.5,
"width":165.75,
"regX": 0,
"regY": 0,
"count": 64
}
});
// this was executed instantly, because the image was already in another loading progress, and therefore wasn't even added to the queue
loader.onComplete = onResourcesLoaded;
这里的参数可以忽略DOM安全错误18(用于开发)Disable same origin policy in Chrome 但是对于生产,您应该只从同一台服务器加载img,然后图像操作不会出错。
所以简而言之:你的问题是由于执行错误的顺序,请记住:如果你使用预加载:在其他所有事情之前预先加载,并且没有其他事情直到预加载没有完成。 (除了加载图形/动画/指示器)。
答案 1 :(得分:2)
使用scaleX很容易
if(right == true)
{
//walking direction en sprite switch
rogerWalk.scaleX = -1 * rogerWalk.scaleX;
right = false;
}
//我曾经做过的代码(在这种情况下,roger向右走(标准精灵方向)
if(right == false)
{
rogerWalk.scaleX = -1 * rogerWalk.scaleX;
right = true;
//这是我有的keyleft / keyright功能
我知道这篇文章很老但是仍有人可以使用它:)