Home/ Questions/Q 6602847
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T18:55:37+00:00

In our game, we have a typical tech tree, which is currently edited by

  • 0

In our game, we have a typical tech tree, which is currently edited by hand – very hard to maintain and error-prone: http://igmarauders.isotx.com/library/images/a/a3/Techtree-july26-2011-vehicles-resized.png

If at all possible, I’d like to generate this in an HTML form, but I have no idea where to start. Maybe people here have tackled similar problems and can point me in the right direction?

Some technical details:

  • Every node is an entity, with a unique ID (number)
  • Every entity has a list of prerequisites (other entities)
  • The starting tech (on the left) is an array of entities
  • Only entities that can be traced back to the starting tech show up in the map
  • The research level (the columns along the top) are a property available for each entity
  • Entities of the same types but different levels (e.g. Assault Archos LvL 1, Assault Archos LvL 2) are linked by a property from the higher level to the lower level (and the higher level always has the lower level as a prerequisite too)
  • We can distinguish between Technology (upper part) and Vehicles (lower part) by the entity type, a per-entity property.
  • The actual names are also a per-entity property, and not really important for the tree itself

Finally:

  • You can ignore the differentiation between solid lines and dotted lines (I don’t even know what the difference really is)
  • The boxes that group vehicles together that are unlocked by one research project are nice to have, but not required

Thanks in advance. I have searched on Google, but all the “complex tree” examples I found were childishly simple compared to mine 🙂

edit: Here is some sample data, in a JSON format: http://pastebin.com/Fa3JcnRw

edit 2: Also, if it matters, we use PHP on the server side, but I’m open to alternatives – we could generate the static HTML in a build script for example.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’ve hacked together an alternative idea, you can see it at
    http://jsfiddle.net/jedidiah/sTj3E/4/embedded/result/

    The idea is to just list all of the items at each level in columns, and then when you click on one of the items it highlights the techs that are required.

    I think it would be a bit easier to get your head around than all the lines, thought it wouldn’t give you the overview at a glance, you would have to click around.

    edit: You can see the code here http://jsfiddle.net/jedidiah/sTj3E/4/ forgive the messiness, just a quick example to get the idea across.

    • 0