# How do I create multiple level buttons up to x amount in landscape mode?

0 favourites
• 17 posts
From the Asset Store
Fully commented source code/event sheet & sprites to create a space shooter game
• I have searched for tutorials online on how to auto create level buttons with star features but most I have seen are vertical and don't scroll.

As seen some buttons are hidden under.

In landscape, I need to be able to scroll from right to left and vice versa

• Here is a demo showing how to dynamically create a scrollable list with buttons, images etc. Choose the one with multiple columns. It's vertical, but you should be able to change it to horizontal.

howtoconstructdemos.com/scrolling-a-list-of-players-scores-images-etc-example-a-capx

• Thanks for the info. Meanwhile can anyone explain what this values mean actually. been cracking my brain to understand what they mean:

(loopindex%4)*300

(loopindex/4)*200

Thanks

• Loopindex is the index of the loop. %4 means the remainder after dividing it by 4. So the result is 0,1,2,3,0,1,2,3,0,1,2,3....

(loopindex%4)*300 is the X offset for each of four columns, first column will be at x=0, second at X=300 etc.

int(loopindex/4)*200 is the Y offset for each row. Each row contains 4 records and placed with 200px intervals.

• Thanks man. Any tutorial that explains this so I can read up on it.

• I don't know.. A math schoolbook? :) It's nothing but division and multiplication.

Say, loopindex is 13. So the location of the button for level 13 will be:

X offset (13%4)=1, 1*300=300px

Y offset (13/4)=3.25, int(3.25)=3, 3*200=600px

• I have followed your explanation but stuck somewhere.

I started with loopindex = 1 so the calculation should be

1%4 = 0.04 approximately 0

0 * 300 = 0

so X = 0

but when I display what x is to a text, it shows 300px which is confusing me.

• No, % is a remainder from division. It's also called modulo operator:

So 1%4=1

Also, since you start your loop with 1, you need to use (loopindex-1) in both these formulas, as they are supposed to work with zero-based loop. Otherwise the first slot will be empty.

• Oh I didn't know that % represents a modulus calculation. Thanks

Got 2 more challenge I would need your help with.

1) I managed to create each level buttons but how do I center them all so for different phone sizes, it still centers everything

2) In that tutorial, when you swipe, the screen slides slowly to stop but mine with the same configuration swipes and stops immediately, so no slowdown movement. This has to do with the "On DragDrop drop" block

• 1. Your "Level selector" sprite is in the center, so I guess you just need to find the right X offset values.

2. It's actually a bug, I discovered it yesterday, see this post:

construct.net/en/forum/construct-3/general-discussion-7/problem-capx-file-150827

• The scroll fix worked. You are the best...

Now let me see how I can fix the centering. Wish me luck

• No worries!

If you don't have too many level buttons, it may be easier to place them on the layout manually. Configure the grid, set snap to grid, create one row of buttons, copy-paste it as many times as you need. Should only take you a few minutes. And then just stretch the Panel area to cover all buttons.

• OK I managed to do a small hack to it. Created a blank sprite and set the width to size I want that will contain the 4 buttons per row. Then centered the sprite and messed about with the X axis settings.

Looks ok on my screen so hopefully it should look ok on all phone sizes.

Anyone with a much better option, please share

• ## Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.

Construct 3 users don't see these ads
• No worries!

If you don't have too many level buttons, it may be easier to place them on the layout manually. Just stretch the Panel area to cover all buttons.

I did that at first but could not figure out how to create the rest of the buttons

• Configure the grid in layout editor, set snap to grid, create one row of buttons, copy-paste it as many times as you need. Should only take you a few minutes.

If you create buttons in the correct order (from left to right, then copy-paste this row down), you can then automatically assign level numbers to them, for example:

LevelText set text to "Level "&(self.IID+1)

.

This method is actually much easier than what you've been doing. Dynamic list generation as in my demo is used when the number of records is unknown. But since you know how many levels are in your game, it's easier to create buttons manually.

• 17 posts