Lag on Level Selection Scene with Lots of Buttons

I’ve got a level selection scene that uses a loop to insert buttons into a scroll group. This worked great when I didn’t have too many levels, but as the app has grown and the level count is now over 250 I’m getting a noticeable lag on some devices when I go to the level selection scene.

Here are the relevant bits of code:

local function createButton( i )
	puzzleButton[i] = widget.newButton(
		{
			width = 530,
			height = 155,
			defaultFile = "gfx/btn/button.png",
			overFile = "gfx/btn/buttonDown.png",
			onEvent = gotoPuzzle
		}
	)
	puzzleButton[i].x = 384
	puzzleButton[i].y = 80 + ( ( i - 1 ) * 165 )
	puzzleButton[i].packNumber = i
	menuScrollGroup:insert( puzzleButton[i] )
end

menuScrollGroup = widget.newScrollView(
		{
			width = 768,
			height = 955,
			horizontalScrollDisabled = true,
			topPadding = 10,
			bottomPadding = 150,
			hideBackground = true
		}
	)

for i = 1, #puzzlePackData.level do
	createButton( i )
end

Does anybody have any suggestions for speeding up the load time on this scene?

Not much help here. Just to say I experience this also when inserting 104 buttons into 5 separate scroll view groups. The delay is around a second or two and is noticeable on my old iPad Mini.

I thought of creating all the buttons and scroll views in a one-time setup and then just set isVisible = true. It’s rather awkward though, as I shuffle the button order each time the user views the scroll views. It’s a smallish performance hit that I’ve decided to live with. I appreciate of course that the performance delay may not be an option for you. Sorry this post isn’t much use!

The golden rule for performance is to only draw what the user can see. I doubt they can see all 250 levels without a lot of scrolling. You need to add new levels - in say batches of 10 - as the user scrolls your level selection screen.

If that is too difficult you can maybe use an image instead of buttons and that should be a lot faster.

1 Like

Hello. Does it lag when level selection is shown, while scrolling, or both?

@napolimatiase It lags when transitioning to the scene itself.
@anon63346430 True, the player can’t see all the buttons at once, but after rendering the scrollview, I then use scrollToPosition to take the player to their level, so I don’t know how to thread the needle between showing the player their level and not drawing what they can’t see, since I, in theory, need the buttons between level one and whatever level they happen to be on so I can scroll them there.

Split your levels into zones. Have 20-30 levels per zone. Only show the zone the player is currently in. If the player wants to scroll to a different zone then dynamically load the next zone when they begin scrolling.

This is what games with lots of levels do - like Candy Crush for example.

1 Like

@anon63346430 Thanks- I’ll take a look at Candy Crush.