imageWithText alignment because unusable since we cant set the size of the image

So, if you notice the method imageWithText

playdate.graphics.imageWithText(text, maxWidth, maxHeight, [backgroundColor, [leadingAdjustment, [truncationString, [alignment, [font]]]]])

notice you can only set max Width and max Height. You cannot set a fixed width and fixed height.

And because of that, setting an alignment will be always pointless since the size of the image will keep changing if we are to change the text, making the image change position if we are to use it in a sprite.

Example:

    local img = gfx.imageWithText(self.valuestr, 1000, 1000, playdate.graphics.kColorClear, nil, nil,
        kTextAlignment.right,
        fontTable[FontTypes.pixelstad])

    self.overNumber:setImage(img)

Result:

alignment

Notice the number is not aligning right, because the image is getting made with a different size each frame.

So I would request this method to have maybe another signature to allow for a fixed size of width and height, so alignment can work.

debugChicken Bug Report Table:

Number: 2
Severity: Medium
Cringeness: Low (seems an understandable overlook)

The playdate.graphics.imageWithText() function exists so that you can easily cache text into image so it can be redrawn quickly later. Alignment only really comes into play if your text spans multiple lines. Drawing into a specifically-sized image is beyond the scope of what it intends to accomplish.

If you do want to draw text into a fixed size image, that should be easy enough to implement yourself using the existing text drawing methods and playdate.graphics.lockFocus(image) / playdate.graphics.lockFocus().

However, if your text is changing constantly, as it seems to be in this case, there may not be a performance benefit to first drawing the text to an image. You could instead just use the existing text drawing methods like playdate.graphics.font:drawTextAligned() or playdate.graphics.drawTextInRect() to draw the text directly, aligned in the way you prefer.

If you really do want to use playdate.graphics.imageWithText() (maybe you're saving the cached images into a table so you only have call this method once for each number, for example), you could draw the resulting image aligned in the way you like using playdate.graphics.image:drawAnchored() or playdate.graphics.image:drawCentered(), or by just doing the alignment math manually.

I hope that helps!

2 Likes

Thank youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu the lock focus did the trick indeed!!

but I still find weird that this method has an alignment, seems it wont reliably work in any situation, since the image will always be tight-cropped.

ohh maybe for multiple lines of text? I wonder

another method or parameter to set a fixed size would be good

Yes, alignment is only useful if the text you are drawing spans multiple lines.

1 Like