JavaScript精灵表与普通和视网膜屏幕配合使用

Question

我正在寻找一些建议。 我创建了一个太空侵略者游戏，该游戏可以从一张精灵纸上获取飞船和外星人。 我在5k视网膜屏幕上工作，看起来一切都很好。

问题是，当我进入非视网膜屏幕时，飞船/外星人精灵的位置看起来很错误，而外星人则从中间穿过。 因此，一个外星人在屏幕上显示为一个外星人的一半，另一半。

我将其归结为视网膜问题，并寻求解决方法。 Sprite图片是通过image（）构造函数并在加载时使用的。 然后，我使用drawImage设置精灵表上的位置，以选择每个外星人上的正确位置。 因此没有使用CSS。

我需要两个子画面一张，一个视网膜和一个非视网膜，还是它们是JavaScript将检查使用哪种屏幕的代码？

是否需要代码或此解释足够好吗？

编辑

我发现我在非视网膜屏幕上的浏览器放大了110％时出错，这引起了问题。 因此，似乎是在缩放浏览器时出现了问题。

Answer 1

您可以通过多种方法来解决此问题：

• 创建两个单独的Sprite工作表，并使用媒体查询根据设备分辨率的媒体查询应用正确的样式。 这是劳动密集型的，所以我建议使用一种工具来构建工作表并自动生成CSS，例如https://github.com/sprity/sprity

• 像您当前正在使用的那样，使用一张Retina Sprite表。 我怀疑您遇到的问题是由于某些CSS，我们需要对其进行调试。

• 使用SVG精灵https://css-tricks.com/svg-sprites-use-better-icon-fonts/

• 使用嵌入式SVG，它可以消除网络请求。

很高兴提供有关上述任何方法的更多详细信息。

Answer 2

您可以尝试使用spritify工具https://www.npmjs.com/package/spritify

有演示应用程序演示如何使用它https://github.com/shadiabuhilal/spritify-example