Question

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

以下是我的big.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：

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

谢谢。

Answer 1

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

干杯！

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

1 个答案: