Pixel Art SpriteMaps and Responsive Design

Hello! I’m using Pixel Art Spritemaps for the “floor” texture of my pixel art game world, and it’s very tricky to get the sizes right so that the pixels line up perfectly with a screen’s pixels.

In this example, it looks all crisp and nice, perfectly isometric, because the canvas size is 512 x 512 (4 tiles line up perfectly horizontally, and 8 vertically)…

…but that all falls apart when the canvas size changes, and I get weird and ugly jagged edges.

tilesete

Is there a good way to approach this problem? I want the sprites to always display at the same size (the original size they’re at in the png file), regardless of canvas size.

Thank you for your time.

Hi TaleTitan,

Without code it’s hard to be 100% sure, but am I right in guessing that your game is isometric and using an orthographic camera? If so, all you should have to do to preserve that “pixel-perfect” look is change the size of the orthographic camera as the camera size changes.

Basically what you need is for the edges of your sprite pixels in world space to line up with the edges of your canvas pixels in screen space. To do this, establish a convention for how big each sprite pixel is in world space; for example, you might decide that each sprite pixel should be 0.01 world space units across. This means if you have a 128 pixel wide sprite, that sprite’s width in world space should be 1.28. Once you have this convention established, you can control how many “world-space pixels” your orthographic camera is rendering by setting the orthographic bounds in accordance with your convention. For instance, if you want your orthographic camera to render 512 “world-space pixels” across, you might set orthoLeft to -2.56 and set orthoRight to 2.56. Finally, to make this line up with screen-space pixels, all you have to do is set the orthographic parameters based on the canvas size. If you want a 1:1 world- to screen-space pixel correspondence and your canvas started at 512 pixels wide, your orthoLeft and orthoRight might be set as described above; but if your canvas then resized to be 574 pixels wide, all you should have to do is set orthoLeft and orthoRight to -2.87 and 2.87, respectively. As a formula, this looks something like the following:

// canvasPixelWidth = 574;
// worldSpacePixelWidth = 0.01;
// worldToScreenPixelRatio = 1;
const orthoCameraWidth = canvasPixelWidth * worldSpacePixelWidth * worldToScreenPixelRatio;
camera.orthoLeft = -orthoCameraWidth / 2;
camera.orthoRight = orthoCameraWidth / 2;

Hope this helps, and best of luck!

2 Likes

Hello just checking in, was your question answered? @TaleTitan