With integer scale factors, drawScaled distorts images horizontally unless power of 2

image:drawScaled with an integer scale factor (such as 3x) should expand every pixel into the same number of scaled pixels.

Instead, the scaled result has the leftmost column of pixels in the source image expanded extra wide: 1 px extra. And the rightmost column of the source is extra narrow: 1 px lost. (No such distortion on the vertical.)

This only happens with scaling factors that are not powers of 2.

Reproducible with this main.lua that tests scale factors from 2 to 12. A simple 2x2 checker image is scaled to each size.

Notice the left column being wider than the right at most scalings. All show the problem except for factors 2, 4, and 8.

import "CoreLibs/graphics"

local gfx <const> = playdate.graphics

function playdate.update()

gfx.setPattern({0xaa, 0x55, 0xaa, 0x55, 0xaa, 0x55, 0xaa, 0x55}) --(1 px checker dither to help measure the scaled images)

gfx.fillRect(0, 0, 400, 240)

function drawScaledTest(x,y, scale)
	local image2x2 = gfx.image.new(2,2)
		gfx.fillRect(0,0, 2,2)
	image2x2:drawScaled(x,y, scale)

drawScaledTest(0,0,   2 ) --2 tests OK
drawScaledTest(30,0,  3 )
drawScaledTest(60,0,  4 ) --4 tests OK
drawScaledTest(90,0,  5 )
drawScaledTest(120,0, 6 )
drawScaledTest(150,0, 7 )
drawScaledTest(180,0, 8 ) --8 tests OK
drawScaledTest(210,0, 9 )
drawScaledTest(240,0, 10)
drawScaledTest(270,0, 11)
drawScaledTest(300,0, 12)

The output of that:
Uneven drawScale example
The second image, scaled 3x, is the most obvious (if you zoom in).
2x (right at the corner) and 4x. on either side of that, are fine.

1 Like