The Age of Empires II Technology Trees In Your Web Browser

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 Age of Empires II Technology Trees In Your Web Browser

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!

The Age of Empires II Technology Trees In Your Web Browser

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.

Filme zu Barcodes!

Eine simple Idee: Man nehme einen Film, ermittle die durchschnittliche Farbe jedes Frames, lege diese Farben hintereinander, ziehe das Ganze etwas in die Höhe und voilá: Kunst.

Eine derart simple Idee können wir auch selbst umsetzen!

Zunächst basteln wir ein kurzes Python-Script, welches einen Film in ein Streifenmuster umwandelt:

#! /usr/bin/python3

import imageio
import numpy
import argparse


def main():
    parser = argparse.ArgumentParser(description='Convert a video into bars of colour.')
    parser.add_argument('video', help='The video file to process')
    parser.add_argument('image', help='The output image file name')
    parser.add_argument('--height', type=int, default=600, help='The height of the resulting image')

    args = parser.parse_args()

    reader = imageio.get_reader(args.video, 'ffmpeg')

    colours = []

    for i, im in enumerate(reader):
        print("Processing frame {}".format(i))
        colours.append(numpy.mean(im, axis=(0, 1)))

    resultpicture = numpy.repeat(numpy.array([colours]), args.height, axis=0)

    imageio.imwrite(args.image, resultpicture)


if __name__ == '__main__':
    main()

Hernach können wir das Bild noch ins gewünschte Endformat quetschen:

convert -resize 600x200! image.png image-resized.png

Und fertig!

Zu Anschauungszwecken habe ich mir mal ein paar Youtube-Videos genommen und in Barcode-Form gegossen. Ein Klick auf das Bild bringt euch zum zugehörigen Youtube-Video. Vielleicht erratet ihr es aber auch bereits vom draufsehen?1 Am interessantesten finde ich persönlich ja das letzte Bild.

Filme zu Barcodes!

Filme zu Barcodes!

Filme zu Barcodes!

Filme zu Barcodes!

Filme zu Barcodes!

Filme zu Barcodes!

Filme zu Barcodes!

Filme zu Barcodes!

Filme zu Barcodes!

  1. Wahrscheinlich nicht.

Ordnung

Schon immer hatte ich einen bestimmten Sinn für Ordnung. Meine Lego-Steine waren nach Farbe und Menge in Schubladen sortiert (ganz unten Grün+Gelb zusammen). Die Stifte in meinem Federmäppchen ebenfalls. Meine seltenen Yu-Gi-Oh!-Karten heftete ich säuberlich in einem Ordner ab. Mich fasziniert die Aufräumkunst von Ursus Wehrli. In Minecraft baue ich oft große Sortiersysteme. Selbst mein Chaos habe ich gerne ordentlich und liebe „Zufallszahlen“-Generatoren.

Ich räume gerne auf. Bitte fragen Sie jetzt nicht meine Eltern, ob ich mein Kinderzimmer immer aufgeräumt habe, das ist etwas ganz anderes.

Die bislang aufwändigste Aufräumaktion hat etwas über drei Jahre gedauert.

Die Studierendenschaft der Rheinischen Friedrich-Wilhelms-Universität Bonn, deren Mitglied ich 2011 wurde, war eine andere als die heutige. Die meisten Abläufe waren trotz schneller Internetanschlüsse immer noch papierbasiert1. Das mag nett sein, wenn man wichtige Finanzunterlagen an zentraler Stelle sicher verwahren möchte. Sobald es jedoch um Dokumente geht, die für einen großen Personenkreis relevant sind und nach Möglichkeit schnell in der aktuellen Version verfügbar sein sollten, gibt es weit bessere Alternativen.

Zufällig gibt es in der Studierendenschaft zahlreiche solche Dokumente: Satzung, Geschäftsordnungen, Beitragsordnung, Wahlordnungen, Verfahrensordnungen, die Liste ist lang. Für jede einzelne Fachschaft kommen (theoretisch) nochmal eine Satzung und ggf. weitere Ordnungen hinzu. Das sind sehr viele Dokumente.

