1

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

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

谢谢你。

4

1 回答 1

2

画布的默认尺寸小于您的图像 - 因此您的图像被裁剪为该尺寸。(铬是 300x150)。将您的画布高度设置得更高,您的动画的其余部分将可见。

干杯!

于 2013-04-15T01:39:57.243 回答