drawTextInRect causes frames to drop

SDK Get Help
,
1

Expected: using a playdate.ui.gridview with drawTextInRect would not cause frame drops
Actual: every second or so when drawing the gridview, a few frames drop

Note: found a solution, just use drawText instead of drawTextInRect. It seems to be much more performant.

Original title: "Grid view drops frames when using drawTextInRect" - I renamed the topic to be more accurate to the issue.

This only happens on device, not in the Simulator (as expected due to CPU differences). It happens when idling and not entering any input or changing the selected item in the gridview.

Using SDK 2.6.2. Code is written in Lua.

Details

I was digging into learning the Grid view from the SDK and noticed that the FPS kept dropping in my game when it wasn't before. So I thought I'd make an isolated example to try to see what the problem is. And it does in fact seem to be playdate.ui.gridview as the source of the frame drops.

Here's a sample from the profiler from my device:

Summary 
28.60%	0.00%	function graphics.lua:247	graphics.lua:414
	28.60%	0.00%	(...tail calls...)	
		28.60%	0.00%	method drawCell	main.lua:22
			28.60%	0.00%	method drawInRect	gridview.lua:491
				28.60%	28.60%	function main.lua:49	main.lua:55
4.11%	0.00%	local getLineWidth	graphics.lua
	4.11%	0.00%	function graphics.lua:247	graphics.lua:448
		4.11%	0.00%	(...tail calls...)	
			4.11%	0.00%	method drawCell	main.lua:22
				4.11%	0.00%	method drawInRect	gridview.lua:491
					4.11%	4.11%	function main.lua:49	main.lua:55
11.96%	0.00%	upvalue _originalGetTextSize	[C]
	11.96%	0.00%	function graphics.lua:519	graphics.lua:523
		11.96%	0.00%	(...tail calls...)	
			11.40%	0.00%	function graphics.lua:247	graphics.lua:487
				11.40%	0.00%	(...tail calls...)	
					11.40%	0.00%	method drawCell	main.lua:22
						11.40%	0.00%	method drawInRect	gridview.lua:491
							11.40%	11.40%	function main.lua:49	main.lua:55
			0.56%	0.00%	local drawLineAndMoveToNext	graphics.lua:406
				0.56%	0.00%	function graphics.lua:247	graphics.lua:494
					0.56%	0.00%	(...tail calls...)	
						0.56%	0.00%	method drawCell	main.lua:22
							0.56%	0.00%	method drawInRect	gridview.lua:491
								0.56%	0.56%	function main.lua:49	main.lua:55
0.56%	0.00%	local drawLineAndMoveToNext	graphics.lua
	0.56%	0.00%	function graphics.lua:247	graphics.lua:494
		0.56%	0.00%	(...tail calls...)	
			0.56%	0.00%	method drawCell	main.lua:22
				0.56%	0.00%	method drawInRect	gridview.lua:491
					0.56%	0.56%	function main.lua:49	main.lua:55
8.41%	0.00%	GC step	
	8.41%	0.00%	field updateTimers	timer.lua:270
		8.41%	8.41%	function main.lua:49	main.lua:50
5.61%	5.61%	function main.lua:49	main.lua:55
17.20%	0.00%	field updateTimers	timer.lua:362
	17.20%	17.20%	function main.lua:49	main.lua:50
0.19%	0.00%	field fillRect	[C]
	0.19%	0.19%	function main.lua:49	main.lua:54
4.30%	0.00%	upvalue drawAlignedText	graphics.lua
	4.30%	0.00%	local drawLineAndMoveToNext	graphics.lua:403
		4.30%	0.00%	function graphics.lua:247	graphics.lua:494
			4.30%	0.00%	(...tail calls...)	
				4.30%	0.00%	method drawCell	main.lua:22
					4.30%	0.00%	method drawInRect	gridview.lua:491
						4.30%	4.30%	function main.lua:49	main.lua:55
0.19%	0.00%	global pairs	[C]
	0.19%	0.00%	field updateTimers	timer.lua:357
		0.19%	0.19%	function main.lua:49	main.lua:50
