Something like the Achievement Tree

[Asweez]

I want to make a GUI like the achievement screen where there are boxes and lines and you can scroll through it and stuff, but I'm not sure how to do it. I mostly get the boxes, but I'm not sure how to make the lines that connect them, and I'm not sure how to make the window scrollable.

 

How would I do these things?

[Asweez]

Yeah I have. What I'm mostly confused about now is how the scrolling works and how it cuts off the background where the GUI foreground is. How does this work?

[Ernio]

In simple words:

On screen you make a "border" from some left-right and top-bottom.

Background is creatd by bunch of textures that use some "random" blocks and you start drawing them on this "bordered" area using repeating pattern. (Not qute what I would call it - it actually uses some of Biome mechanics, I don't really remember right now).

You render as many background blocks as possible and those which are standing out of bordered area you cover with .png frame-like image.

 

Rest is simple dragging-coordinate system you can find in most scrollable guis.

 

As to understanding it - you can't without taking a piece of whatever gives you power to imagine and compute (paper, paint, brain maybe) and thinking the idea thorough. Seriosuly, I could understand anyone not being able to write it themselves, but you have a code - LOOK at it, analyse it. And I am not being rude, that is a simple and useful truth.

[Asweez]

You're not being rude at all. But the code is a little hard to understand at first glance because most of the variables still have names like field12345_A. So I will have to go a little further into analyzing it. Thanks for the instruction!

[coolAlias]

VSWE did a tutorial series for 1.6.4 about interfaces, among others. Even though it is outdated, the concepts still hold true, and if you are struggling with understanding how something like a scrollbar works, I think you may find that series helpful.

 

As for scroll bars, at its most basic it is simply storing the current x or y position of the scroll bar and rendering things on the background based on that. Think if you have a 1000 x 500 canvas, but can only show 200x100 at a time.

 

Determining which part of your screen to render can be figured by calculating the scrollbar's position on a scale of 0 to 1. In this example, the scrollbar can be anywhere from pixel 0 up to "screen width or height minus scrollbar size in pixels" (for its top- or left-most position), so (current position / max position) is the current ratio which you then use to determine where to start rendering from.

 

E.g. for a vertical scrollbar that is 10 pixels tall on our screen that is 100 pixels high, if it is currently at y position 45, then our ratio is (45 / 100-10) or 0.5F. Multiply that by our canvas sizes and you get 500 for the starting x position and 250 for the starting y position, so you will render from 500 to 700 on the x and 250 to 350 on the y.

 

It may seem complicated at first, but it's really not. I highly recommend that tutorial series as it will introduce you to a lot of these concepts.