问题标签 [sprite-sheet]

所以，我正在寻找使用精灵表在 CSS 中制作背景图像。为了清楚起见，不，我不会追求这种效果。我有一个完整的精灵表，我想在表上取一个 16 x 16 像素的正方形并将其设置为将重复的背景。

在未来的某个时候，我希望能够使用 URL 参数中的媒体片段通过空间维度来做到这一点，但由于这还不支持，我正在寻找替代方案。有没有办法通过现代 CSS 技术或黑客来获得同样的效果？

一些注意事项：

• 我不需要支持旧浏览器，只需最新的 FF 或 Chrome 即可。
• 我更喜欢纯 CSS 解决方案。如果需要，我可以并且将创建一个带有 data:URI 的 JS/Canvas 解决方案，但考虑到我可能需要多少元素，如果我可以通过纯 CSS 获得更好的结果，我宁愿不必这样做。
• 需要在两个x方向y重复
• 寻找利用内存/缓存中的单个图像的解决方案，这样我就不必为要插入的每个精灵加载精灵表

到处都建议创建精灵表（也称为纹理图集）而不是使用数百个单独的图像。我有数百张用于单词学习游戏的图像；但是有数百个单词，没有动画序列。因此，在生成了数据文件和精灵表之后，我正在寻找一个示例，说明如何在需要时从原始图像文件名（存储在精灵表数据（lua 代码）文件中（均使用纹理打包器创建）创建图像） .

这似乎是对的：

在创建精灵表之前，将使用以下内容创建我的图像：

例如，其中 cnTiles[1] 是放置在 sqlite 表中的数组中的值，例如“sit_word100.png”。

现在在“getSpritSheetData”函数下方我的生成lua文件中有一个条目，如下所示：

我可以看到我的所有图像文件名现在都存储在数据中，以提供一种在精灵表中引用我的图像的方法，但是由于我不想使用“精灵集”，所以我找不到示例只需在需要时获得一张图像。

我想要一些允许我使用原始图像名称引用我现在的 spritesheet-ified 图像的东西。这可能吗？例如

抱歉，这是一些代码，但这里没有太多要删减的内容。这应该读取图像（字母表的精灵表）并将其切割成较小的子图像，这些子图像是每个单独的字母。当一个键被按下时，相应的字母会出现在屏幕上，但这部分只是为了创建实际的子图像。

http://i.imgur.com/4I4uX.png（图片）

以下部分让我感到困惑。i 和 j 是什么意思，为什么要将它们相加和相乘？这部分是为了找出子图像必须有多大，对吧？不应该只是 4 x 13，即行*列吗？

我不明白 i 和 j 在做什么。我在这里想念什么？

我决定在 Windows Phone 7 上玩 XNA，对于我的第一个游戏，我需要拍摄一张图像并将其拆分为方形精灵，因此图像本质上变成了一张精灵表。原始图像对于屏幕来说可能太大或太小，所以我已经完成了以下操作来确定如何应用比例以使其适合屏幕，但没有显示任何间隙（因此一个维度可能超出屏幕）。

但接下来我需要从这个图像中生成精灵，它们在网格中整齐地填充屏幕。我想我的主要问题是，当我在每个精灵上调用我的绘制方法时，缩放是否适用于原始精灵表，或者在从精灵表中获取其纹理后仅适用于精灵本身？

如果是后者，我对在构建我的个人精灵之前如何最好地缩放精灵表感到有点困惑。实际上，我可能最终会首先调整图像大小以完全匹配屏幕尺寸以使生活更轻松，但这似乎有点笨拙。

任何建议都将受到欢迎！

哪个最适合性能，文件大小（和我的理智）：动画.gifs或使用CSS（和JS在需要时）动画的spritesheet？

文件大小

所以，老实说，我不确定哪个会更好，因为我不了解.gif. 我的猜测是，如果我能正确挥杆，他们最终会大致相等，但如果这是错误的，或者这是出于不同原因的一个因素，请告诉我。

在我看来，这里的主要优势在于 Spritesheets，因为我可以在一张纸上包含多个动画（我们在这里讨论的是数百个动画精灵）。根据我之前的一个问题，我知道我可以使用image-rect(). 与.gif文件一样，我真的只能包含一个动画，因为每个动画可能有不同的持续时间。

附录：此外，某些动画会针对给定的精灵重复，因此精灵表只需要拥有一个帧副本，而 a.gif则需要拥有所有帧（至少据我所知）。

表现

