Canvas 如何管理一个巨大的精灵
目前我在一个客户网站上，他们希望实验室允许用户设计完全定制的游戏控制器。为了减少加载次数并加快速度，我决定将所有图像放入一个大型精灵中。在快速连接上，只有几秒钟的等待时间，而较慢的连接可能需要几分钟 我正在处理的sprite是4305x3945，~15MB，随着更多选项的添加，它的容量可能会变得更大。作为补充说明，客户希望提供PS4、Xbox 360和Xbox One，这将需要3个大小类似的精灵（仅加载请求的精灵） 目前我只是加载整个精灵，使用drawImage剪切出我需要的部分，速度非常快 所以我想我的问题是，减少加载时间最有效的方法是什么？我是否应该允许用户使用半功能性实验室，比如说约40%的选项负载？我应该有一个一半大小的基本雪碧，并提供一个选项来加载更多的贝壳（在另一个雪碧中）？或者我应该将所有图像分离到它们自己的文件中，并仅在需要特定项目时加载（每个shell大约0.2-2.5秒） 下面是最大的雪碧的样子：Canvas 如何管理一个巨大的精灵,canvas,html5-canvas,png,sprite,Canvas,Html5 Canvas,Png,Sprite,目前我在一个客户网站上，他们希望实验室允许用户设计完全定制的游戏控制器。为了减少加载次数并加快速度，我决定将所有图像放入一个大型精灵中。在快速连接上，只有几秒钟的等待时间，而较慢的连接可能需要几分钟 我正在处理的sprite是4305x3945，~15MB，随着更多选项的添加，它的容量可能会变得更大。作为补充说明，客户希望提供PS4、Xbox 360和Xbox One，这将需要3个大小类似的精灵（仅加载请求的精灵） 目前我只是加载整个精灵，使用drawImage剪切出我需要的部分，速度非常快 所
据我所知，您的大多数精灵只是颜色变化 您可以通过只使用一个灰度图形，在运行时将其着色为不同的色调，从而节省大量带宽 为此，可以使用
context.getImageData（）context.putImageData（）您可以做的另一件事是使用SVG格式的矢量图形，而不是PNG格式的光栅图形。对于这样一个缩小的示例图形，很难说清楚，但看起来您的大多数图形都是几何图形。SVG图形的文件大小不取决于大小，只取决于细节级别。当您的图形确实非常样式化时，用SVG表示它们可以比PNG节省大量带宽。据我所知，大多数精灵只是颜色变化 您可以通过只使用一个灰度图形，在运行时将其着色为不同的色调，从而节省大量带宽 为此，可以使用
context.getImageData（）context.putImageData（）您可以做的另一件事是使用SVG格式的矢量图形，而不是PNG格式的光栅图形。对于这样一个缩小的示例图形，很难说清楚，但看起来您的大多数图形都是几何图形。SVG图形的文件大小不取决于大小，只取决于细节级别。当您的图形确实非常样式化时，用SVG表示它们可以比PNG节省大量带宽。据我所知，大多数精灵只是颜色变化 您可以通过只使用一个灰度图形，在运行时将其着色为不同的色调，从而节省大量带宽 为此，可以使用
context.getImageData（）context.putImageData（）您可以做的另一件事是使用SVG格式的矢量图形，而不是PNG格式的光栅图形。对于这样一个缩小的示例图形，很难说清楚，但看起来您的大多数图形都是几何图形。SVG图形的文件大小不取决于大小，只取决于细节级别。当您的图形确实非常样式化时，用SVG表示它们可以比PNG节省大量带宽。据我所知，大多数精灵只是颜色变化 您可以通过只使用一个灰度图形，在运行时将其着色为不同的色调，从而节省大量带宽 为此，可以使用
context.getImageData（）context.putImageData（）您可以做的另一件事是使用SVG格式的矢量图形，而不是PNG格式的光栅图形。对于这样一个缩小的示例图形，很难说清楚，但看起来您的大多数图形都是几何图形。SVG图形的文件大小不取决于大小，只取决于细节级别。当您的图形确实非常风格化时，用SVG表示它们可以在用户设计时通过PNG节省大量带宽。.jpg而不是.PNG，然后是ajax.PNG，这是用户的最终选择？如果可能，我希望保持透明的背景。否则，非方形对象将具有奇怪的颜色。或者我应该让画布操纵纯白像素使其不可见？你能得到原始文件吗？它必须是矢量格式，矢量文件可能更便宜。如果单独处理颜色（/颜色渐变）；只能有一个矢量文件，然后在绘图时添加颜色。@Steven10172 Jpeg在对比度边缘附近通常没有纯白色像素。在jpeg上使用颜色键可能看起来更糟。@gamealchest我有原始文件。在Photoshop中，它只有一个控制器外壳，带有修改过的色调和其他东西，看起来像不同的颜色，但保留相同的确切形状。在用户设计时使用.jpg而不是.png，然后使用ajax.png作为用户的最终选择？如果可能的话，我希望保持透明的背景。否则，非方形对象将具有奇怪的颜色。或者我应该做画布操纵