我正在使用 Flash Pro 生成 Sprite 表并使用 EaselJS 加载 Sprite 。我注意到如果我的 Sprite 太大，它会从底部被裁剪掉(即 ARM 被剪掉)。以下代码演示了这一点:
<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:
但是，如果我将 sprite 变小，问题就解决了。下面我有完全相同的代码，除了使用更小的帧大小和相同但更小的 Sprite 表:
<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:
在这个问题上我真的很紧张。有人可以向我解释为什么会这样吗？我究竟做错了什么？或者 Sprite 的大小有限制吗？
谢谢。
最佳答案
Canvas 的默认大小小于您的图片——因此您的图片会被裁剪成这样。 (Chrome 是 300x150)。将 Canvas 高度设置得更高，动画的其余部分将可见。
干杯!
关于javascript - 为什么我的 Sprite 从底部被裁剪？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16004486/