3.18%	0.00%	method gmatch	[C]
	3.18%	0.00%	function graphics.lua:247	graphics.lua:426
		3.18%	0.00%	(...tail calls...)	
			3.18%	0.00%	method drawCell	main.lua:22
				3.18%	0.00%	method drawInRect	gridview.lua:491
					3.18%	3.18%	function main.lua:49	main.lua:55
0.75%	0.00%	field for iterator	[C]
	0.75%	0.00%	function graphics.lua:247	graphics.lua:426
		0.75%	0.00%	(...tail calls...)	
			0.75%	0.00%	method drawCell	main.lua:22
				0.75%	0.00%	method drawInRect	gridview.lua:491
					0.75%	0.75%	function main.lua:49	main.lua:55
3.18%	0.00%	upvalue match	[C]
	3.18%	0.00%	upvalue trimWhitespace	string.lua:14
		3.18%	0.00%	function graphics.lua:247	graphics.lua:464
			3.18%	0.00%	(...tail calls...)	
				3.18%	0.00%	method drawCell	main.lua:22
					3.18%	0.00%	method drawInRect	gridview.lua:491
						3.18%	3.18%	function main.lua:49	main.lua:55
2.99%	0.00%	function graphics.lua:519	graphics.lua:523
	2.99%	0.00%	(...tail calls...)	
		2.43%	0.00%	function graphics.lua:247	graphics.lua:464
			2.43%	0.00%	(...tail calls...)	
				2.43%	0.00%	method drawCell	main.lua:22
					2.43%	0.00%	method drawInRect	gridview.lua:491
						2.43%	2.43%	function main.lua:49	main.lua:55
		0.56%	0.00%	local drawLineAndMoveToNext	graphics.lua:406
			0.56%	0.00%	function graphics.lua:247	graphics.lua:494
				0.56%	0.00%	(...tail calls...)	
					0.56%	0.00%	method drawCell	main.lua:22
						0.56%	0.00%	method drawInRect	gridview.lua:491
							0.56%	0.56%	function main.lua:49	main.lua:55
1.50%	0.00%	upvalue _styleCharacterForNewline	graphics.lua
	1.50%	0.00%	local drawLineAndMoveToNext	graphics.lua:401
		1.50%	0.00%	function graphics.lua:247	graphics.lua:494
			1.50%	0.00%	(...tail calls...)	
				1.50%	0.00%	method drawCell	main.lua:22
					1.50%	0.00%	method drawInRect	gridview.lua:491
						1.50%	1.50%	function main.lua:49	main.lua:55
2.24%	0.00%	field drawText	[C]
	2.24%	0.00%	upvalue drawAlignedText	graphics.lua:347
		2.24%	0.00%	local drawLineAndMoveToNext	graphics.lua:403
			2.24%	0.00%	function graphics.lua:247	graphics.lua:494
				2.24%	0.00%	(...tail calls...)	
					2.24%	0.00%	method drawCell	main.lua:22
						2.24%	0.00%	method drawInRect	gridview.lua:491
							2.24%	2.24%	function main.lua:49	main.lua:55
0.37%	0.00%	upvalue getLineWidth	graphics.lua
	0.37%	0.00%	local drawLineAndMoveToNext	graphics.lua:406
		0.37%	0.00%	function graphics.lua:247	graphics.lua:494
			0.37%	0.00%	(...tail calls...)	
				0.37%	0.00%	method drawCell	main.lua:22
					0.37%	0.00%	method drawInRect	gridview.lua:491
						0.37%	0.37%	function main.lua:49	main.lua:55
0.93%	0.00%	method drawInRect	gridview.lua:491
	0.93%	0.93%	function main.lua:49	main.lua:55
2.43%	0.00%	field gsub	[C]
	2.43%	0.00%	upvalue _styleCharacterForNewline	graphics.lua:227
		2.43%	0.00%	local drawLineAndMoveToNext	graphics.lua:401
			2.43%	0.00%	function graphics.lua:247	graphics.lua:494
				2.43%	0.00%	(...tail calls...)	
					2.43%	0.00%	method drawCell	main.lua:22
						2.43%	0.00%	method drawInRect	gridview.lua:491
							2.43%	2.43%	function main.lua:49	main.lua:55
