I found this link helpful because I'm trying to do something very similar. However... I er... can't seem to figure out how to get my image to appear like they're doing here.
Text, no problem. But an image I seem to only run into troubles. It seem trivial, but man am I stuck. Anyone know how this is pulled off?
I've figured it out! I was confused at first because I trying to follow an example I found in the documentation, this one here.
I was thinking, if it's call a lot a sprite will be added to the display list every time right? Then it would be a memory leak. And it's true X....X, when testing I got up to 4k sprites in my display list, not ideal.
I ended up landing on this here.
function showShopUpgrades()
clearScreen()
bgSetBackgroundBorders(BackgroundBorders.Game)
selected = true
buttons={
Button(77,226,ButtonSize.Large,"Back",true)
}
upgrades = { {"Fuel", "Efficiency"}, {"Brick Breaker", "Speed"}, {"Feed", "Shredder"}}
gridview = pd.ui.gridview.new(0, 32)
print("What is "..#upgrades)
gridview:setNumberOfRows(#upgrades)
gridview:setNumberOfColumns(2)
gridview:setCellPadding(2, 2, 2, 2)
-- gridview.backgroundImage = gfx.nineSlice.new("images/bg/gridBackground", 6, 6, 20, 20)
gridview:setContentInset(5, 5, 5, 5)
gridviewSprite = gfx.sprite.new()
gridviewSprite:setCenter(0, 0)
gridviewSprite:moveTo(pdEdges.Left+4, pdEdges.Top + 10)
gridviewSprite:add()
showGridView = true
--##### Setting Up upgrade Sprites #####
upgradeSprites[1][1] = gfx.sprite.new(upgradesFuelImage[1])
upgradeSprites[1][1]:setZIndex(Layers.Layer1Middle)-- This is just for right now Change later!!!!!!!
upgradeSprites[1][1]:add()
upgradeSprites[1][2] = gfx.sprite.new(upgradesEfficiencyImage[1])
upgradeSprites[1][2]:setZIndex(Layers.Layer1Middle)-- This is just for right now Change later!!!!!!!
upgradeSprites[1][2]:add()
upgradeSprites[2][1] = gfx.sprite.new(upgradesBrickBreakerImage)
upgradeSprites[2][1]:setZIndex(Layers.Layer1Middle)-- This is just for right now Change later!!!!!!!
upgradeSprites[2][1]:add()
upgradeSprites[2][2] = gfx.sprite.new(upgradesSpeedImage[1])
upgradeSprites[2][2]:setZIndex(Layers.Layer1Middle)-- This is just for right now Change later!!!!!!!
upgradeSprites[2][2]:add()
upgradeSprites[3][1] = gfx.sprite.new(upgradesFeedImage[1])
upgradeSprites[3][1]:setZIndex(Layers.Layer1Middle)-- This is just for right now Change later!!!!!!!
upgradeSprites[3][1]:add()
upgradeSprites[3][2] = gfx.sprite.new(upgradesShredderImage[1])
upgradeSprites[3][2]:setZIndex(Layers.Layer1Middle)-- This is just for right now Change later!!!!!!!
upgradeSprites[3][2]:add()
function gridview:drawCell(section, row, column, selected, x, y, width, height)
print("row: "..row.." column: "..column)
--print(gfx.sprite.spriteCount())
upgradeSprites[row][column]:moveTo(x + width + 100, y + (height/2) + 5)
if selected then
gfx.fillRoundRect(x, y, width, height, 4)
gfx.setImageDrawMode(gfx.kDrawModeFillWhite)
else
gfx.setImageDrawMode(gfx.kDrawModeCopy)
end
local fontHeight = gfx.getSystemFont():getHeight()
gfx.drawTextInRect(upgrades[row][column], x, y + (height/2 - fontHeight/2) + 25, width, height, nil, nil, kTextAlignment.center)
end
end
One odd thing though, not to muddy the waters, but I'm getting some overlap the first time I go to the screen, then it changes when I move. Weird right?
Gridview was not designed to work well with sprites. Rolling your own grid implementation here would probably give you a lot fewer headaches.
(That said, now I'm wondering if we should provide a different CoreLibs spriteGridView that would work for your needs!)
I can only speak for myself, but that would be an amazing addition to the SDK! Lists and menus featuring images are likely common enough that it would have lots of applications. I ended up implementing a grid system of my own for the game I'm working on, and I would have loved to have an official implementation of this through the SDK at the time.
The link to the other forum thread? Doing this might work okay for you:
As long as the grid view itself isn't doing any extra drawing, doesn't have a background image, etc. That said, I haven't actually tried this so there may be caveats I'm not thinking of now. Selection highlighting might get tricky, for example. You'll also need to pay attention to the order in which you're drawing your grid and your sprites via Playdate.graphics.sprites:update() (you'll probably want to draw the sprites first).
I'll look into. Although I'm getting the vib that I'll just have to create my own. I just saw that post and was like yeah that's what I want to do too so I figured it was more well known on how to pull it off. I also figured that since gridview already had the animation the select events and such that it would be a win win.
