EaselJS MultiRow Spritesheet

Question

我有一个小问题，我正在使用一个多行Spritesheet，其中每一行都是一个图像序列。

然而，我不能让精灵工作表从不同的高度开始(这样它就可以向下移动)，它们都从顶角开始

 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"]
    }
});

我希望上面的代码开始使用像素为290的帧。

提前感谢！

Answer 1

好吧，我有一个多行的spritesheet，让我们假设它将包含3行带有如下斑点的图像：

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

所有的图像插槽都会有80px的高度和宽度，它们在spritesheet中紧挨着堆叠在一起，它们的中心将是图像的中间，我使用的实际字符大小是40px (宽度和高度)，所以它是regX: 40和regY: 40，而spritesheet img大小将是320px宽度和高度。(因为四个80px *4=320px的插槽)。

我会像这样访问它们：

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]
        }
});

我认为你可以看到这里的模式，例如jumping的起始编号是4，因为磁贴编号从0开始。

因此，上面的tilesheet的实际插槽如下：

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

希望这能帮到你--你只需要观察你的spritesheet开始你的动画“移动”的位置，并让它从这个位置开始。

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

希望这能有所帮助！