An example of text in a sprite that can be updated

SDK Get Help
1

I am looking for an example of text in a sprite (which I am able to do) that will update when the text is changed. Right now I have a text in a rect that is able to display the initial text, but no updates after that. If I set "textboxDial.currentText" to something it properly displays that text.

local gfx = playdate.graphics

-- setup textboxDial sprite
textboxDial = gfx.sprite.new()
textboxDial:setSize(45, 35)
textboxDial:moveTo(140, 135)
textboxDial:setZIndex(899)
textboxDial.text = ""
textboxDial.currentText = ""

function textboxDial:draw()

	gfx.pushContext()		
		gfx.setColor(gfx.kColorWhite)
		gfx.fillRect(0,0,45,35)
		
		gfx.setLineWidth(4)
		gfx.setColor(gfx.kColorBlack)
		gfx.drawRoundRect(0,0,45,35,4)
		

		gfx.drawTextInRect(self.currentText, 0, 0, 30, 30)
		--gfx.drawText(self.currentText, 0, 0)
	
	gfx.popContext()
end

Then in playdate.update the 88 does not show up. Eventually this will be a variable that changes depending on other events:

 textboxDial.text = "88"
gfx.sprite.update()

Thanks for any help!

2

I ran into this problem too! You need to mark the sprite as dirty so that the OS knows it has to redraw the sprite. The easiest way I found to do this was add a "setText(string)" method that updates the property, then invokes "self:markDirty()". Then instead of changing the text property directly, invoke this new method.

2 Likes
3

I am realizing I have other issues going on in the code: like textboxDial.text is not used. I modified this code from the popup animated typing text box.

4

Ok so I have it working now with update(), although the drawTextInRect crashes it, but drawText on it's own works fine and the values update.

textboxDial = gfx.sprite.new()
textboxDial:setSize(45, 35)
textboxDial:moveTo(140, 135)
textboxDial:setZIndex(899)
textboxDial.currentText = ""

function textboxDial:update()
	textboxDial.currentText = actualNum
	self:markDirty()
end

function textboxDial:draw()

	gfx.pushContext()		
		gfx.setColor(gfx.kColorWhite)
		gfx.fillRect(0,0,45,35)
		
		gfx.setLineWidth(4)
		gfx.setColor(gfx.kColorBlack)
		gfx.drawRoundRect(0,0,45,35,4)
		
		print("Curr Text: " .. self.currentText)
		--gfx.drawTextInRect(self.currentText, 0, 0, 30, 30)
		gfx.drawText(self.currentText, 5, 5)
	
	gfx.popContext()
end