0.37%	0.00%	method drawCell	main.lua:22
	0.37%	0.00%	method drawInRect	gridview.lua:491
		0.37%	0.37%	function main.lua:49	main.lua:55
0.75%	0.00%	upvalue trimWhitespace	string.lua:14
	0.75%	0.00%	function graphics.lua:247	graphics.lua:464
		0.75%	0.00%	(...tail calls...)	
			0.75%	0.00%	method drawCell	main.lua:22
				0.75%	0.00%	method drawInRect	gridview.lua:491
					0.75%	0.75%	function main.lua:49	main.lua:55
0.19%	0.19%	GC

Here's a video recording of the issue:

The video goes through a few steps to demo the issue:

  1. Dropping 5+ frames regularly when refresh rate is set to 50
  2. Toggling off the gridview to show steady 50
  3. Dropping refresh rate to 30 and showing frames still dropping

Code

I've adapted and simplified some of the SDK example code for reproducing this. It draws a rectangle the size of the gridview to clear the screen then draws the gridview (variable name of listview). (A) button toggles its rendering to illustrate the issue. (B) toggles framerate between 30 and 50 FPS to show that it is happening at both 30 FPS and 50 FPS.

Here's a compiled version of the program where this happening:

gridview.pdx.zip (17.7 KB)

Here's the code:

source/main.lua 
import 'CoreLibs/ui/gridview.lua'
import 'CoreLibs/graphics'

local gfx = playdate.graphics
gfx.clear()

local menuOptions = {"Sword", "Shield", "Arrow", "Sling", "Stone", "Longbow", "MorningStar", "Armour", "Dagger", "Rapier", "Skeggox", "War Hammer", "Battering Ram", "Catapult"}

