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