JavaScriptスプライトシートを通常のスクリーンと網膜スクリーンで使用する

Question

私はいくつかのアドバイスをお探ししています。私は1つのスプライトシートから宇宙船と宇宙人を得る宇宙侵略ゲームを作りました。私は5k網膜スクリーンで作業し、すべてがよく見えます。

問題は、私は非網膜画面上に行くときに船/外国人のスプライトの位置は、外国人が通過途中を開始すると間違って見ています。だから、エイリアンは画面上で、エイリアンの半分と他の半分として表示されます。

私はこれを網膜の問題に置き、解決方法を探しています。スプライトイメージは、image（）コンストラクタを通じて呼び出され、ロード時に使用されます。 drawImageを使ってスプライトシート上の位置を設定して、各エイリアンの正しい位置を選択します。 CSSを使用していません。

は、私は2枚のスプライトシート1人の網膜と一つの非網膜を必要とするか、彼らはJavaScriptが使用されている画面の種類をチェックするいくつかのコードですか？

コードが必要ですか、この説明は十分ですか？

編集

私は非網膜画面上の私のブラウザがこの問題を引き起こしている110％にズームインしたエラーをしたことを見てきました。それで、ブラウザをズームして問題が表示されるように見えます。

Answer 1

あなたは、このアプローチができ、いくつかの方法があります。

• 、2枚の別々のスプライトシートを作成し、デバイスの解像度メディアクエリに基づいて、適切なスタイルを適用するためにメディアクエリを使用しますが。これは労働集約的なので、シートを作成して自動的にCSSを生成するツールをお勧めします。

• 現在行っているように、1枚のレティーナスプライトシートを使用してください。あなたが持っている問題は、デバッグするのに必要ないくつかのCSSが原因であると思われます。

• は

• https://css-tricks.com/svg-sprites-use-better-icon-fonts/

ネットワーク要求を排除する使用インラインSVGを、SVGスプライトを使用します。

上記のアプローチのいずれかについての詳細は、幸いです。

Answer 2

あなたはそれをhttps://github.com/shadiabuhilal/spritify-example