Crisp pixels

Chapter 2’s Letterbox shows 320 by 180 of the street in any window, and draws it as large as the window allows. At 1280 by 720 that is four screen pixels to a unit, a whole number. A laptop’s 1366 by 768 is not a whole number of the street: it draws 4.27 screen pixels to a unit. A screen pixel cannot be cut, so the art’s pixels come out 4 and 5 screen pixels wide by turns, and as the watchman moves, which of his are 4 and which are 5 changes from one frame to the next. His outline shimmers. That is swimming.

The street’s stone stands still, so it never shows: only a sprite that moves across the screen does. And the window decides it. A game in a window of 1280 by 720 looks crisp; the same game on another screen does not.

A Pixel Perfect draws the world at a size of its own, the reference, and then makes the picture bigger by a whole number, the biggest that fits the window. Every art pixel is then a whole block of screen pixels, the same size as every other.

Under a Pixel Perfect the Camera’s Scaling does nothing: the Pixel Perfect chooses the scale. So Letterbox, its Extent and its Width are greyed, and their hover says so. They are left as chapter 2 set them: change the Scaling now and nothing in the picture changes. Problems says nothing about it either, since nothing is wrong. The Camera’s Zoom and Rotation are still read, and the section on zoom below says how.

The Pixel Perfect shows its reference in the Viewport too. With Crop Frame ticked the picture is the reference itself, so the camera’s frame is all there is to see. Untick it and pick a window with room left over, and the reference shows inside the frame.

The street is the same 320 by 180, from 0, -134 to 320, 46, in every window. What the window decides is the whole number, the biggest that fits, and where the picture sits:

At 1366 by 768 a Letterbox alone would have drawn 4.27 pixels to a unit; the Pixel Perfect draws 4 and leaves a border of 43 and 24 pixels. A smaller picture with whole pixels is the trade: in a window that is a whole number of the reference, 1280 by 720 or 1920 by 1080, there is no border at all.

The world is drawn at 320 by 180, one art pixel to a unit, and the picture is made 4 times bigger. With the Camera’s Pixel Snap ticked, as it is, every sprite is drawn on that grid: as he walks, his feet are often between two art pixels, and his picture is drawn on whole ones all the same. So the same art pixel is always the same block, and nothing swims.

To see it on your own screen, press Run game and drag the game’s window to any size: the street keeps its whole blocks, and the border round it grows and shrinks. The editor’s Viewport scales the game into its tab, as a phone’s narrow screen scales this page’s pictures, so it is the game’s own window that shows the art’s pixels as they are.

The Pixel Perfect chooses the whole number; the Camera’s Zoom multiplies it. A Zoom of 2 at 1280 by 720 is 4 × 2 = 8 screen pixels to a unit, and a view of 160 by 90. Try it, then put it back.

At a Zoom of 1 the picture is pixel-perfect. At any other zoom it is not, and neither is it while a zoom is under way: the art is drawn at a size the window’s grid does not divide. With Upscale Render Texture ticked, the zoom, and a Rotation, happen inside the 320 by 180 picture, so what reaches the screen stays on the art’s chunky grid. Chapter 7’s vista zooms out this way, and chapter 8 tilts the camera.

The Camera is chapter 2’s, untouched: Letterbox, Extent 180 and Width 320, which the Pixel Perfect leaves unread, Zoom 1, Offset 0, 16.