Help with using the levelselect.lua

Getting Started Newbie Questions
#1

I am working on the level select menu for my game and I can not figure out why the part of the buttons are sticking outside of the scroll view. I have tried changing some of the values, and could not figure out what is happening. If any code is needed, please ask. 

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

Sincerely,

Alex

#2

Hi Alex. I just dropped the code into a test case and it’s operating as it should. We would need to see your code and see how you’ve changed it to be able to advise more.

Rob

#3 
function scene:create( event ) local sceneGroup = self.view -- -- create your background here -- local background = display.newRect(0, 0, display.contentWidth, display.contentHeight) background.x = display.contentCenterX background.y = display.contentCenterY sceneGroup:insert(background) -- -- Use a widget.newScrollView to contain all the level button objects so you can support more than -- a screen full of them. Since this will only scroll vertically, lock the horizontal scrolling. -- local levelSelectGroup = widget.newScrollView({ width = \_CW \* 0.9, height = \_CH \* 0.9, scrollWidth = \_CW, scrollHeight = \_CH, horizontalScrollDisabled = true }) -- -- xOffset, yOffset and cellCount are used to position the buttons in the grid. Set their -- initial values. -- local xOffset = 64 local yOffset = 24 local cellCount = 1 -- -- define the array to hold each button -- local buttons = {} -- -- Determine the maxLevels from the myData table. This is where you determine how many -- levels your game supports. Loop over them, generating one button, group for each. -- for i = 1, myData.maxLevels do -- create the button buttons[i] = widget.newButton({ label = tostring( i ), id = tostring( i ), onEvent = handleLevelSelect, emboss = false, --properties for a rounded rectangle button... shape="roundedRect", width = 100, height = 66, font = native.systemFontBold, fontSize = 30, labelColor = { default = { 1, 1, 1}, over = { 0.5, 0.5, 0.5 }}, cornerRadius = 8, labelYOffset = -4, fillColor = { default={ 0, 0.5, 1, 1 }, over={ 0.5, 0.75, 1, 1 } }, strokeColor = { default={ 0, 0, 1, 1 }, over={ 0.333, 0.667, 1, 1 } }, strokeWidth = 2 }) xOffset = xOffset + 130 cellCount = cellCount + 1 if cellCount \> 5 then cellCount = 1 xOffset = 64 yOffset = yOffset + 85 end end
#4

It is showing in the left corner because I have not repositioned it yet.

#5

You are not positioning your buttons and they are drawing on top of each other. These two lines are missing:

        buttons[i].x = xOffset         buttons[i].y = yOffset

and possibly more, but that’s the source of your current condition.

Rob

#6

The buttons[i].x and button[i].y are not missing, I just forgot to include them.

#7

Can you please list any possible things that could be the source of this problem?

#8

What is your config.lua?

#9

You’re also not inserting the buttons into the scrollView:

levelSelectGroup:insert(buttons[i])

And based on the size of your buttons, you can only get four across in the scrollView (don’t need to see your config.lua after all)

You might want to consider changing:

if cellCount \> 5 then

to

if cellCount \> 4 then

Rob

#10

They are being inserted but I also forgot to post the code and I changed it to four, however the problem remains.

#11

Just in case this is my config.lua:

application = { content = { width = 800, height = 1200, scale = "letterBox", fps = 30, imageSuffix = { ["@2x"] = 1.3 }, }, --[[-- Push notifications notification = { iphone = { types = { "badge", "sound", "alert", "newsstand" } } }, --]] }
#12

Can you post the code you’re actually using? It’s hard for anyone to look at partial code and guess what the problem is.

Here’s what I’m using:

