Pixel Art Sprites in SpriteKit

For Mountain Dash I decided to adopt a pixel art aesthetic, primarily as a way to keep the design of the graphics simple, but this choice has lead to its own challenges. I decided I would use a 16 x 32 pixel sprite but that I would render it at 32 x 64 points. Initially I was exporting my assets at 64 x 128 pixels for @2x and 96 x 192 pixels for @3x, but I figured that this was wasteful and there had to be a better way. So I decided to use only a 16 x 32 pixel image at 1x and scale the sprite to 32 x 64 points.

The following is what I got on my first attempt:

Blurry Sprite

The sprite is blurry because of how it is scaled up. Fortunately, this is a simple 1-liner to fix. All you need to do is set filteringMode on your textures (all of them) to .nearest.

let firstTexture = climberAtlas.textureNamed("climber_still")
firstTexture.filteringMode = .nearest
climber = SKSpriteNode(texture: firstTexture)

…and voilà the sprite is rendered pixel perfect as desired!

Sharp Sprite

Author: Mark

Mark is an American computer programmer living in Switzerland.