How to make a 64x64 game?

Setting up for LOWREZJAM in plain old JavaScript is very simple. There are however a few things to take note of in regards to making everything pixel perfect. This isn't a tutorial on how to make games in JS, it's specifically about achieving a pixel perfect result.

Firstly, creating your canvas in HTML.

This will be very small though, so we need to scale it up in CSS. Note this only changes the display size, not the actual size of the canvas. Essentially, stretching it.

#canvas {

width: 640px;

height: 640px;

}

Leaving it at that though will cause the canvas to appear blurry. We can fix this using the image-rendering property in the CSS. We provide 2 values for this property as a fallback for eachother; Firefox prefers crisp-edges and Chrome only allows pixelated.

#canvas {

width: 640px;

height: 640px;

image-rendering: pixelated;

image-rendering: crisp-edges;

}

The full setup should then look something like this.

<html>

<head>

<style>

#canvas {

width: 640px;

height: 640px;

image-rendering: pixelated;

image-rendering: crisp-edges;

}

</style>

</head>

<body>

</body>

</html>

Now that the canvas is set up on the page we can think about drawing stuff. I'll assume the use of the Canvas API, for basic 2D drawing. As this has some flaws worth noting. We can get our canvas and the drawing context like so.

const canvas = document.getElementById("canvas");

const ctx = canvas.getContext("2d");

One of the issues is drawing images. When scaled or rotated they may still appear blurry. We can fix this with the imageSmoothingEnabled property.

ctx.imageSmoothingEnabled = false;

Note that this value can get reset if you're using ctx.save/restore or you resize the canvas. So it's usually a good bet to set this to false every frame before drawing images.

The second issue is the biggest. And an incredibly dissapointing flaw in the Canvas API. Vector Graphics. You can not disable the anti-alising. So this means that, out of the box, you can't do pixel-perfect lines, circles or text.

Now to draw shapes like rectangles and circles you could prerender them as images and draw the images scaled/rotated as desired. This'll be pixel-perfect thanks to the previous step of disabling imageSmoothingEnabled.

Lines are not so easy. Using an image would work but may have some distracting overdraw. The best way to get a perfect line would be to manipulate the pixels manually using ctx.getImageData and ctx.putImageData. See this article for more information on this: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

Pixel perfect text can also be acheived with images. It's just a bit of a chore organizing every character you need as an image (or part of an image) and then rendering them with all the correct spacings and line breaks.

And that's that for this JS LOWREZJAM setup guide. I hope it helps, and highlights some of the pitfalls of doing it from scratch this way. If there's anything else you think would be helpful here, then please contact us!