Die traurige Realität sah damals wie folgt aus: Wenn eine neue Satzung/Ordnung/Sonstwas beschlossen wurde, dann wurde sie ein paar mal gedruckt, vielleicht in einen AStA-Schrank gelegt oder an ein paar Leute verteilt, und ganz vielleicht wurde sie auf irgend eine AStA-Unterwebseite hochgeladen. Wollte man eine Änderung vorbereiten, durfte man oft erst einmal nach einer Person suchen, die die aktuellste Fassung als Word-Datei noch irgendwo auf der Festplatte liegen hatte. Sobald die Druckversion eines Dokuments vergriffen war, wurde es mit der Zeit immer unwahrscheinlicher, überhaupt noch den Text des Dokuments aufzutreiben. Wenn man Glück hatte, war noch eine Version in irgend einem AStA-Ordner abgeheftet worden. Manche Dokumente gerieten auch völlig in Vergessenheit.

Kurzum: Ein umfassender Überblick über die Rechtslage war praktisch unmöglich. Die Arbeit mit den selbst gegebenen Rechtsvorschriften blieb denen vorbehalten, die rechtzeitig ein Druckexemplar ergattern konnten.

Hinzu kommt ein demokratietheoretisches Problem: Wenn niemand™ die Satzung/Ordnung/Richtlinie/Vorschrift kennt, kann sie dann gelten?

Das klingt jetzt alles sehr schrecklich, und wenn man ehrlich ist, war es das auch. Ein untragbarer Zustand! Da müsste mal jemand™ was machen.

Im Juni 2013 übertrug ich die drei für mich wichtigsten Dokumente (Satzung, SP-Geschäftsordnung und Fachschaftswahlordnung) ins Markdown-Format und steckte sie in ein öffentlichen Git-Repository. So konnte ich sie bei Bedarf schnell finden. Der Anfang war gemacht.

Ordnung

Alle haben einmal klein angefangen.

Danach passierte lange nichts. Erst als ich im März 2015 aus dem Wahlausschuss ins IT-Referat des AStA wechselte, packte ich mein Herzensprojekt wieder an. Diesmal aber richtig: Ich sammelte jede Ordnung, Satzung, Richtlinie oder sonstige obskure Rechtsvorschrift der Studierendenschaft ein, die ich in die Finger bekam, konvertierte sie ins Markdown-Format und steckte sie in mein Git-Repository. Zur Not tippte ich sie auch ab, wie beispielsweise die „Geschäftsordnung zur Führung der Siegel des Allgemeinen Studierendenausschusses (AStA)“ vom 14. Februar 2003, an die sich bestimmt nur noch hartgesottene Diplomstudierende erinnerten – wenn überhaupt.

Die Sammlung wuchs schnell zu beträchtlicher Größe heran, war in meinem Repository aber lediglich einer Person zugänglich – mir. Zwar waren die Dokumente frei im Internet zugänglich und hätten von allen genutzt werden können. Ein nacktes Repository auf GitHub eignet sich aber schlecht als (halb-)offizielles Verzeichnis höchstoffizieller Dokumente.

Zufällig wird die Internetseite des Studierendenparlaments vom IT-Referat des AStA verwaltet, dessen Mitarbeiter ich nun war. Da die Verantwortlichen nichts dagegen hatten2, fügte ich der Webseite des Studierendenparlaments eine neue Unterseite hinzu: Satzungen, Ordnungen und Bekanntmachungen3. Auf ihr ließen sich nach Typ sortierte automatisch generierte HTML-Versionen aller Dokumente aus meinem Git-Repository finden. Alles unter dem Hinweis, dass es sich um „inoffizielle“ Versionen der Dokumente handle4. Der Clou: Oft werden von Normen lediglich ein paar Absätze geändert. Man müsste also die Urfassung und alle Änderungen nebeneinander legen, um die aktuelle Rechtslage zu sehen. Das ist mühsam, und zu oft arbeitet man dann doch mit einer veralteten Version des Dokuments. Mein Repository hingegen enthielt jeweils die aktuelle Gesamtfassung des Textes. Die offiziellen Versionen der Dokumente waren am Ende der Seite verlinkt, falls sie online verfügbar waren. Die Änderungshistorie wurde also direkt mitgeliefert.

