HTML and CSS Reference
In-Depth Information
Figure 15-5.
The left image shows how the particle sprite looks like when snapped to the grid at x:0, y:0. On the right
you can see how it looks like at x:0.75, y: 0.75. The green lines represent the outlines of the sprite pixels
Snapping sprites to the pixel grid is very easy; you just have to round the coordinates before drawing, like this:
x = Math.round(x);
y = Math.round(y);
If you rescale your sprites and want them to stay sharp, you have to scale them by an integer value; otherwise the
sprites pixels won't be aligned to the grid and the results will be interpolated.
Staying Sharp Using Less Pixels
What about lowering the resolution? The most practical case is a “divided by 2” resolution so the pixel grid is twice as
large and one pixel now covers the equivalent of four. It also means that you are rendering four times less pixels, and
as you've seen before, it may save a lot of work for the GPU. See Figure
15-6
.
Figure 15-6.
As you can see, snapping is even more important with a lower resolution. Since the grid is larger,
interpolated sprites look muddy, and in the case of text using a pixel font, it would probably be illegible
To snap your sprite to a twice as large grid, you will round odd coordinates to even ones, like so:
x = Math.round(x);
if((x & 1) === 1){ x-- } // (x & 1) returns
1
if
x
is odd
y = Math.round(y);
if((y & 1) === 1){ y-- }
Scaling is now much more constrained as you have to scale only by multiple of 2 if you want the sprites pixels to
cover an area that can be expressed in round pixels of the new grid. You can see in Figure
15-8
that by snapping our
sprites to a grid there is no visible difference compared with Figure
15-7
when halving the resolution.
