我正在使用 Flash Pro 生成我的精灵表并使用 EaselJS 加载精灵。我注意到如果我的精灵太大,它会从底部被裁剪(即手臂被剪掉)。下面的代码演示了这一点:
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="easeljs-0.6.0.min.js"></script>
</head>
<body>
<canvas id="canvas">
HTML5 Canvas not supported
</canvas>
<script>
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
// create spritesheet and assign the associated data.
largeSS = new createjs.SpriteSheet({
images: ["large.jpg"],
frames: [[0,0,221,200,0,0,0],[221,0,221,200,0,0,0],[0,200,221,200,0,0,0],[221,200,221,200,0,0,0]],
animations: {
talk: [0, 3, "talk", 7]
}
});
bmpAnimation = new createjs.BitmapAnimation(largeSS);
bmpAnimation.gotoAndPlay("talk");
stage.addChild(bmpAnimation);
createjs.Ticker.addListener(stage);
</script>
</body>
</html>
以下是我的大.jpg:
但是,如果我让我的精灵变小,问题就解决了。下面我有完全相同的代码,除了使用更小的框架尺寸和相同但更小的精灵表:
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="easeljs-0.6.0.min.js"></script>
</head>
<body>
<canvas id="canvas">
HTML5 Canvas not supported
</canvas>
<script>
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
// create spritesheet and assign the associated data.
smallSS = new createjs.SpriteSheet({
images: ["small.jpg"],
frames: [[0,0,100,91,0,0,0],[100,0,100,91,0,0,0],[0,91,100,91,0,0,0],[100,91,100,91,0,0,0]],
animations: {
talk: [0, 3, "talk", 7]
}
});
bmpAnimation = new createjs.BitmapAnimation(largeSS);
bmpAnimation.gotoAndPlay("talk");
stage.addChild(bmpAnimation);
createjs.Ticker.addListener(stage);
</script>
</body>
</html>
小.jpeg:
我真的很想解决这个问题。有人可以向我解释为什么会这样吗?我究竟做错了什么?或者精灵的大小是否有限制?
谢谢你。