Elemente des Interfaces

Lebenspunkte

Marco Bruhne

Konzept

Ein wichtiger Teil jedes punktebasierten Spieles ist eine Mechanik, durch die es beendet wird. Unsere Idee war es eine Lebensanzeige zu implementieren, die es dem Spieler erlaubt getroffen zu werden, ohne direkt dessen Spielfluss zu stören. Eine Lebensanzeige hat zusätzlich den Vorteil, dass verschiedene Arten von Schaden unterschiedlich gewichtet werden können. Dadurch kann man das Spiel progressiv schwieriger gestalten.

Bei der Konzeption war es uns wichtig, dass Änderungen nicht ruckartig sondern schrittweise passieren. Diese Bedingung hat zwei grundlegende Fragen aufgebracht: Wie viel soll sich die Leiste pro Schritt verändern können und was für einen Zeitraum darf eine Änderung beanspruchen?

Die naheliegende Lösung wäre es, mit jedem Schritt einen Lebenspunkt abzuziehen. Diese Methode erreicht zwar jeden Wert, allerdings hängt die Laufzeit von der Größenordnung ab. Als eleganter empfanden wir eine Lösung die immer gleich lange dauert und trotzdem jeden Wert erreichen kann.

Gelöst haben wir dieses Problem, indem wir die Schrittgröße direkt an den Wertewechsel angepasst haben. Dies sorgt dafür, dass wir die benötigte Zeitspanne für eine vollständige Operation frei wählen und festlegen können. Leider ist unsere Ausführung nicht perfekt, da die Rechnung mit Gleitkommazahlen inhärent ungenau ist. Wir haben diesen Fehler als nachrangig eingestuft, da JavaScript mit double precision floating point numbers arbeitet und unsere Zahl sich zusätzlich selbst korrigiert, sobald diese das Maximum erreicht.

Obwohl die Speicher- und Ladefunktion aus Zeitgründen leider nicht mehr hinzugefügt werden konnte, verfügt die Lebensanzeige über einen versteckten genaueren Wert, der bei Übergabe einer Änderung sofort neu berechnet wird. Dies sollte verhindern, dass der Spieler speichern und laden ausnutzt um noch laufende Schritte zu verhindern.

Farbverlauf

Eine klassische Lebensanzeige verfügt zusätzlich über verschiedene Farben, um dem Spieler einen ungefähren Wert mitzuteilen, ohne dass dieser seinen Fokus verliert. Wir haben die Farben rot, gelb und grün, gewählt da diese Farbkombination sowohl in anderen Spielen als auch in der echten Welt genutzt wird und daher sehr intuitiv ist.

Um den Übergang flüssiger zu gestalten, wollten wir die Lebensanzeige mit einem dynamischen Farbverlauf ausstatten. Leicht umsetzbar wird diese Idee wenn man sich die Hexadezimalwerte dieser Farben anschaut: FF0000 (Rot) → FFFF00 (Gelb) → 00FF00 (Grün).

Wir konnten die Zusammensetzung von Gelb ausnutzen, indem wir die derzeitig angezeigten Lebenspunkte nehmen um einen Wert zwischen 0 und 255 aus dem jeweiligem Farbverlauf errechnen. Mit Hilfe der toString Funktion mit dem Parameter 16 konnten wir diesen Wert in einen String umwandeln, der den hexadezimalen Wert enthält. Durch Einsetzen dieses Strings in eine passende Vorlage konnten wir die Farbe der Leiste dynamisch anpassen.

Schild

Marco Bruhne

Um den Spieler nicht für kurze Unglücksmomente zu bestrafen, haben wir ein Schild hinzugefügt. Anders als die Lebensanzeige, beginnt sich das Schild langsam zu regenerieren, wenn man über einen bestimmten Zeitraum nicht getroffen wird. Das Schild verfügt über einen dynamischen Farbverlauf von Türkis zu Blau.

Dadurch, dass die Methode zum Verändern der Lebenspunkte sowohl vollständig war als auch schon von anderen Gruppen genutzt wurde, haben wir uns dazu entschieden, die Reduzierung des Schildes in unserem bisherigem Code aufzurufen. Wichtig war es zu beachten, dass Abzüge die vom Schild zu der Lebensanzeige übergehen von der Schrittgröße her gleich bleiben. Um dies zu erfüllen haben wir den Methodenaufruf vor der Reduzierung um die Schrittgröße platziert. Die Methode versucht das Schild um eine Schrittgröße zu verkleinern und gibt einen eventuellen Restwert zurück. Die Lebensanzeige versucht daraufhin sich um diesen Restwert zu reduzieren.

