Generating buttons horizontally

Solar2D iOS
#1

Hi,

I have been following this tutorial on how to generate a level selection scene which I have functioning. The level buttons are generating, and the scrolling seems to work well.

https://coronalabs.com/blog/2014/08/12/tutorial-building-a-level-selection-scene/

However, unlike the tutorial, I would like for my menu to scroll horizontally. I have been able to get the horizontal scrolling to function properly, however, I have not been able to figure out how to make the level buttons generate horizontally rather than vertically.

Right now the levels generate in rows of 5, where more rows are made vertically to match the amount of levels.

MHGr5OG.png

If I were to make the maximum levels 25, another column would be added below the 16-20. However, I would like to make that next column generate the 5 rows (level buttons) on a new page. This way, it would be displayed to the right of the 1-5 button column, where each subsequent 5 levels would be generated downwards until a total of 4 columns are filled (pretty much just like the iOS home screen). This process would continue every 20 levels, keeping each set of 20 on their own page, horizontally adjacent to the previous set.

Here’s my code (removed the extra composer stuff, this is inside the scene:create function)

 local levelSelectGroup = widget.newScrollView({ width = display.contentWidth, height = display.contentHeight \* .3, scrollWidth = display.contentWidth \* 2, scrollHeight = display.contentHeight \* .3, verticalScrollDisabled = true }) local xOffset = 64 local yOffset = 24 local cellCount = 1 local buttons = {} for i = 1, 30 do buttons[i] = widget.newButton({ label = tostring( i ), id = tostring( i ), onEvent = handleLevelSelect, shape= "Rect", width = 48, height = 48, font = "font/Roboto-Heavy.ttf", fontSize = 16, }) buttons[i].x = xOffset buttons[i].y = yOffset levelSelectGroup:insert( buttons[i] ) if ( var.settings.unlockedLevels == nil ) then var.settings.unlockedLevels = 1 end if ( i \<= var.settings.unlockedLevels ) then buttons[i]:setEnabled( true ) buttons[i].alpha = 1.0 else buttons[i]:setEnabled( false ) buttons[i].alpha = 0.5 end xOffset = xOffset + 75 cellCount = cellCount + 1 if ( cellCount \> 5 ) then cellCount = 1 xOffset = 64 yOffset = yOffset + 45 end if ( cellCount \> 20 ) then cellCount = 1 xOffset = xOffset + 64 yOffset = yOffset + 45 end end sceneGroup:insert( levelSelectGroup ) levelSelectGroup.x = display.contentCenterX levelSelectGroup.y = display.contentHeight levelSelectGroup.anchorY = 1&nbsp;

Thanks!

#2

If the cell count ==  21 then you need to reset yOffset to it’s initial value which is 24 according to  your code and change the xOffset to where your next page would start in the scrollView, perhaps 64 + display.contentWidth and then when you need to break to the next line continue to change the xOffset to the beginning of the line value.

#3

Perfect! I never thought of doing it this way - works great!

#4

If the cell count ==  21 then you need to reset yOffset to it’s initial value which is 24 according to  your code and change the xOffset to where your next page would start in the scrollView, perhaps 64 + display.contentWidth and then when you need to break to the next line continue to change the xOffset to the beginning of the line value.

#5

Perfect! I never thought of doing it this way - works great!