Drawing faded text more sustainably?

SDK Development Discussion
1

I'm curious if anyone has some sneaky methods to drawing text "faded" (as the SDK calls it), or basically with a dither applied to it? It's easy enough to deal with on a one-off basis, but when there's potentially many instances of it, it's becoming something cumbersome.

A simple enough way to draw a string out this way that I've used to prove the concept:

local testString = "Testing 1 2 3"
local currentWidth = 0
for i=1, #testString do
	local char = testString:sub(i, i)
	local width = gfx.getFont():getTextWidth(char)
	local img = gfx.getFont():getGlyph(char)
	
	img:drawFaded(currentWidth - 1, 0, 0.5, gfx.image.kDitherTypeBayer2x2)
	currentWidth = currentWidth + width
end

It works fine, but I'm not necessarily interested in recreating the SDKs perfectly good text drawing functions just to do this, if I don't need to. I'm also not sure how performant this would be if it needed to done for a few dozen separate strings potentially.

Any tips?

2

If you're drawing text on a solid colour background draw the text and then draw a pattern/fade/dither over it in the solid colour. Matrix screensaver does this.

If you're drawing on a patterned background, you could set a mask/stencil as the fade/dither.

With either of these you can precalculate your multiple fade overlay images, so there's no computation happening at draw time, just compositing.

2 Likes
3

Matt ninja'd me, but since I just worked this out myself, I'm still sharing!

Screenshot from 2022-07-05 16-20-22

import("CoreLibs/graphics")

playdate.graphics.drawText("*HELLO WORLD*",0,0)
playdate.graphics.setColor(1)
playdate.graphics.setDitherPattern(0.5, playdate.graphics.image.kDitherTypeBayer2x2)
playdate.graphics.fillRect(0, 0, 400, 240)

function playdate.update()
end
2 Likes
4

Very nice!

We need a way to run code samples in a web page. Or launch them into the Simulator.

ps: Bayer4x4 has the nicest fade :heart_eyes:

2 Likes
5

This is such a better solution than doing it per character LOL

:rofl:

2 Likes