我正在寻找一些建议。我创造了一个太空侵略者游戏，从一个精灵表中获取太空飞船和外星人。我在5k视网膜屏幕上工作，看起来都很好。
问题是，当我进入非视网膜屏幕时，外星人的精灵位置看起来与外星人开始中途有误。因此，一个外星人在屏幕上显示为一个外星人的一半而另一半是另一半。
我将此归结为视网膜问题，并着眼于如何解决它。精灵图像是通过image（）构造函数调用并在加载时使用的。然后我使用drawImage设置精灵表上的位置，以选择每个外星人的正确位置。所以没有使用CSS。
我是否需要两个精灵表单一个视网膜和一个非视网膜，或者它们是一些代码，JavaScript会检查使用了哪种屏幕？
是否需要代码或这个解释是否足够好？
修改
我看到我发错了我的非视网膜屏幕上的浏览器放大了110％这导致了这个问题。所以看起来像是在缩放浏览器时出现问题。
答案 0 :(得分：1)
有很多方法可以解决这个问题：
创建两个单独的精灵表，并使用媒体查询根据设备分辨率媒体查询应用正确的样式。这是劳动密集型的，所以我建议使用工具来构建工作表并自动生成CSS，如https://github.com/sprity/sprity
使用单个Retina精灵表，就像您目前所做的那样。我怀疑你遇到的问题是由于一些CSS，我们需要调试它。
使用SVG精灵https://css-tricks.com/svg-sprites-use-better-icon-fonts/
使用内联SVG，它可以消除网络请求。
很高兴提供有关上述任何方法的更多详细信息。
答案 1 :(得分：0)
您可以尝试spritify工具https://www.npmjs.com/package/spritify
有一个演示应用程序，展示如何使用它https://github.com/shadiabuhilal/spritify-example