list image and text on same row until reach end of line

Solar2D General Questions/Discussion
#1

I’m trying to create an “Upgrade button”, which would contain several icons (representing a resource type), numbers (the cost) and the “Upgrade word”, something similar to what I have already built (see attached screenshot).

My challenge is to include all the elements in a single “button” with a specified max length (same as the green rectangle). The thing is that I don’t always have 6 resources, so in some cases they will be displayed on one line, two or even three lines so I need to find a reliable way to display them on several lines if needed. I also need to group them into a single button.

From what Iäve tested, a Display group cannot have a width and height that can group several elements together.

My current code is:

local upgradeBlock = display.newGroup()       upgradeBlock.x = 0        -- simplified     upgradeBlock.y = 800    -- simplified         local buildingUpgradeCost = ''     local totalLength = 0     local offset = 0          for row in globalData.db:nrows([[SELECT buildingsBonuses.costResource, ....]]) do          local resourceImage = display.newImageRect(upgradeBlock, "images/"..row.name..".png", 60 , 60 )       resourceImage.x = totalLength          resourceImage.y = offset       resourceImage.anchorX = 0       resourceImage.anchorY = 0              totalLength = totalLength + resourceImage.width + 10       local buildingUpgradeButtonOptions = {         parent = upgradeBlock,          text = costLevel,          x = totalLength,          y = offset       }       local buildingUpgradeCost = display.newText( buildingUpgradeButtonOptions )       buildingUpgradeCost.anchorX = 0    -- Sets the origin to the top edge of the object       buildingUpgradeCost.anchorY = 0    -- Sets the origin to the top edge of the object              totalLength = totalLength + buildingUpgradeCost.width + 2 \* spacingBetweenBlocks       if (totalLength \>= globalData.bonusesTable.width) then         totalLength = 0         offset = 60     end

Do you see a better way to do that?

#2

There are thousands of different ways of approaching this.

The simplest idea in general, in my opinion, is to strictly state how many entries can at most be per one row. Then you simply assign the entries to predetermined row and column positions depending on how many there are. For example,
 

local entriesPerRow = 3 local xSpot, ySpot for row in globalData.db:nrows([[SELECT buildingsBonuses.costResource, ....]]) do xSpot = math.fmod( row, entriesPerRow ) if xSpot == 0 then xSpot = entriesPerRow end ySpot = 1 + math.floor( (row-1) / entriesPerRow ) print( "xSpot: "..xSpot, "ySpot: "..ySpot ) end

If entriesPerRow is set to 3, then xSpot (the column) will always count 1, 2, 3, 1, 2, 3, and repeat, while ySpot (the row) will always increase by 1 after 3 entries, i.e. 1, 1, 1, 2, 2, 2, 3, 3, 3, etc. You’d then simply use these xSpot and ySpot values to assign the x and y positions of your resources, e.g.  resourceImage.x = 100 + 20*xSpot and  resourceImage.y = 200 + 20*ySpot.

Once you get familiar with the idea, you can make it a bit nicer and customise it for different numbers of entries, e.g. maybe with 4 entries, it’d look better to have resources split to 2 rows and 2 columns, or 5 resources split to 3 and 2, but with the bottom row entries centered, etc.

#3

should also work fine using a display group.

first create the objects and place them as you want in relation to eachother on the x and y scale. i doesnt matter where since you will move them before they are rendered.

then add them to new displaygroup

then you mush add “yourDisplayGroup.anchorChildren=true”

you can no position the displaygroup containing all its “children” where ever you want on the screen.

remember you can also change anchorX and anchorY of the displaygroup.

#4

Thanks for the inputs! I went for something line XeduR @Spyric suggestion.

#5

There are thousands of different ways of approaching this.

The simplest idea in general, in my opinion, is to strictly state how many entries can at most be per one row. Then you simply assign the entries to predetermined row and column positions depending on how many there are. For example,
 

local entriesPerRow = 3 local xSpot, ySpot for row in globalData.db:nrows([[SELECT buildingsBonuses.costResource, ....]]) do xSpot = math.fmod( row, entriesPerRow ) if xSpot == 0 then xSpot = entriesPerRow end ySpot = 1 + math.floor( (row-1) / entriesPerRow ) print( "xSpot: "..xSpot, "ySpot: "..ySpot ) end

If entriesPerRow is set to 3, then xSpot (the column) will always count 1, 2, 3, 1, 2, 3, and repeat, while ySpot (the row) will always increase by 1 after 3 entries, i.e. 1, 1, 1, 2, 2, 2, 3, 3, 3, etc. You’d then simply use these xSpot and ySpot values to assign the x and y positions of your resources, e.g.  resourceImage.x = 100 + 20*xSpot and  resourceImage.y = 200 + 20*ySpot.

Once you get familiar with the idea, you can make it a bit nicer and customise it for different numbers of entries, e.g. maybe with 4 entries, it’d look better to have resources split to 2 rows and 2 columns, or 5 resources split to 3 and 2, but with the bottom row entries centered, etc.

#6

should also work fine using a display group.

first create the objects and place them as you want in relation to eachother on the x and y scale. i doesnt matter where since you will move them before they are rendered.

then add them to new displaygroup

then you mush add “yourDisplayGroup.anchorChildren=true”

you can no position the displaygroup containing all its “children” where ever you want on the screen.

remember you can also change anchorX and anchorY of the displaygroup.

#7

Thanks for the inputs! I went for something line XeduR @Spyric suggestion.