EaselJS MultiRow Spritesheet

Posted 2023-03-25

【中文标题】EaselJS MultiRow Spritesheet

【英文标题】：

【发布时间】：2013-02-22 23:11:25

【问题描述】：

我有一个小问题，我使用的是多行 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 处的帧。

提前致谢！

【参考方案1】：

好吧，我有多行的 spritesheet，让我们假设它包含 3 行图像，这些图像如下所示：

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

所有的图片槽的高度和宽度都是 80 像素，它们在 spritesheet 中彼此紧紧地堆叠在一起，它们的中心将是图片的中间，我使用的实际字符大小是 40 像素（宽度和高度）所以它是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] 

希望这会有所帮助！

【讨论】：

你成功了，伙计！感谢您的提醒，我不知道自动文档/示例不清楚，或者我错过了它