Age of Empires II currently offers 31 unique civilization to play as. Compared to, for example, the three races that players can choose from in StarCraft 2, that might seem overwhelming at first. However, all Age of Empires II civilizations share a common pool of units, buildings and technologies, with only a few unique elements to each civilization. This lowers the bar for newer players significantly.

A civilization’s technology tree shows which units, buildings and technologies are available to that civilization in which age. This follows some general rules, like that mesoamerican civilizations do not have access to cavalry, and further civilization-specific rules that disable certain units and technologies for a civilization. Due to the common pool, all technology trees look similar, albeit not identical.

The leftmost part of the Japanese technology tree

Sometimes, players wish to access the technology tree for one or more civilizations without having the game open, to see which units, buildings or technologies are available to a civilization.

Let’s build an online technology tree!

We start by analyzing the layout of the in-game technology tree:

• There are eight rows, two per age.
• Squares are connected  by exclusively horizontal and vertical lines.
• Elements of one upgrade line are all within the same column.
• Buildings are centered on their immediate unit and technology children.

Sounds doable!

Our next step is to collect all available building, unit and technology names. We devise a clever algorithm to recreate the desired layout that contains the data we collected before.

Next we notice that some civilizations have unique units, which move parts of the tree around when they are inserted.

Crestfallen, we exclaim “Oh no!” and scrap the idea of an accurate representation of the in-game tech tree, because while we are rather motivated, we are first and foremost lazy programmers.

Instead, we create a “master” technology tree which contains the elements of all technology trees in the game. Unfortunately, this means that it gets even wider than the original version(s). Also, some squares will be disabled for 30 out of 31 civilizations, but whatever. At this point, we don’t care.

Speaking of disabling: We add a the functionality to display big red crosses when an item is disabled. Hereafter, we spend two hours scrolling through the tech tree of every civilization and adding the information which buildings, units and technologies are disabled to our application.

As a finishing touch, we add all the icons, and we are basically done!

Add dank memes to your blog posts to boost your reach among adolescent audiences.

We present: A bland online version of the Age of Empires II technology tree. In your browser, even kind of mobile-friendly, MIT-Licensed (except the icons).

Unfortunately this version is currently without the civilization bonuses that are usually displayed below the civilization selection box, as we could also not be bothered to manually type them all. Fixed! omg