Search code examples
javascriptflash-cs6easeljssprite-sheet

Why is my sprite cropped from the bottom?

I am generating my sprite sheet using Flash Pro and loading the sprite using EaselJS. I am noticing that if my sprite is too large, it gets cropped from the bottom (i.e. the arms get cut out). The following code demonstrates this:

<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>

The following is my large.jpg:

However, the problem is solved if I make my sprite smaller. Below I have exactly the same code except using a smaller frame size and the same, but smaller, sprite sheet:

<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:

I am really pulling my hair out on this problem. Can someone please explain to me why this happens? What am I doing wrong? Or is there a limit to how large sprites can be?

Thank you.

Solution

  • The default size of the canvas is smaller than your images -- so your image is getting cropped to that. (Chrome is 300x150). Set your canvas height higher, and the rest of your animation will be visible.

    Cheers!