Sprites in a grid view smearing when scrolling

SDK Get Help
,
1

Hiya!

Is there a way to get sprites to appear within each individual cell of a grid view without smearing on scroll?

I've been working with the list-style grid view code example, with my first attempt to put the sprite creation at the end of the draw cell function. I understand why this results in smearing (I assume each time the grid is updated for scrolling it's adding a new sprite?), but I'm unable to wrap my head around another way to do this.

    gridview:setNumberOfRows(10)
    gridview:setCellPadding(2, 2, 2, 2)

    gridview:setContentInset(4, 4, 4, 4)

    gridviewSprite = gfx.sprite.new()
    gridviewSprite:setCenter(0, 0)
    gridviewSprite:moveTo(20, 0)

    function gridview:drawCell(section, row, column, selected, x, y, width, height)

        if selected then
            gfx.setColor(gfx.kColorWhite)
            gfx.fillRoundRect(x, y, width, height, 4)
            gfx.setImageDrawMode(gfx.kDrawModeCopy)
        else
            gfx.setImageDrawMode(gfx.kDrawModeFillWhite)
        end
        local fontHeight = gfx.getSystemFont():getHeight()
        gfx.drawTextInRect(menuItems[row], x, y + 22, width, height, nil, nil, kTextAlignment.center)

        local newSprite = gfx.sprite.new(menuItems[row])

        newSprite:moveTo(x, y)
        newSprite:add()

    end

    gridviewSprite:add()

Thank you!

1 Like
2

Check this post. It has some sprite stuff in it, so it will not get the smearing issue you are having. It also has some other stuff built into it.

What I did was this:
Outside of playdate.update():

local gridviewSprite = gfx.sprite.new()
gridviewSprite:setCenter(0, 0)
gridviewSprite:moveTo(100, 70)
gridviewSprite:add()

And inside playdate.update():

local gridviewImage = gfx.image.new(200, 100)
gfx.pushContext(gridviewImage)
		gridview:drawInRect(0, 0, 200, 100)
gfx.popContext()
gridviewSprite:setImage(gridviewImage)

That worked for me.

3

Ah, sorry! I should have been clearer, I think. I'm doing the same thing as you -- pushing and popping context within update to update the drawing of the grid view image. That's working well, and as long as I use simple geometry and text within the cells of the grid it works fine.

But it's when I want to use sprites inside of those cells instead of just text or geometry that things start to break down. I've tried initializing the sprites separately and only updating their position inside of the draw function for the grid view cell, but it's a bit hacky and starts to mess up when the grid loops around.

IDK! I might just make my own grid view in this instance. :thinking:

Here's an example of that:

ezgif-4-6fdc5571c2

4

Hmm... I tried doing playdate.graphics.clear() in my playdate.update() but it seems to get quite laggy on my computer. Not sure if it is just my 10-yo laptop, or just that it does some frame-ratey stuff...