如何管理巨大的雪碧

Question

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

我正在处理它的精灵4305x3945，大约15MB，并且随着更多选项的增加，它们容易变得更大。作为旁注，客户需要提供PS4，Xbox 360和Xbox One，这需要3个相似大小的精灵（仅加载请求）。

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

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

这是最大的精灵看起来像：

Answer 1

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

只需一个灰度图形就可以节省大量带宽，您可以在运行时将其着色为不同的色调。

为了做到这一点，您可以使用context.getImageData()获取画布（或其一部分）的原始RGBA值数组，修改RGB值，并使用{{将它们写入另一个画布1}}。

The documentation告诉您有关如何使用这些功能的更多信息。

您可以做的另一件事是使用SVG格式的矢量图形而不是PNG中的光栅图形。用这种缩小的样本图形很难说，但看起来大多数图形都是几何图形。 SVG图形的文件大小不依赖于大小，仅取决于详细程度。当您的图形确实非常风格化时，在SVG中表示它们可以比PNG节省更多带宽。