Item/Menu Scroll

3

Stats

5,184 visits, 7,336 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 21 Oct, 2014. Last updated 19 Feb, 2019

It's very possible you've come across the problem of needing to scroll items in a side menu during a game (This can be very troublesome when making a cookie clicker type game or something with a lot of objects/options/items.

So how can we combat this problem?

Set up

First, begin with your project size. and background as usual. Once you've got that, add in the menu bar.

As you can see, some of the boxes for the menu overlap the bottom of the menu bar making it unrealistic. If you can, make a copy of the bottom menu and background to cover it like so:

Now you can see that the boxes fall under the bottom menu (Ensure you use layers to achieve this effect).

Finally you need up/Down buttons to allow the user to control the direction you move the boxes. I used sprite images as buttons:

Now you need to code it. Unfortunately this method isn't friendly to the amount of work needed to put into it, however it is very straight forward.

Coding

Firstly you will need a new variable. Call this: SidebarY - It should be a number. Set it to 0

In your event sheet, create a new event and select:

Mouse>On Left Button Clicked

Additional Condition:

Mouse is over> Up Button (Sprite)

As an effect you will need:

System> Set Y

Input: (Sprite.Y)

Additionally you will also need:

Sprite>Set Y

Input: (SidebarY)+50

Do this for each item and eventually you could have something like this:

For the 'Down' arrow. Repeat this process but instead of +50 use -50

Hope this helps!

Play the game

  • 4 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Nice tutorial. I don't know if it was possible back in 2014, but today I would work with layers and blenders to make the boxes disappear at the top and bottom of the screen. Just create a layer only for this, set it to "Force own texture", then create a fitting "blend out sprite" of any color and set it to blend mode "Destination out". It is important to spawn the blend-out-spites after the boxes are spawned - both in said layer. I did place the blend-out-boxes at the top and bottom of my scrollbars.