• Mit der libRocket zum perfekten GUI

      0 comments

    Hier wollen wir uns mit verschiedensten Themen aus dem Bereich C++, C# oder ähnliches beschäftigen. Den Anfang macht das Thema libRocket.
    Im Zuge der Programmierherausforderung zum Pythagorasbaum habe ich mich nach Frameworks für die grafische Oberfläche (GUI) im Bereich ISO C++ umgesehen. Damals haben wir uns für das gute alte MFC entschieden, da es einfach zu benutzen ist und auch relativ leicht zu erlernen. Aber es ist auch etwas angestaubt und kommt nicht an modernere GUIs heran wie z.B. WPF (welches allerdings bisher nur sinnvoll unter C# zu beenutzen ist und wir werden uns wohl später hier damit mal beschäftigen).
    Bei der Suche nach Alternativen bin ich über libRocket gestolpert bzw. wurde es mir empfohlen. Dabei handelt es sich um eine plattformunabhängige user interface middleware in ISO C++. Sie eignet sich speziell für Spiele und wird auch schon in einigen Projekten ( für Android, IOS) eingesetzt. Die Benutzung ist kostenlos und genaue Bedingungen können der libRocket Homepage entnommen werden.
    Was macht nun libRocket so besonders? Zum definieren der GUI wird HTML und CSS verwendet. Benutzer, die sich im Erstellen von Webseiten heimisch fühlen, sollten also schnell damit zurecht kommen und alle anderen finden Unmengen an Tutorials im Internet. Außerdem gibt es auf der libRocket Seite eine sehr ausführliche Doku.
    Nun müssen wir noch klären, was mit „middleware“ gemeint ist. libRocket selbst enthält selbst keinen Code zur Ein/Ausgabe. Dieser Teil wird von uns zur Verfügung gestellt. Im Bereich Eingabe übergeben wir daher die Aktionen der Maus (Position und Tasten) und der Tastatur an libRocket und die GUI reagiert dann entsprechend. Dadurch kann man es auf vielen Systemen einsetzen und auf dem Smartphone z.B. per Touch steuern, aber auf dem PC per Maus. Zur Eingabe zählt auch das Dateisystem, welches libRocket braucht, um auf die HTML und CSS Dateien zugreifen können, sowie auf Font-Dateien. Dies müssen wir aber nicht unbedingt zur Verfügung stellen, da ansonsten einfach das normale Dateisystem des jeweiligen Systems verwendet wird. Hat man aber in seinem Spiel z.B. ein eigenes Dateisystem, bei dem die Daten vielleicht in komprimierten Zip-Archiven stecken, dann kann man dies einfach in libRocket einbinden, wenn man möchte.
    Bleibt also noch das Thema Ausgabe. Hier produziert libRocket für uns einfach Dreiecksdaten (vertices) und eventuell dazu Texturen. Da es vor allem für Spiele gedacht ist, ist das natürlich praktisch, da dort in der Regel sowieso Dreiecke gerendert werden. libRocket in die bestehende Renderloop zu hängen sollte also nicht schwer sein. Damit können wir zur Darstellung z.B. einfach OpenGL oder DirectX verwenden.
    Wir füttern also libRocket mit Inputs, beschreiben unsere GUI mittels HTML und CSS Dateien und libRocket spuckt Dreiecke und Texturen aus, die wir einfach rendern. Klingt nicht ganz einfach? Ok kann ich verstehen und fordert normal auch etwas mehr Ahnung, aber wenn man sich libRocket herunter lädt, erhält man auch einige Demo-Projekte. Diese enthalten ein kleines Projekt, welches uns einen Großteil der Arbeit abnimmt (Eingabe und Ausgabe per OpenGL). Alles was wir dann noch tun müssen, ist der Aufruf einiger Initialisierungsfunktionen, das Laden der Fonts und schließlich die Darstellung unserer GUI aus unseren HTML/CSS Dateien.
    Daraus habe ich nun ein kleines Projekt erstellt, was man leicht benutzen kann, um mit libRocket herumzuspielen. Dieses Projekt werde ich dann im nächsten Artikel im Detail vorstellen. Dann sehen wir auch endlich wieder etwas Code 🙂
    Bis dahin frohes coden wünscht euch NicoB!