3
\$\begingroup\$

I'm trying to do a tech tree GUI for my game, but i have limited width and the tree has alot of branches, the problem is if I make them small to fit the width, the tech tree is too small to read.

For example the AOE one is very large (in width): enter image description here

I could allow scroll bar but as its web based, scrolls are quite ugly. So i was wondering how to deal with branches which slowly cause the tech tree to get wider as you go down the tech tree and how you would fit such a design in a limited space.

Are there different known designs for tech trees that any one knows of so i can look at their types. I don't know the names given to the types of tech tree layouts. But am hoping to find one that is not overly complex for the user aswell.

Improve this question
\$\endgroup\$
4
  • \$\begingroup\$ I played a lot of games with complex tech trees, but I can't remember just one which had a GUI for them which was halfway decent. \$\endgroup\$
    – Philipp
    Jan 20 '13 at 1:29
  • \$\begingroup\$ Mousewheel doesnot scroll, but zoom in / out. Clickmove pans. \$\endgroup\$
    – tomsseisums
    Jan 20 '13 at 1:57
  • \$\begingroup\$ @Philipp i agree theres very few that are decent. \$\endgroup\$
    – Dave
    Jan 20 '13 at 2:08
  • \$\begingroup\$ Maybe how it is done in the game World of Tanks? i.solidfiles.net/277920b7b8.jpg \$\endgroup\$
    – Cyral
    Jan 20 '13 at 4:04
2
\$\begingroup\$

You could use an indented tech tree, assuming you don't have too many layers. It is probably easier to show what I mean than it is to explain it. An excerpt from an example AoE2 tech tree below:

  • Barracks (I)

    • Militia (I)
      • Man-at-Arms (II)
        • Long Swordsman (III)
          • Two-Handed Swordsman (IV)
            • Champion (IV)
    • Spearman (II)
      • Pikeman (III)
        • Halberdier (IV)
    • Eagle Warrior (III)
      • Elite Eagle Warrior (IV)
    • Tracking (II)
    • Squires (III)

    • Archery Range (II)

      • Archer (II)
        • Crossbowman (III)
          • Arbalest (IV)
      • Skirmisher (II)
        • Elite Skirmisher (III)
      • Cavalry Archer (III)
        • Heavy Cav Archer (IV)
      • Hand Cannoneer (IV)
      • Thumb Ring (III)
      • Parthian Tactics (IV)

    • Stable (II)

      • Scout Cavalry (II)
        • Light Cavalry (III)
          • Hussar (IV)
      • Knight (III)
        • Cavalier (IV)
          • Paladin (IV)
      • Camel (III)
        • Heavy Camel (IV)
      • Bloodlines (II)
      • Husbandry (III)

  • Mining Camp (I)

    • Gold Mining (II)
      • Gold Shaft Mining (III)
    • Stone Mining (II)
      • Stone Shaft Mining (III)

  • Lumber Camp (I)

    • Double-Bit Axe (II)
      • Bow Saw (III)
        • Two-Man Saw (IV)

Of course, if you can code the tree so that it is possible to expand the list (eg have the technologies within the Mining Camp hidden unless expanded), and display detailed information (such as cost, time, etc. on mouse hover), you would be able to put even more information into a small space. The only problem with this design is that it still needs a scroll bar, but I have seen some working scroll bars online. Be aware that my knowledge of web coding is rather limited though, so I am afraid I can't help much on implementation.
I hope that helps.
Mmarss

Improve this answer
\$\endgroup\$
6
  • \$\begingroup\$ This doesn't really help out that much as the OP was looking for ways of representing graphical branching information whereas your example is very linear. If anything it basically converts it from a horizontal representation into a vertical one which doesn't help reduce the complexity of the graph. \$\endgroup\$
    – RobCurr
    Mar 2 '13 at 7:57
  • \$\begingroup\$ It would be possible to represent the above graphically, with vertical lines connecting each bullet point to the directly subordinate ones, but I would have to agree that it is still complicated. However, to my mind at least, the linear nature of the above example makes a lot of sense, and (to me, at least) is very clear. I also believe that the OP was looking for a way of representing a lot of horizontal information in a narrow space, which my example does. \$\endgroup\$
    – Mmarss
    Mar 2 '13 at 8:27
  • \$\begingroup\$ That is actually a good idea, a list like that is much more readable than a actual tree. \$\endgroup\$
    – API-Beast
    Mar 2 '13 at 20:02
  • \$\begingroup\$ Also vertical scrolling is much more comfortable than horizontal scrolling. \$\endgroup\$
    – API-Beast
    Mar 2 '13 at 20:02
  • \$\begingroup\$ What if a single research project allowed 2 different path choices, where by its an "either/or" situation ? \$\endgroup\$
    – Dave
    Mar 2 '13 at 20:41
0
\$\begingroup\$

You can use more then one picture ie. your agro advancements can be on one graph wile your writing advancements can be on another and when it gets to confusing to put on 1 graph split them up again

Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.