How to make scrolling and scrollbar?

[Eamonn]

In a larger project, you'll most likely need to create a UI system, or use a pre-existing one. In my case, I don't want to use a pre existing one and would prefer to write my UI elements myself as a bit of a challenge to myself, and to make more things myself.

So far, I've made almost every UI element I could need, and any I don't have I know how to create (except scrollable text boxes and anything else requiring scrolling). One thing I don't know how to made is a scroll pane, or some kind of scrolling UI element -- horizontal or vertical.

So, basically, how do you make a scrolling UI element and a snazzy little scrollbar to go with it? I'm sure there are plenty of ways to do this, but just list the way either you would do it, or that is most common, etc.

I can't really be more precise, because my question is that simple: How do I make a scrolling UI element? Let's use a window with text as an example. A window with a huge paragraph of text, and after a while I want it to clip off at the bottom and make a scrollbar either appear or get smaller. How do you do this?

Thanks!

[lachlaan]

Fair warning, it's late, i'm tired and bored so if i make very little sense I apologize and hope the next poster after me does more to help.

Not sure I understand exactly what you meant by your example, but if you meant you'd like a certain size window to display as much as it can out of a block of text, with the text moving up on its own until it reaches the bottom and then allowing you to scroll back up, then I can have a go at an idea for how i'd do it.

Basically you'd need to know the amount of lines that are drawable onto the window displaying the text, display the right amount of lines and just keep decreasing the y coordinates of each line gradually, with anything higher than the window border not displaying anymore. As soon as it reaches the last line and the line is actually drawable, stop changing the y coord of the lines. As for the scroll bar, you just need to do a boxcheck for mouse coords to see if it's inside of the scroll bar's draggable rectangle, if the click is inside it, change scroll's state to selected while the button stays down and then change the scroll rectangle's y coord to that of the cursor, up to the maximum and minimum points along its path. As for how wide the selectable rectangle should be, i'd say number of displayable lines divided by number of total lines, times window height.

And then just figure out which line should be the center of the window by tossing it the ratio between (topY - scrollY) / (scrollY - bottomY)

[baconhawka7x]

I had a map editor that used scrolling elements to filter through items and such.


What I did is for the window, I had two y variables: the contentY, and the windowY

the windowY is the actual Y position of the window itself, the contentY is the y position of the content inside of the window.

so what you do, is draw the text in a way that depends on the contentY

for example:

Code: Select all

love.graphics.print(text,windowX,contentY + 5)

This way, you can move all of the content within the window, without moving the actual window itself.