Die passive Regeneration des Schildes wurde durch eine Kombination von der setTimeout und der setInterval Funktion ermöglicht. Der Timeout verzögert ein Intervall, welches das Schild jede Sekunde um 1 erhöht. Die Idee war es, nach jeder Reduzierung des Schildes sowohl den Timeout als auch das Intervall aufzulösen und neu zu setzen. Eine Umstellung auf gerenderte Frames war zeitlich nicht mehr umsetzbar, weswegen man den Timeout per Pause Menü umgehen kann.

Informations-Popups

Pascal Hatwich

Um den Spieler über die aktuellsten Ereignisse zu informieren gibt es in unserem Spiel 3 Arten von Popups. Diese Liefern dem Spieler eine zusätzliche Informationsquelle in Form von kleinen Textnachrichten.

• Level Popup

  

• Achievement Popup

  

• Item Popup

  

Jedes Popup ist in der game.html beschrieben und besitzt ihre eigene Javascript Funktion. Das Design ist so definiert, dass die Popups anfangs außerhalb des Bildschirmes liegen. Beim Aufruf einer Popup funktion zb. displayMilestoneNote(value) wird der Text aktualisiert und die Position des Popup Fensters in das Sichtfeld des Spielers animiert. Nach ein paar Sekunden verschwindet die Anzeige wieder.

Level-Timer

Pascal Hatwich

Der Level Timer befindet sich unten zwischen der HP- und der Schildbar. Er zeigt dem Spieler an, wann er mit der nächsten Welle an Gegnern zu rechnen hat. Die Funktion für den Timer ist dabei eng mit dem Level Design des Spieles verknüpft. Jedes mal wenn der Timer abgelaufen is erhöht sich die Zeit für das nächste Level und neue Gegner werden gespawnt. Das Spiel nimmt dabei keine Rücksicht darauf ob der Spieler mit den Gegnern aus dem vorherigen Level fertig ist oder nicht. Die genauen Daten für die Zeit und Anzahl der Gegner eines Levels befinden sich in der levelDesign() Funktion in der Datei Interface.js.

Speedbar

Claudia Bruhn

Die Speedbar in der unteren rechten Ecke zeigt die aktuelle Geschwindigkeit des Raumschiffs an. Direkt darunter kann man die Geschwindigkeit als Zahl ausgeschrieben ablesen. So wie die Lebensanzeige und das Schild verfügt die Geschwindigkeitsanzeige über einen dynamischen Farbverlauf, der dem Spieler intuitiv anzeigt ob die aktuelle Geschwindigkeit nah an der maximal möglichen liegt oder noch weit davon entfernt ist. Dabei steht gelb für eine geringe, und rot für eine hohe Geschwindigkeit.

Im Code wird die Geschwindigkeit zunächst durch Zahlen im Bereich von 1 bis 14 beschrieben. Da dies, obwohl auf dem Bildschirm keine Einheit angegeben ist, auf den Spieler automatisch wie eine sehr geringe Geschwindigkeit wirkt, haben wir uns dazu entschieden die Zahl vor der Darstellung zunächst noch etwas zu modifizieren. Zuerst wird die Zahl mit einem gegebenen Faktor multipliziert. Danach wird eine zufällige Ziffer zwischen 0 und 9 angehängt um Wiederholungen zu reduzieren. So wird ein Gefühl für eine höhere Geschwindigkeit hervorgerufen und damit das Spielerlebnis verbessert.

Punkte-, Geld- und Waffenanzeige

Claudia Bruhn

Oben links befindet sich ein simples Design für die Anzeige der aktuellen Punktzahl, die später in den Highscore eingetragen wird, und eine Geldanzeige. Punkte bekommt man im Spiel für eingesammelte Items, zerstörte Asteroiden und besiegte Feinde. Besiegte Feinde bringen dabei am meisten Punkte.

Da der Spieler verschiedene Waffen zur Verfügung hat, wird ebenfalls eine Anzeige für die momentan aktive Waffe benötigt. Diese befindet sich in der oberen rechten Ecke. Neben einem Icon das die aktuell ausgewählte Waffe darstellt kann man dort die noch verfügbare Munition für die jeweilige Waffe sehen.