function scene:create( event ) local sceneGroup = self.view local \_CW = display.contentWidth local \_CH = display.contentHeight -- -- create your background here -- local background = display.newRect(0, 0, display.contentWidth, display.contentHeight) background.x = display.contentCenterX background.y = display.contentCenterY sceneGroup:insert(background) -- -- Use a widget.newScrollView to contain all the level button objects so you can support more than -- a screen full of them. Since this will only scroll vertically, lock the horizontal scrolling. -- local levelSelectGroup = widget.newScrollView({ width = \_CW \* 0.9, height = \_CH \* 0.9, scrollWidth = \_CW, scrollHeight = \_CH, horizontalScrollDisabled = true }) -- -- xOffset, yOffset and cellCount are used to position the buttons in the grid. Set their -- initial values. -- local xOffset = 64 local yOffset = 24 local cellCount = 1 -- -- define the array to hold each button -- local buttons = {} -- -- Determine the maxLevels from the myData table. This is where you determine how many -- levels your game supports. Loop over them, generating one button, group for each. -- for i = 1, myData.maxLevels do -- create the button buttons[i] = widget.newButton({ label = tostring( i ), id = tostring( i ), onEvent = handleLevelSelect, emboss = false, --properties for a rounded rectangle button... shape="roundedRect", width = 100, height = 66, font = native.systemFontBold, fontSize = 30, labelColor = { default = { 1, 1, 1}, over = { 0.5, 0.5, 0.5 }}, cornerRadius = 8, labelYOffset = -4, fillColor = { default={ 0, 0.5, 1, 1 }, over={ 0.5, 0.75, 1, 1 } }, strokeColor = { default={ 0, 0, 1, 1 }, over={ 0.333, 0.667, 1, 1 } }, strokeWidth = 2 }) levelSelectGroup:insert(buttons[i]) buttons[i].x = xOffset buttons[i].y = yOffset xOffset = xOffset + 130 cellCount = cellCount + 1 if cellCount \> 4 then cellCount = 1 xOffset = 64 yOffset = yOffset + 85 end end end

And everything is in the scrollView and working as I think it should.

Rob

#13

This is all the code I am using: 

function scene:create( event ) local sceneGroup = self.view -- -- create your background here -- local background = display.newRect(0, 0, display.contentWidth, display.contentHeight) background.x = display.contentCenterX background.y = display.contentCenterY sceneGroup:insert(background) -- -- Use a widget.newScrollView to contain all the level button objects so you can support more than -- a screen full of them. Since this will only scroll vertically, lock the horizontal scrolling. -- local levelSelectGroup = widget.newScrollView({ width = \_CW \* 0.9, height = \_CH \* 0.9, scrollWidth = \_CW, scrollHeight = \_CH, horizontalScrollDisabled = true }) -- -- xOffset, yOffset and cellCount are used to position the buttons in the grid. Set their -- initial values. -- local xOffset = 64 local yOffset = 24 local cellCount = 1 -- -- define the array to hold each button -- local buttons = {} -- -- Determine the maxLevels from the myData table. This is where you determine how many -- levels your game supports. Loop over them, generating one button, group for each. -- for i = 1, myData.maxLevels do -- create the button buttons[i] = widget.newButton({ label = tostring( i ), id = tostring( i ), onEvent = handleLevelSelect, emboss = false, --properties for a rounded rectangle button... shape="roundedRect", width = 100, height = 66, font = native.systemFontBold, fontSize = 30, labelColor = { default = { 1, 1, 1}, over = { 0.5, 0.5, 0.5 }}, cornerRadius = 8, labelYOffset = -4, fillColor = { default={ 0, 0.5, 1, 1 }, over={ 0.5, 0.75, 1, 1 } }, strokeColor = { default={ 0, 0, 1, 1 }, over={ 0.333, 0.667, 1, 1 } }, strokeWidth = 2 }) -- position the button in the grid and add to the scrollView buttons[i].x = xOffset buttons[i].y = yOffset levelSelectGroup:insert(buttons[i]) -- -- Check to see if the player has achieved this level or not. The .unlockedLevels -- value tracks the maximum level they have unlocked. This lets them play previous -- levels if they wish to try and do better. -- -- However first, check to make sure this value has been set. For a new user this -- value should be 1 if it's not been set. -- -- If the level is locked, disable the button and fade the button out. -- if myData.settings.unlockedLevels == nil then myData.settings.unlockedLevels = 1 end if i \<= myData.settings.unlockedLevels then buttons[i]:setEnabled( true ) buttons[i].alpha = 1.0 else buttons[i]:setEnabled( false ) buttons[i].alpha = 0.5 end -- -- Now generate stars earned for each level but only if: -- a. the levels table exists -- b. There is a stars value inside of the levels table and -- c. The number of stars is greater than 0 (no need to draw 0 stars, eh?) -- -- Generate the star and position it relative to the button it goes with. local star = {} if myData.settings.levels[i] and myData.settings.levels[i].stars and myData.settings.levels[i].stars \> 0 then for j = 1, myData.settings.levels[i].stars do star[j] = display.newPolygon( 0, 0, starVertices ) star[j]:setFillColor( 1, 0.9, 0) star[j].strokeWidth = 1 star[j]:setStrokeColor( 1, 0.8, 0 ) star[j].x = buttons[i].x + (j \* 16) - 32 star[j].y = buttons[i].y + 8 levelSelectGroup:insert(star[j]) end end -- -- Compute the position of the next button. This is set to draw 5 wide. It also spaces based on -- the button width and height + initial offset from the left. -- xOffset = xOffset + 130 cellCount = cellCount + 1 if cellCount \> 5 then cellCount = 1 xOffset = 64 yOffset = yOffset + 85 end end -- -- Load the scrollView into the scene and center it! -- sceneGroup:insert(levelSelectGroup) levelSelectGroup.x = display.contentCenterX levelSelectGroup.y = display.contentCenterY -- -- Create a cancel button to give the player a chance to go back to your menu scene. -- local doneButton = widget.newButton({ id = "button1", label = "Cancel", onEvent = handleCancelButtonEvent }) doneButton.x = display.contentCenterX doneButton.y = display.contentHeight - 20 sceneGroup:insert( doneButton ) end
#14

