Incosistent Slowdown when showing a GridView

SDK Bug Reports
,
1

Hello people!

I've been hard working on a game, and am running into a weird issue. I'm using a custom Sprite to manipulate a GridView based menu.
I can create, and show it exactly the way I want it, but when it is visible, when running on console, I get random spikes of slowdown as I'm scrolling through the list.

I'm not too sure what is the origin of it, but I know it only happens when the grid is "active" (drawn on or offscreen) and become slightly more manageable when reducing the number of items (but I don't think the list size should be an issue.

Here is what I have in my main.lua

import "CoreLibs/object"
import "CoreLibs/graphics"
import "CoreLibs/sprites"
import "CoreLibs/ui"

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

class('Menu').extends(playdate.graphics.sprite) 

function Menu:init()
    Menu.super.init(self)

    MenuData = {
        {name= "A Dummy", number = "(000) 0000"},
        {name= "B Dummy", number = "(000) 0000"},
        {name= "C Dummy", number = "(000) 0000"},
        {name= "D Dummy", number = "911"},
        {name= "E Dummy", number = "(000) 0000"},
        {name= "F Dummy", number = "(000) 0000"},
        {name= "G Dummy", number = "(000) 0000"},
        {name= "H Dummy", number = "(000) 0000"},
        {name= "I Dummy", number = "(000) 0000"},
        {name= "J Dummy", number = "(000) 0000"},
        {name= "K Dummy", number = "(000) 0000"},
        {name= "L Dummy", number = "(000) 0000"},
    }

    self.listview = ui.gridview.new(0, 25)
    self.listview:setNumberOfRows(#MenuData)

    function self.listview:drawCell(section, row, column, selected, x, y, width, height)  
        if selected then
            gfx.setColor(gfx.kColorBlack)
            gfx.fillRoundRect(x, y, width, height, 4)
            gfx.setImageDrawMode(gfx.kDrawModeInverted)
        else
            gfx.setImageDrawMode(gfx.kDrawModeCopy)
        end
        
        -- Name first
        local shownName = MenuData[row].name
        local txtY = y+5
        local txtPad = 10
        local nameW = (width*0.5) - 2*txtPad
        gfx.drawTextInRect(shownName, x + 10, txtY, nameW, height, nil, "...", kTextAlignment.left)
        
        -- Number then
        local numberW = (width*0.5) - txtPad
        gfx.drawTextInRect(MenuData[row].number, x + nameW + 2 * txtPad, txtY, numberW, height,nil, "...", kTextAlignment.right)

        -- Separator
        local offsetW = (nameW - gfx.getTextSize(MenuData[row].number))
        --separatorImg:drawTiled(x + nameW + txtPad*1.5, y+height-4, offsetW, 2)
        --gfx.drawTextInRect("........", x + nameW + txtPad, txtY, offsetW, height, nil, "", kTextAlignment.center) 
    end

    self:setSize(400,240)
    self:setCenter(0,0)
    self:moveTo(0,0)
end

function Menu:draw()
    local _, selected = self.listview:getSelection()
    local depth = (selected/#MenuData)
    self.listview:drawInRect(0, 0, 255,240)
    gfx.setColor(gfx.kColorBlack)
end

function Menu:update()
    if self.listview.needsDisplay == true then
        self:markDirty()
    end
end

menuThing = Menu()
menuThing:add()

function playdate.update()
    if menuThing.listview.needsDisplay == true then
        menuThing:markDirty()
    end

    gfx.sprite.update()
    playdate.timer.updateTimers()
end

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

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

You should get this on screen

image
image819×497 3.18 KB

And scrolling up and down using the D-Pad will show (after a while) some spikes in the Lua Sampler

image
image1918×181 4.57 KB

I'm supposing this is a bug because I can't see what I'm doing wrong here, but please call me out if I got something wrong :slight_smile:

2

Could be the same issue as drawTextInRect docs need to contain a warning :), looks like you might just be making more drawTextInRect calls per frame than the device can handle. People in that thread reported that drawText has much better performance.

If you need the extra functionality of drawTextInRect, then caching the drawn text in an image for each cell could be a good option.

2 Likes