JavaScript sprite sheet use with normal and retina screens

Question

I'm looking for some advice. I've created a space invaders game which gets the spaceship and aliens from one sprite sheet. I work on a 5k retina screen and all looks well.

The issue is when I go onto a non-retina screen the ship/aliens sprite locations look wrong with the alien starting half way through. So an alien shows on screen as half of one alien and half of the other.

I'm putting this down to a retina issue and looking how to resolve it. The sprite image is been called through image() constructor and using on load. I then use drawImage to set the position on the sprite sheet to select the correct position on each alien. So no CSS used.

Do I need two sprite sheets one retina and one non-retina or are they some code that JavaScript will check what kind of screen is been used?

Is code needed or is this explanation good enough?

Edit

I have seen that I have made an error my browser on the non-retina screen was zoomed in at 110% this has caused the issue. So looks like it's with zooming the browser that the issue appears.

Answer 1

There are a number of ways you could approach this:

• Create two separate sprite sheets and use media queries to apply the correct styles based on device resolution media queries. This is labor intensive, so I would recommend a tool to build the sheet and generate the CSS automatically like https://github.com/sprity/sprity

• Use a single Retina sprite sheet, like you are currently doing. I suspect the issue you are having is due to some CSS, which we would need to see to debug.

• Use an SVG sprite https://css-tricks.com/svg-sprites-use-better-icon-fonts/

• Use inline SVG, which eliminates a network request.

Happy to provide more details about any of the above approaches.

Answer 2

You can try spritify tool https://www.npmjs.com/package/spritify

There is demo app that show how to use it https://github.com/shadiabuhilal/spritify-example