再次猜测，我的直觉告诉我，动画.gifs 会明显更快，因为我不必同时管理所有动画，因为我正在为其他事情做很多 JS 代码。但是，我不确定，也许浏览器会受到 30 多个动画.gif的重大影响。

我的理智

spritesheets 是为我制作的，所以我的工作一开始会很高（写作和动画引擎以及手工编码一个/每张表）。但是一旦编写好，它就可以很好地使用，并且对精灵表的更改只需要对代码进行最少的更改。

另一方面，.gif在 Photoshop 中制作动画文件并不是小菜一碟（如果您有更好的程序，请告诉我）。而且每一个都必须手工制作，是一个漫长的过程。但是，一旦它们被制作出来，我真的不需要改变它们。我的 spritesheets 不太可能很快改变，所以很有可能它会完成。

我的问题 (tl;dr)

在文件大小（包括通过网络传输的 HTTP 标头传输）、现代浏览器中的性能和易于创建（最低优先级，但如果你能让我的工作更轻松的话）这将更好地扩展到数百个动画，或者对此提出异议，我将不胜感激），.gif从 spritesheets 构建的动画文件，还是仅使用 CSS 和我已经拥有的 spritesheets？

例子

VS

我对渲染 2d 图像的研究使我想到了这个…… Silverlight 中的 Spritesheet 这个答案已经足够好了，但是我不想使用矩形。我认为使用图像类来显示图像更有意义。在尝试理解上述示例之后。我想出了以下代码...

现在图像类只显示源图像的左上角。我需要浏览巨大的 500x500BigHugeImae 才能移动到我无法导航的地方。

我试图让一个精灵永远为自己设置动画。没有问题，并且构建良好。我越过了菜单，当我单击包含我想要在其上设置动画的精灵的场景时，它崩溃了。我正在为我的动画使用以下代码：

我认为问题与第一行代码 CCSpriteFrameCache 有关，但我看不出它有什么问题。请帮助，或者给我另一种方式来动画我的精灵。

我正处于 iphone 游戏的初始构建阶段，我正在使用精灵表来创建一些随机的人，每个人都有头发、衣服等的子精灵。

我使用 CCSpriteBatchNode 将我的精灵图像存储在精灵表中。我现在只是在进行初始设置测试，您可以在其中点击屏幕以生成一组新的随机人员。所以奇怪的是，你可以点击一次，它会删除旧人并用新人替换他们，但第二次，它会崩溃并出现错误：“CCSpriteBatchNode 不包含精灵。无法删除它”现在我确定我已将精灵添加到批处理节点，在我的 Person.m 构造函数中，我有这一行：

在我在 ccTouchesEnded 的测试代码中，我得到了以下代码：

有人可以建议我缺少什么吗？我已经阅读了很多关于 cocos2d 中的 spritesheets 的内容，并且了解到删除单个 sprite 是很棘手的，所以我确信我需要在这里添加一些重要的行。谢谢你的帮助！

编辑： 我用谷歌搜索了错误并找到了这个线程： http: //www.cocos2d-iphone.org/forum/topic/17170这似乎证实了 Cocos2d 认为我没有将精灵添加到精灵表中 - 但我是，正如精灵第一次正确添加的事实所证明的那样，而不是第二次。

一种解决方案是完全避免删除精灵，只是让它们不可见，并在需要重用时用新特性重新绘制它们。我宁愿知道真正的解决方案是什么，因为它看起来更干净。

这种组合可能吗？我有一个复古风格的 spritesheet，但是我想使用 SVG 来应用一些效果，例如阴影、轮廓和其他东西。不要质疑它。

我知道画布是一种替代方案，但是对于这个项目，我更喜欢使用 SVG。然而，一个主要问题是：从 spritesheet 中获取单个 sprite。此外，我使用 1x1 像素精灵，但通过隐藏画布放大精灵表以使其成为 6x6，因此我还使用图像元素，而不是链接到页面外部的图像。

是否可以选择要在 SVG 中使用的图像区域？SVG 图像元素似乎没有提供这样的选项。

我搜索了SpriteSheet的 API ，但我找不到任何关于如何制作具有不同大小精灵的精灵表的信息。

我正在使用的精灵表有一行 16x16px 的图块，它下面有一排 24x24px 的图块，下面是一排 8x8px 的图块，依此类推。

最初，我没有使用 Slick2D，而是使用 BufferedImage.getSubimage() 从精灵表的临时 BufferedImage 中获取每个精灵。我可以在这里使用类似的方法吗？