Eine zentrale Anlaufstelle für die Recherche in Normen war somit geschaffen. Zeit, das nächste Problem anzugehen: Die chaotische Quellenlage.

Dokumente wurden klassischerweise in der AKUT veröffentlicht. Als Mitglied der akut-Redaktion hatte ich ebenfalls Zugriff auf die (nicht vom IT-Referate verwaltete) Webseite der akut. Dort richtete ich eine weitere Unterseite zur Online-Veröffentlichung ein und lud alle noch greifbaren PDF-Versionen von AKUT extras hoch. Außerdem vereinbarte ich mit dem Chefredakteur, dass er alle Dokumente, die in Zukunft zur Veröffentlichung eingehen würden, dort hinzufüge. Dieser Chefredakteur war es auch, der zumindest dem Deckblatt der AKUT extras einen professionelleren Anstrich verlieh.

Leider gab es immer noch keine einheitlichen Richtlinien für die Bekanntmachung von Satzungen, Ordnungen und ähnlichen Dokumenten. Ein Großteil der vom Studierendenparlament beschlossenen Normen fand zwar seinen Weg in eine AKUT extra, aber durchsetzbare Regeln für die Veröffentlichung, deren Nichtbefolgung die Ungültigkeit der beschlossenen Dokumente zur Folge hätte, wäre noch besser. Da sie öffentlich nachlesbar wären, wären sie vor allem zukunftssicherer.

Während der Arbeit an der nächsten Satzungsänderung setzte ich mich daher als Mitglied des zuständigen Satzungs- und Geschäftsordnungsausschusses dafür ein, einheitliche Regeln für die Bekanntmachung und das Inkrafttreten von Satzungen, Ordnungen, Richtlinien und Statuten aller Gremien in der Satzung der Studierendenschaft festzuschreiben. Die weiteren Ausschussmitglieder und das Studierendenparlament, das die Satzungsänderung am Ende beschließen musste, hatten nichts dagegen. Somit galt ab dem 13. Juli 2016: Satzungen, Ordnungen, Richtlinien und Statuten aller Gremien treten frühestens mit der Online-Veröffentlichung in der AKUT in Kraft. Wer also etwas beschließen möchte, was danach gelten soll5, muss es direkt der AKUT zur Veröffentlichung zusenden. Somit findet das Dokument seinen Weg auf die AKUT-Webseite, und von dort in das Git-Repository und in das Verzeichnis auf der SP-Webseite. Ein funktionierendes System!

Willkommen in der Gegenwart. Wir können mit wenigen Klicks herausfinden, welche die aktuellste Fassung einer Norm ist und welche Änderungen es in den letzten Jahren gab. Falls etwas online nicht auffindbar ist, gilt es wohl nicht. Eine erhebliche Verbesserung zum Zustand 2011. Und das vermutlich nur, weil ich an drei Schlüsselstellen saß, mir dachte „mach mal“, und man mich hat machen lassen. Danke dafür.

PS: Falls jemandem langweilig ist: Beschlossene Dokumente direkt im Markdown-Format zu haben wäre fabelhaft.

  1. Hashtag #Digitalisierung
  2. Ein sehr wichtiges Muster, wenn man innerhalb einer Verwaltung etwas Neues tun möchte.
  3. Fragen Sie jetzt nicht, warum die Seite „idx“ heißt. Ich weiß es selbst nicht mehr.
  4. Tipp: Je größer man „inoffiziell“ drüber schreibt, desto mehr Unsinn kann man drunter schreiben.
  5. Wer möchte das nicht!