Your initial offset:

local yOffset = 24

is saying to start the top row of buttons 24 points down into the scrollView. But you made your buttons bigger: 66 points in height. So you need to shift everything down a bit. Since the default is to position by the object’s center, that would mean your yOffset needs to be at least 33 points. But you probably want a little white space at the top, so I did a:

local yOffset = 40

But it probably could use even more padding.

Rob

#15

Thank you very much Rob, it worked like a charm!

#16

Hi Alex. I just dropped the code into a test case and it’s operating as it should. We would need to see your code and see how you’ve changed it to be able to advise more.

Rob

#17 
function scene:create( event ) local sceneGroup = self.view -- -- create your background here -- local background = display.newRect(0, 0, display.contentWidth, display.contentHeight) background.x = display.contentCenterX background.y = display.contentCenterY sceneGroup:insert(background) -- -- Use a widget.newScrollView to contain all the level button objects so you can support more than -- a screen full of them. Since this will only scroll vertically, lock the horizontal scrolling. -- local levelSelectGroup = widget.newScrollView({ width = \_CW \* 0.9, height = \_CH \* 0.9, scrollWidth = \_CW, scrollHeight = \_CH, horizontalScrollDisabled = true }) -- -- xOffset, yOffset and cellCount are used to position the buttons in the grid. Set their -- initial values. -- local xOffset = 64 local yOffset = 24 local cellCount = 1 -- -- define the array to hold each button -- local buttons = {} -- -- Determine the maxLevels from the myData table. This is where you determine how many -- levels your game supports. Loop over them, generating one button, group for each. -- for i = 1, myData.maxLevels do -- create the button buttons[i] = widget.newButton({ label = tostring( i ), id = tostring( i ), onEvent = handleLevelSelect, emboss = false, --properties for a rounded rectangle button... shape="roundedRect", width = 100, height = 66, font = native.systemFontBold, fontSize = 30, labelColor = { default = { 1, 1, 1}, over = { 0.5, 0.5, 0.5 }}, cornerRadius = 8, labelYOffset = -4, fillColor = { default={ 0, 0.5, 1, 1 }, over={ 0.5, 0.75, 1, 1 } }, strokeColor = { default={ 0, 0, 1, 1 }, over={ 0.333, 0.667, 1, 1 } }, strokeWidth = 2 }) xOffset = xOffset + 130 cellCount = cellCount + 1 if cellCount \> 5 then cellCount = 1 xOffset = 64 yOffset = yOffset + 85 end end
#18

It is showing in the left corner because I have not repositioned it yet.

#19

You are not positioning your buttons and they are drawing on top of each other. These two lines are missing:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; buttons[i].x = xOffset &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; buttons[i].y = yOffset

and possibly more, but that’s the source of your current condition.

Rob

#20

The buttons[i].x and button[i].y are not missing, I just forgot to include them.