为什么我的精灵是从底部裁剪的？答案

【问题标题】：Why is my sprite cropped from the bottom?为什么我的精灵是从底部裁剪的？
【发布时间】：2013-04-06 22:28:06
【问题描述】：

我正在使用 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>

small.jpeg：

我真的在这个问题上大发雷霆。有人可以向我解释为什么会这样吗？我究竟做错了什么？或者精灵的大小是否有限制？

谢谢。

【问题讨论】：

标签： javascript flash-cs6 easeljs sprite-sheet

【解决方案1】：

画布的默认尺寸小于您的图片——因此您的图片会被裁剪为该尺寸。（铬是 300x150）。将您的画布高度设置得更高，您的动画的其余部分将可见。

干杯！

【讨论】：