Programmierung in Visual und ISO C++

Wie letztes Mal schon angekündigt, wollen wir uns nun mit einem kleinen Projekt beschäftigen, das uns erlaubt ein bisschen mit libRocket herum zu spielen. Das Visual Studio Projekt könnt ihr hier downloaden.

Die Solution besteht aus 2 Projekten: „rocketTemplate“ und „Shell“. „Shell“ stammt aus den Samples von libRocket und stellt uns alles nötige zur Verfügung, um direkt mit libRocket loslegen zu können. Wir bekommen ein Fenster zur Darstellung, in das libRocket rendert und alle Eingabe werden an libRocket weitergeleitet.
„rocketTemplate“ ist unser eigentliches Projekt. Es besteht nur aus der „main.cpp“ und einer Klasse namens „SystemInterface“, dazu später mehr. Dazu kommen noch einige wichtige Dateien. Der Ordner „lib“ enthält die Bibliotheken von libRocket und in den Ordnern „Release“ bzw. „Debug“ findet man die zugehörigen Dlls.
Als Letztes benötigen wir noch den Ordner „assets“. Darin befinden sich ein paar HTML/CSS Dateien und Fonts.

Schauen wir uns die „main.cpp“ im Detail an.

#include <Rocket/Core.h>
#include <Rocket/Debugger.h>
#include <Input.h>
#include <Shell.h>
#include "SystemInterface.h"

Die „Core.h“ benötigen wir immer, damit haben wir Zugriff auf libRocket. Der Debugger ist optional. Er kann nützlich sein, wenn man komplexere Dokumente erstellt. Mehr dazu findet man in der libRocket Doku.
„Input.h“ und „Shell.h“ stammen von unserem „Shell“ Projekt. Wir benötigen die Funktionen daraus für die Ein/Ausgabe.

Rocket::Core::Context* context = NULL;
 
void GameLoop()
{
	glClear(GL_COLOR_BUFFER_BIT);
 
	context->Update();
	context->Render();
 
	Shell::FlipBuffers();
}

Dies ist die Hauptschleife unseres Programmes. Sie wird von der „Shell“ jedes Frame aufgerufen. Erst wird der Inhalt unseres Fensters gelöscht, dann wird „Update“ von libRocket aufgerufen, was die Eingaben verarbeitet und die GUI-Elemente entsprechend anpasst und dann lassen wir libRocket die GUI rendern. Zum Schluss wird das aktuelle Bild noch angezeigt. In einem Spiel würde man die Aufrufe einfach in die Hauptschleife integrieren.

Als nächstes folgt die Main-Methode, welche beim Start unseres Programmes aufgerufen wird.

if (!Shell::Initialise("../assets/") ||
	!Shell::OpenWindow("Rocket Template", true))
{
	Shell::Shutdown();
	return -1;
}

Mit Hilfe der „Shell“ legen wir den Ordner „assets“ als aktuelles Verzeichnis fest und öffnen ein Fenster für unser Programm. Geht etwas schief, dann beenden wir alles korrekt.

ShellRenderInterfaceOpenGL opengl_renderer;
Rocket::Core::SetRenderInterface(&opengl_renderer);

Wir sagen libRocket, dass wir das OpenGL RenderInterface der Shell zur Darstellung verwenden wollen.

SystemInterface system_interface;
Rocket::Core::SetSystemInterface(&system_interface);

Und übergeben unser eigenes SystemInterface. Diese Klasse muss vor allem eine Methode implementieren.

float SystemInterface::GetElapsedTime()
{
	return Shell::GetElapsedTime();
}

Diese Methode soll die Zeit zurückgeben, die seit Start unseres Programmes vergangen ist. Benutzt wird dies für Animationen und andere zeitabhängige Dinge in libRocket. Wir leiten hier einfach auf die Funktion der Shell weiter.

Rocket::Core::Initialise();

Damit initialisieren wir libRocket. Dies muss unbedingt geschehen, allerdings erst nachdem ein RenderInterface und ein SystemInterface übergeben wurden.

context = Rocket::Core::CreateContext("main",
    Rocket::Core::Vector2i(1024, 768));

Damit erstellen wir einen libRocket context. Dieser wird benötigt, um unsere GUI darzustellen, außerdem bestimmen wir so die virtuellen Ausmaße unseres Fensters.

Rocket::Debugger::Initialise(context);
Input::SetContext(context);
 
Shell::LoadFonts("../assets/");

Der Debugger ist, wie schon gesagt, völlig optional, kann aber nützlich sein. Danach binden wir die Inputs, welche uns die Shell zur Verfügung stellt, an unseren Context. Alle Tastatur- und Mauseingaben werden also an die Objekte in unserem Context weitergeleitet. Und dann laden wir noch unsere Fonts, die in unserer Beispiel-GUI verwendet werden.

Rocket::Core::ElementDocument* document = 
    context->LoadDocument("../assets/main.rml");
if (document != NULL)
{
	document->Show();
	document->RemoveReference();
}

Nun laden wir unser Dokument, unsere HTML-Datei, die unsere GUI beschreibt und stellen sie dar.

Shell::EventLoop(GameLoop);

Nun starten wie unsere Hauptschleife. Diese läuft nun bis wir das Programm schließen.

context->RemoveReference();
Rocket::Core::Shutdown();
 
Shell::CloseWindow();
Shell::Shutdown();
 
return 0;

Danach beenden wir noch alles wieder und sind auch schon fertig.

Bleiben noch die HTML/CSS Dateien. Diese stellen ein ganz einfaches (hässliches) Fenster dar. Es hat einen Titel und einen Text als Inhalt. Man kann an dem Beispiel aber auch schon einige Besonderheiten von libRocket sehen.

<handle move_target="#document">

Dies finden wir in der „window.rml“ Datei. Und mehr ist nicht nötig, um unser Fenster verschiebbar zu machen. Man kann also das Fenster im Bereich mit dem Text „Titel“ einfach anklicken und so unser Fenster (Dokument) herum bewegen. Wir müssen dazu nicht eine Zeile Code schreiben.
Und so lässt sich einiges in den HTML Dateien ausdrucken. Dadurch kann jeder an der GUI basteln, ohne dass er programmieren können muss. Vom Programmierer wird nur das Gerüst zur Verfügung gestellt und ein Grafiker kann dann nach belieben am Design der GUI schrauben. Dies war z.B. mit MFC früher nicht wirklich machbar.

Dies soll es für heute gewesen sein, danke für’s lesen!
NicoB

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!