Assistance understanding the spriteWithText function

SDK Get Help
, , , ,
1

Howdy All,

I am very new to developing entirely and have been cutting my teeth on videos, examples, the SDK documentation, and making some self designed exercises. I will apologize now if my verbiage is incorrect or confusing.

I wanted to draw text to the screen to show the current value of a variable. I was able to do that, but saw that the text was being drawn every frame.

I did my digging and found that drawing the text to a sprite is a more optimized way of doing this and that there is 'spriteWithText'.

I tried just directly using playdate.graphics.sprite.spriteWithText in a function and passing in my text reference, but got several errors. Can anyone teach me what I need to do?

Here is a code snip with the relevant details.

local cardAction = "Not Set"

local function createCardActionSprite(text)
    gfx.sprite.spriteWithText(text)
    sprite:add()
    sprite:moveTo(225, 75)
end

createCardActionSprite("Card Action: " .. cardAction)

Down in the update function I will have actions to update the cardAction value to toggle between "Draw" & "Flip" with a button press and retrigger createCardActionSprite("Card Action: " .. cardAction) so it could update the sprite.

As I type that, I now think that will just add sprites to the screen, so I probably need to delete the previous sprite and then make the new one?

Thank you for your time and consideration,

1 Like
2

Close!

You have to store a reference to the sprite, then manipulate that:

local sprite = gfx.sprite.spriteWithText(text)
sprite:add()
sprite:moveTo(225, 75)

You can update it with sprite:setImage(gfx.imageWithText(text))!

2 Likes
3

If you're like I was when starting out, it might help to see this in context. For playdate.graphics.sprite.spriteWithText(), you need to define maxWidth and maxHeight or you'll get an error.

import "CoreLibs/graphics"
import "CoreLibs/sprites"

local pd <const> = playdate
local gfx <const> = pd.graphics

local cardAction = "Not Set"

local function createCardActionSprite(text)
	-- Create a sprite with the given text, width, and height
	local sprite = gfx.sprite.spriteWithText(text, 400, 240)  -- `maxWidth` and `maxHeight` are required
	sprite:moveTo(200, 120)  -- Center on display
	sprite:add()
end

-- It's often a good practice to create a variable for the text:
-- - Increases readability
-- - Makes the text reusable
-- - Simplifies maintenance and debugging
local text = "Card Action: " .. cardAction
createCardActionSprite(text)

function pd.update()
	gfx.sprite.update()
end

Although you can do this: createCardActionSprite("Card Action: " .. cardAction), it's generally not a best practice in my experience. Regarding maxWidth and maxHeight, I just used the display dimensions, but you could calculate them based on the text using playdate.graphics.font:getHeight() and playdate.graphics.font:getTextWidth(text). The nice thing about spriteWithText() is that it will truncate the text for you, and you can define the truncationString (e.g., …). Based on your description, you don't want to delete your sprite but just update it, as Gamma pointed out.

Here is what that would look like:

local function updateCardAction()
	local cardAction = "Set"
	local text = "Card Action: " .. cardAction
	local spriteText = gfx.imageWithText(text, 400, 240)
	sprite:setImage(spriteText)  -- Here you must create the image first and then set it for it to work
end

updateCardAction()
2 Likes
4

I'm setting the solution box to Jason, but both of yall gave excellent information to help me understand this!

Thank y'all both! :purple_heart:

2 Likes