local listview = playdate.ui.gridview.new(0, 30)
listview:setNumberOfRows(#menuOptions)
listview:setCellPadding(0, 0, 13, 10)
listview:setContentInset(24, 24, 13, 11)

function listview:drawCell(section, row, column, selected, x, y, width, height)
	if selected then
		gfx.setColor(gfx.kColorBlack)
		gfx.fillRoundRect(x, y, width, 24, 4)
		gfx.setImageDrawMode(gfx.kDrawModeFillWhite)
	else
		gfx.setImageDrawMode(gfx.kDrawModeCopy)
	end
	gfx.drawTextInRect(menuOptions[row], x, y+6, width, height+10, nil, "...", 2)
end

function playdate.upButtonDown()
	listview:selectPreviousRow(true)
end

function playdate.downButtonDown()
	listview:selectNextRow(true)
end

local drawGridview = true

function playdate.AButtonDown()
	drawGridview = not drawGridview
	gfx.clear()
end

function playdate.BButtonDown()
	local fps = playdate.display.getRefreshRate()
	if fps == 50 then
		playdate.display.setRefreshRate(30)
	else
		playdate.display.setRefreshRate(50)
	end
end

function playdate.update()
	playdate.timer.updateTimers()

	if drawGridview then
		gfx.setColor(gfx.kColorWhite)
		gfx.fillRect(100, 12, 160, 200)
		listview:drawInRect(100, 12, 160, 200)
	end

	playdate.drawFPS(20, 20)
end

Next Steps

I would expect a lib included in the SDK to be well optimized, and it seems like the Playdate should be fast enough to render menus without dropping frames.

Am I using the library wrong in such a way that causes this performance issue?

Have others experienced this or found workarounds? While it seems minor, it's surprising and a little concerning. It makes me hesitate to use playdate.ui.gridview if it's going to cause my game to drop frames. If just using it alone causes that to happen, then if my game has other processing happening, I'd imagine it could be even worse.

Thanks!

2

Actually, sorry for the immediate response, but I changed gfx.drawTextInRect to be gfx.drawText in the listview:drawCell function to see if that made a difference, and it totally stopped from the frames from dropping.

Here's the diff:

diff --git a/gridview/source/main.lua b/gridview/source/main.lua
index 00d96e3..bf6359f 100644
--- a/gridview/source/main.lua
+++ b/gridview/source/main.lua
@@ -19,7 +19,7 @@ function listview:drawCell(section, row, column, selected, x, y, width, height)
 	else
 		gfx.setImageDrawMode(gfx.kDrawModeCopy)
 	end
-	gfx.drawTextInRect(menuOptions[row], x, y+6, width, height+10, nil, "...", 2)
+	gfx.drawText(menuOptions[row], x, y+6, width, height+10, nil, gfx.kWrapClip, gfx.kAlignCenter)
 end
 
 function playdate.upButtonDown()

To me this says that the problem isn't necessarily with the gridview but rather playdate.graphics.drawTextInRect. Good to know! I'm sure that function is quite a bit more complicated than just drawText. Since drawText supports a lot of the functionality (except truncation), it'll do the trick for my needs for now.

Based on all of this, it doesn't seem like there's actually a bug here with gridview or a bug at all. drawTextInRect is just an expensive call.

I'll leave this topic around instead of deleting it since maybe it'll help anyone else who uses the SDK Example code and notices this issue.

3

I was so curious how many drawTextInRects it would take to drop frames, and when running a game at 50 FPS, frames start to drop with 4 drawTextInRect calls.

So I can imagine that with how gridview works, if there are many items in the list, and if it's calling out to drawTextInRect very frequently, that it'd be slow and cause frames to drop in the gridview.

Here's the source code for exploring the different between drawText and drawTextInRect's performance. Their functionality is pretty similar. But drawTextInRect supports some nice truncation.

Summary 
import "CoreLibs/graphics"

local useRect = true
playdate.display.setRefreshRate(50)

function playdate.AButtonDown()
	useRect = not useRect
end

function playdate.update()
	playdate.graphics.clear()

	playdate.graphics.drawRect(40, 40, 80, 20)
	playdate.graphics.drawRect(40, 80, 80, 20)
	playdate.graphics.drawRect(40, 120, 80, 20)
	playdate.graphics.drawRect(200, 40, 80, 20)

	if useRect then
		playdate.graphics.drawTextInRect("*drawTextInRect*", 40, 40, 80, 20, nil, "..", playdate.graphics.kAlignCenter)
		playdate.graphics.drawTextInRect("*drawTextInRect*", 40, 80, 80, 20, nil, "..", playdate.graphics.kAlignCenter)
		playdate.graphics.drawTextInRect("*drawTextInRect*", 40, 120, 80, 20, nil, "..", playdate.graphics.kAlignCenter)
		playdate.graphics.drawTextInRect("*drawTextInRect*", 200, 40, 80, 20, nil, "..", playdate.graphics.kAlignCenter)
	else
		playdate.graphics.drawText("*drawText*", 40, 40, 80, 20, nil, playdate.graphics.kWrapClip, playdate.graphics.kAlignCenter)
		playdate.graphics.drawText("*drawText*", 40, 80, 80, 20, nil, playdate.graphics.kWrapClip, playdate.graphics.kAlignCenter)
		playdate.graphics.drawText("*drawText*", 40, 120, 80, 20, nil, playdate.graphics.kWrapClip, playdate.graphics.kAlignCenter)
		playdate.graphics.drawText("*drawText*", 200, 40, 80, 20, nil, playdate.graphics.kWrapClip, playdate.graphics.kAlignCenter)
	end

	playdate.drawFPS(20, 20)
end

function playdate.BButtonDown()
	local fps = playdate.display.getRefreshRate()
	if fps == 50 then
		playdate.display.setRefreshRate(30)
	else
		playdate.display.setRefreshRate(50)
	end
end

Given all of this, it seems like one should use drawTextInRect very intentionally and sparingly when considering performance. :dash:

1 Like
4

Which version of the SDK are you on? in 2.6.2 drawTextInRect got moved to C and is now much much faster. If you know the size of the space you want to draw text and it doesn't need to wrap, then drawText should always be preferred as it is much cheaper. DrawTextInRect needs to calculate the text size, find wrap points, calculate alignment and more.

1 Like
5

2.6.2. Great to know it's been moved to C. I was wondering if that was the case or not.

1 Like
6

Interesting, I wouldn't have thought it would still have quite that impact on lua to call it. I guess frame budgets are smaller at 50 fps. I've used up to around 25ish without noticing an impact at all, but I am working in C directly.