I was wondering how the following could be achieved in Gdevelop.
I have a layer that displays a menu with options, and it can be dragged up and down based on touch. I used the example from ddabrahim to achieve this method.
What I am looking for is a way to have the draggable menu contained inside a smaller box, that is placed in the centre of the game screen.
In this screenshot you will basically see what I am looking for. The list with eggs can be dragged up and down, but all remain inside the box, while the box is displayed on top of the game.
If I understand right, it’s a matter of layer order and movement restriction.
Place the draggable list layer between the box layer and the game layer.
Then, use conditions to restrict the position of the list.
Box layer → a png file with a shape of the box is the middle while the surroundings are fully transparant
But when the list layer is dragged outside the boundaries of the box, it remains visible, and it should be invisible.
In the example on the screenshot you will see that when the list is dragged outside the white box, it will remain inside the box. And the box is on top of the blurry background, which is the working game itself.
If the box layer surroundings would completely fill the screen except in the middle, it would be no problem. But what I try to achieve is a box shape only in the middle from where inside you can drag the list.
Wow, I hope it is not too confusing what I am trying to explain, but thanks in advance!
You’re right (and clear).
The easy solution would be to add blurred borders in the color tones of the game around the box.
The much harder solution would be to take border screenshots before the menu pops up and display them with some javascript magic. Don’t ask me how to do that
