How do I create a scrollmenu similar to Duolingo's or Candy Crush Saga's?

I would like to have a menu like this in my game;

44e11d57293bfd7cd92cad806f5458cc (1)

Where one can scroll the page and select the level.

Could someone please help me with that?

You can try using a hidden rectangle,

Use the sticker extension to stick the buttons the rectangle,

Add a draggable behaviour to the rectangle,

Now you need to set the rectangle position on the x-axis, so the it can only be dragged on the y-axis.

In your events you can do something like

CONDITION | ACTION
Empty condition | set the x position of “rect” to 50px.

With that it should be draggable only on the y-axis.

You also need to set a maximum and a minimum y-axis

I always add a tween to my rectangle, so if it’s greater it tweens back, same goes if it’s lower.

3 Likes

That’s quite a different and neat approach, I like it. My initial thought would be to move the camera based on finger position or key press. But the sticker and draggable behaviours make for simper code/events.

1 Like

I love your concept. I also thought about the camera approach.

Question: would you add a condition to the buttons group to prevent them from being clicked while scrolling? Something either tied to the drag behavior or maybe compare the y value on mouse press to on release? If they match then trigger action(s)

You can make use of the condition. “Is not being dragged” on the rectangle.

Something like

CONDITION

Rect is not being dragged
Button is clicked on

1 Like

Please, how do I set max and min y-axis?

Hello, I use a condition to check if the y position is greater than the desired limit, if it is I disable the dragging behaviour for the hidden rectangle, and tween/set it to a number that’s within the limit.

It looks like this -