[1.9.4] Creating Advanced GUI with ListBox

[SKProCH]

It is necessary to create a mod that brings the system of stores to the game. For him, you need to make a fairly advanced interface. I do not understand how to make a ListBox that can be scrolled, how to add slots to it to put objects on when direct on it their tooltip showed up.
This is a quick sketch of how it should look.
 

How to implement this?

 

[themaw]

It looks great.

You should create a main guiscreen first.

Second,display playes's data at the top hub.

Third,design a  class of the data which will display at gui as a "BuyingItemTab".

Fourth,create a GUIdrawing class to handle the "BuyingItemTab" and display it.

You can not creeate a gui like this directly.

 

Or you can find some useful code at the minecraft code about the MODLIST OF MAIN MENU

[m00nl1ght]

I created a simple GuiList for my mod some time ago, it is based on the vanilla Gui classes. Maybe it helps. github

[V0idWa1k3r]

Any reason you are using 1.9? You should update to the latest version. 

You can see how the game handles it's own lists at GuiScrollingList.

Alternatively the algorithm is basically the following:

You have a variable that represents your scrollbar position, in a range of [0-1] {scrollbar}.

You have a scrollbar area itself, that starts at {startY} and spans {Height}

When the scrollbar is clicked interpolate the mouse coordinates relative to {startY} and {startY + Height} to a range of [0-1]. That is your new scrollbar position.

When the mouse wheel is scrolled your scrollbar position changes by a certain value, I would use {entriesFittingIntoTheBox} / {entries}.size(), then clamped to a range of [0-1].

So that is how you determine the scrollbar position. Next you have a collection of entries {entries} that is all of entries you have.

You can get the range of entries that are currently displayed as [{entries}.size() * {scrollbar}, {entries}.size() * {scrollbar} + {entriesFittingIntoTheBox}]. Obviously clamped to a [0-{entries}.size()]. Additionally if range[1] - range[0] is less than {entries}.size() and less than {entriesFittingIntoTheBox} then range[0] becomes range[0] - ({entriesFittingIntoTheBox} - (range[1] - range[0])). Again, clamp to [0-{entries}.size()]. Now expand the range by 1 keeping it in the [0-{entries}.size()] range.

Now you can start drawing your stuff. Start iterating the collection in the range you've just calculated. The position of element 0 will be {baseY} + ({elementY} - {elementIndex} * {unifiedElementSize}) <- this is assuming all your elements are of a unified height. The position of all next elements becomes {offsetY} + {baseY} where {offsetY} is either kept as a variable and added to or calculated as ({elementIndex} - range[0]) * {unifiedElementSize}.

The rendering of elements is up to you, I'm just telling you where to render them.

Now comes the interesting part - the stencil test. Stencil test is opengl's way of discarding fragments that don't fit into a defined scope. The stencil is it's separate buffer and can be of any shape but you are only interested in the basic quad for now. You can look up how to setup stencil rect or ask here - I will be able to provide you with a sample if you need it.