How to implement the “technological tree” drawing?

Question

I want to make a tech tree at least like in Civilization, but I don't know how to do it. I want to fill in some data structure and then display it on the screen in the form of a technology tree, but I don't know how to implement it in code.
The only way I came up with was:
public class Technology1
{
String name;
TextButton button;
LinkedList<Technology1> NextTech;
}

TextButton is the libGDX class with which I was going to display each individual technology on the screen.
LinkedList NextTech- all technologies that are accessed after studying the current one are stored here. In other words, "children" are stored here .
The problem is how to set the coordinates for all technologies when rendering the tree, so that the technologies do not overlap when displayed and so that the whole looks more or less normal.
If I started to do it wrong, then please tell me a more correct option.

Charanor · Answer

Your implementation looks about right. Just a few code-review changes so it matches Java code styleguide. Remember constructors, getters, and setters:

public class Technology {
    private String name;
    private Array<Technology> nextTechnologies; // LibGDX's "Array" is a more efficient list
}

As you can see I removed the button from the technology class. It is good practice to separate game logic (the technology tree) from the graphical side (the tech tree graphical layout).

As for the actual layout I would personally manually position all the elements unless you have a massive amount of technologies (100s).

public class TechnologyLayout {
    private Sprite sprite;
    private Vector2 position;
}

public class TechTreeDrawer {
    private ObjectMap<String, TechnologyLayout> layoutMapping;
    private Technology root;
    
    public void draw() {
        draw(root);
    }

    private void draw(Technology tech) {
        TechnologyLayout layout = layoutMapping.get(tech.getName());

        // draw somehow using the sprite and position
        batch.draw(layout.getSprite(), layout.getPosition());
        tech.getNextTechnologies().forEach(this::draw);
    }
}

TechTreeDrawer drawer = new TechTreeDrawer(root);
drawer.addPosition("Computers", new Vector2(100, 100));
drawer.addPosition("Agriculture", new Vector2(0, 0));
drawer.draw();

If you are dead set on positioning the graph using an algorithm there are several papers on graph layouts. There are also graph layout libraries written in Java. A simple google should lead you to both.

How to implement the “technological tree” drawing?

One Answer

Add your own answers!

Ask a Question