Blurry Pixel Font: SpriteKit

It's amazing how modern Pixel Art captures the true simplicity yet also expressing creative masterpieces. I find so much solace staring at the world presented by games like Stardew Valley and Kynseed.

In my spare time I am making 2d pixel art game for iOS and macOS for my hobby. I found a free pixel art font called PixelDigivolve to use it for my texts. There was this behaviour that caught my attention where font was being rendered very blurry. The edges were not sharp.

SpriteKit has filtering mode called nearest-neighbour for rendering textures.

Each pixel is drawn using the nearest point in the texture. This mode is faster, but the results are often pixelated.

That is what we need for our pixel sprites. Example code:

mySprite.texture?.filteringMode = .nearest

Unfortunately I didn’t find similar option to render pixel fonts.

// The Workaround

The solution that I used was a trick where I rendered font in big size and scaled the node down. For example If I need my font to be of size 17 then I would use something like 34 and scale the node by 50%. The point of trick is to use big size and scale the node to your preference. This trick ensured I had crisp sharpness of my pixel fonts.

hud1 = SKLabelNode(fontNamed: “PixelDigivolve”)
hud1.fontSize = 20;

That has done trick for my need.