如何管理一个巨大的精灵答案

【问题标题】：How to manage a Huge Sprite如何管理一个巨大的精灵
【发布时间】：2013-12-16 23:02:33
【问题描述】：

目前我在一个客户网站上，他们希望实验室允许用户设计完全定制的游戏控制器。为了减少加载次数并使事情变得更快，我决定将所有图像放入 1 个巨大的精灵中。虽然在快速连接上只有几秒钟的等待时间，但较慢的连接可能是几分钟。

我正在处理的 sprite 为 4305x3945，约 15MB，并且随着添加更多选项而变得更大。附带说明一下，客户希望提供 PS4、Xbox 360 和 Xbox One，这需要 3 个类似大小的精灵（仅加载请求）。

目前我只是加载整个精灵并使用 drawImage 剪切出我需要的部分，而且速度非常快。

所以我想我的问题是减少加载时间的最有效方法是什么？我是否应该允许用户使用半功能实验室，说大约 40% 的选项负载？我是否应该有一个一半大小的基本精灵并提供加载更多外壳的选项（在另一个精灵中）？或者我应该将所有图像分离到它们自己的文件中，并且仅在需要该特定项目时才加载（每个 shell 约 0.2-2.5 秒）？

这是最大的精灵的样子：

【问题讨论】：

.jpg 而不是 .png，而用户正在设计，然后 ajax .png 用户的最终选择？
如果可能的话，我想保持透明背景。否则，非方形对象将具有奇怪的渲染颜色。或者我应该让画布将纯白色像素操作为不可见？
你能得到原始文件吗，必须是矢量格式，矢量文件可能会更便宜。如果您单独处理颜色（/颜色渐变）；你只能有一个矢量文件，然后在绘制时添加颜色。
@Steven10172 Jpeg 通常在对比度边缘附近没有纯白色像素。在 jpeg 上使用颜色键可能看起来更糟。
@GameAlchemist 我有原始文件。它只是 1 个控制器外壳，在 Photoshop 中修改了色调和其他内容，看起来像不同的颜色，但保持相同的确切形状。

标签： canvas html5-canvas png sprite

【解决方案1】：

据我所知，您的大多数精灵只是颜色变化。

您可以通过在运行时将其着色为不同色调的单个灰度图形来节省大量带宽。

为此，您可以使用context.getImageData() 获取画布（或其一部分）的原始RGBA 值数组，修改RGB 值，然后使用context.putImageData() 将它们写入另一个画布。

The documentation 告诉你更多关于如何使用这些功能。

您可以做的另一件事是使用 SVG 格式的矢量图形，而不是 PNG 中的光栅图形。很难用这样一个缩小的示例图形来判断，但看起来你的大多数图形都是相当几何的。 SVG 图形的文件大小不依赖于大小，只依赖于细节级别。当您的图形确实非常风格化时，在 SVG 中表示它们可以比 PNG 节省大量带宽。

【讨论】：

示例图像有点小（有人穿过它?），但似乎有一些图案变化。另请注意第 3 行第 3 列：彩虹设计。 OTOH：图案可以很容易地覆盖在纯色底座上。绝对值得一试，我会说。
@Steven10172 用替代解决方案更新了答案（使用 SVG）
我真的很喜欢这个答案。实际上，我一直打算对大多数简单的 shell 做类似的事情，并且只加载基于图像的 shell（或提供使用选项来加载更多）。
我喜欢这个答案的理论（替换客户端的颜色变化）。它似乎非常适合单色贝壳（没有彩虹和渐变）。但是，图像中的大多数外壳实际上都有渐变，不适合客户端颜色替换。顺便说一句，在给定渐变时，svg 通常比 .png 大。例如，我采用了您的 .png 样本并在 Adobe Illustrator 中对其进行了矢量化处理：.png = 89 kb，.svg = 1.1 mb。无论如何，这是我的 2 美分。祝你的项目好运:)
@markE 错了。 SVG 格式支持渐变就好了。但是自动矢量化器通常难以识别渐变，并尝试用许多单独的形状来表示它们。很明显，这将导致一个巨大的文件大小。当您从一开始就设计矢量格式的图形时，它会比您尝试从位图自动逆向设计矢量时效率大大。