EaselJS MultiRow Spritesheet

Question

I have a slight problem , I am using a multirow Spritesheet , where each row is a sequence of images.

However I can't get the sprite sheet to start at a different Height (so it can move down) , they all start at the top corner

 var spriteSheetUp = new createjs.SpriteSheet({
    // image to use
    images: [snakeI],
    // width, height & registration point of each sprite
    frames: {width: 96, height: 90, regX: 0, regY: 290},
    animations: {
        move: [0, 3, "move"]
    }
});

I want the above to start using the frames at pixel 290 .

Thanks in advance !

Answer 1

Well, I have spritesheet with multiple rows and lets pretend that it would contain 3 row of images with spots like these:

x, x, x, x, // moving animation images
x, x, x, x, // jumping animation images
x, x, x, x, // dying animation images

All of the image slots would have height and width of 80px, they are stacked tightly next to each other in spritesheet and their center would be middle of image, actual character size I use is 40px (width and height) so it is regX: 40 and regY: 40 and spritesheet img size would be then 320px width and height. (because four slots of 80px * 4 = 320px).

I would access them like this:

var localSpriteSheet = new createjs.SpriteSheet({
        images: [imgPlayer],
        frames: {width:80, height:80, regX:40, regY:40},
        animations: {
            moving: [0,3],
            jumping: [4,7],
            dead: [8,11]
        }
});

I think you see the pattern here, starting number of for example jumping is 4 because tile numbering starts from 0.

So actual slots for above tilesheet is these:

0, 1, 2, 3, // moving animation images
4, 5, 6, 7, // jumping animation images
8, 9, 10, 11, // dying animation images

Hopefully, this helps you out - you simply need to watch your spritesheet starting slot of your animation "move" and make it start from that forwards.

// takes 4 images from first line
move: [0, 3] 

// takes 4 images from second line (If spritesheet has 4 images on each line).
jump: [4, 7] 

Hope this helps!