90° Rotatable Text

I'd like to be able to rotate text on 90° increments; I have some UI ideas I'd like to try for vertically scrolling views, and while I could use an image with the rotated text pre-baked, that seems like a hacky workaround for text in the longterm.

1 Like

I don't think there is a function to draw the text rotated but there is a technique you can use to do it.
You just have to render the text into an image and after you draw the image.

local textString = "Hello World"
local textWidth = 200
local textHeight = 50
local textImage = playdate.graphics.image.new( textWidth, textHeight)
playdate.graphics.pushContext( textImage )
playdate.graphics.drawTextInRect( textString, 0, 0, textWidth, textHeight)
playdate.graphics.popContext()

local textImageRotated = textImage:rotatedImage( 90 )

Ideally you do that not every frame but only when at the start and when the text changes.

4 Likes

Ah ok, that sounds super useful, thanks!

I would add that unless your text is going to be changing a lot, it's not a bad idea to render it into an image anyway, whether you plan to rotate it or not. Doing text layout in the update loop could be quite slow.

(Actually my personal preference would almost always be to render it into a sprite, and have the dirty-tracking done for me. Plus, rotation will be trivial then.)

I hadn’t realized I could do that from my experiments with the SDK thus far — now that I know I can do that, it does seem like the way to do that efficiently. Thanks!

Is there an equivalent method for doing this in C? The C API doesn't have a drawTextInRect equivalent, as far as I can tell.

There isn't a direct C equivalent to drawTextInRect(), but I'll file it as a feature request.

In the meantime, the Lua source code for that function is available (see CoreLibs/graphics.lua in the SDK folder) if you want to use it as a model to write your own.