Fix Your PixelArt

Pixelart! Lots of pixel art going around as games try to recapture what was great about yesteryear hits. This may be about 5 years too late, but I wanted to list a few suggestions on how to make that pixel art more authentic… for the purists out there.

This is not a tutorial on pixel art, rather a list of specific issues that occur with PixelArt. But if you’re looking for PixelArt tutorials, I highly recommend Cure’s post from 2010 on Pixel Joint

I’m going to assume a basic knowledge of pixel art and whatever tool you use to create it.

Click or tap to see the solution for each problem:

Sub pixel woes

Pixels cannot rotate

Rotation appears smoother than it should

Pixel rotation is really common in faux-pixelart games. It’s easier to show and compare with a classic here:

Original ImageSimulated
Smooth
Rotation
Modified ImageSnes
Original
Rotation
Yoshi’s Island utilised lots of rotation and scaling effects. The original SNES screen (left) couldn’t rotate smoothly, so the artwork suffers from pixellated artefacts when rotated. Note how smooth the background lines are compared to the SNES original.

So why does this happen on modern games? Because the whole game is set a much higher resolution than the artwork, and the artwork is handled as if it’s a large graphic, not tiny pixelart.

In this example, the original SNES scene was operating at a resolution of 256×224, incredibly low resolution when compared to the standard 1920×1080 sizes today. When the sprites are rotated in this small scene the artwork is readjusted within that low resolution, which creates messy artefacts as the sprite is rotated.

When using the same artwork scaled up to 1080p, the screen has a high enough resolution to show each of these pixels rotated without creating any artefacts. While smoother certainly sounds better, it’s inauthentic. Older games wouldn’t of been able to do this, so smooth is wrong!

Solution 1 – Scale

The game resolution needs to match the artwork, so the pixels can transform correctly at this low resolution – then the game can be scaled up to fill the screen. Anti-aliasing also needs to be turned off to avoid blurring.

A good example of a modern game doing this well is Nuclear Throne. The entire game operates at 320 x 240, then scaled up to fit modern screens. This means rotation looks as it should – messy and low res!

Nuclear Throne ScreenshotNuclear Throne Screenshot
Nuclear Throne uses lots of rotated items. On the left you can see the gun held by the central character is rotated slightly. On the right, mayhem ensues.

Solution 2 – Customise

Actual object rotation at a low resolution and with aliasing artefacts can look terrible. So an alternative approach would be to create the artwork at different angles. This was the case for Sonic running around (at the speed of sound) curved platforms and loops:

Example showing a Sonic the Hedgehog sprite
Left: Sonic’s base running sprite for flat surfaces.
Middle: Sonic’s base running artwork rotated.
Right: Customised artwork for this angle. The customised artwork looks much clearer, but obviously is more time consuming to create.

Half-pixels should not exist

Pixels should snap to the pixel grid

Another sub-pixel issue is common with sprite movement. You might see a character positioned half-a-pixel out from the background, which is a dead give away.

All sprites should snap to the original smaller resolution – think of it having to fit within a grid. If a character moves to the right, they should move the equivalent of one pixel in the artwork, not 1 pixel in whatever higher resolution you’re using. Otherwise you end up with pixel art misaligned with the rest of the artwork.

There is no such thing as half a pixel, so the sprites shouldn’t be positioned half-way through a pixel.

“Example
Mario’s big nose (among other parts) protrudes half way through the next pixel, it really should be snapping to the artwork’s grid.

Solution

The game resolution needs to match the artwork, so the pixels can transform correctly at this low resolution – then the game can be scaled up to fill the screen.

Pixel Density Wonk*

Pixels are of different sizes

If you’re scaling up pixel art, then every pixel needs to be the same size. Let’s quickly talk pixel density:

“Scaled
Every pixel has been scaled consistently

In this example, the image is scaled up so each pixel is 10 pixels width and height. Quite simply, all artwork on screen should be the same size. It’s common to see varying pixel density in games, and using the same Streets of Rage example:

“Example
Two Axels, one is a dirty fraud and should not be in this scene.

The second character is set to a different scale (at 6 pixels width and height), clashing with the rest of the artwork and breaks the consistency and authenticity.

Solution

Create all artwork at the same size, then scale everything up to exactly the same scale. You should be creating the artwork to the right size, not scaling it after to fit your scene.

* I’d like to thank SpiltMilkStudios for this term

Other issues

Use semi-transparency wisely

Even the mighty Sega Saturn struggled with semi-transparency

Technically speaking there are classic games out there that use semi-transparency nicely:

“Super“Super“Super
Super Metroid, Super Punch-Out, Super Mario World – How super of the SNES!

But more commonly semi-transparency would not of been possible. Either your pixels are on (opaque) or off (transparent). Nothing in between.

Solution

In my opinion semi-transparency should be avoided, as there are lots of great ways to achieve the effect of semi-transparency which also add to the retro feel. Just see what some classic games did:

Mesh

“Streets

Meshes and other types of dithering can be used.

Flashing

“Sonic

By rapidly turning the image on and off we get a sense of transparency.

Colour changes

“Sonic

By changing the colour we get a sense of something in front of the usual artwork.

Use it sparingly

“Super

Technicalities aside, the Snes allowed limited semi-transparency. All semi-transparent objects had to be the same opacity.

Bonus: Vertical mesh

Original ImageSimulated
Output
Modified ImageMegaDrive
Original
The vertical dithering helps create an in-between colour on the sand dunes

Note the vertical dithering Aladdin used – it looks odd on a clear modern screen, but worked very well for blurry old MegaDrive cables and how the image is processed/garbled. While the above effects may look odd now they worked a charm originally.

8-bit ≠ pixel art.

Limiting yourself to match hardware limitations

People often refer to pixel art as a whole as an “8-bit style” (which is so wrong), but if your game truly is an “8-bit” emulation, then go by those limitations – see how the NES handles sprites, especially in the low-colour limitations.

Of course our modern computers can (relatively) do anything we want, so we can break those limitations – but if you want it to look authentic, keep them in mind.

Solution

For the purists out there, you can use exact palettes from the system:
Wikipedia: Video Game colour palettes

Otherwise it’s a case of researching. And by that I mean playing the classics. See how it was done there and learn from it!

A great example of a game doing this well is Shovel Knight. Although the devs admitted it wouldn’t run on an actual NES, the aesthetic and feel of the game makes it feel like some kind of long-lost NES classic.

“ShovelKnight

Can you think of any others? Hopefully that’s of some use, but if there are any other common issues let me know and I’ll add them in!

Comments?

Let me know on Twitter