Making of Rountris

Ihr hab vermutlich alle mein letztes Browser-Game Rountris gespielt. Wenn nicht tut das Hier.

Diesen Artikel ist ein kurzes Making of, ich gehe also näher auf die Entwicklung ein. Das Spiel basiert auf HTML5 und Javascript, wird also von jeden neuen Browser nativ unterstützt.

Game Engine

Zuerst einmal musste ich mich um die Hauptschleife kümmern sowie um Benutzereingaben. Da man so eine Grund-Engine bei jeden Spiel braucht habe ich diese Separat programmiert um sie auch später einfach wieder zu verwenden. Dabei kam die Engine jsGame2D raus, die ich in Zukunft auch zu veröffentlichen gedenke.

Diese nimmt mir auch das laden und  verwalten von Bildern und Sound ab. Eine Funktion um Spielstände zu speicher/laden habe ich ebenfalls implementiert, dies wird in Rountris dazu verwendet um sich an die Einstellung der Musik (an/aus) und an die persönlichen Highscore zu erinnern.

Init – Update – Render

Nach dem die Grund-Engine fertig war ging es ans eigentliche Spiel. Dabei halte ich mich an 3 einfache Schritte, die mir auch schon die Spiel-Engine vorschreibt. Zuerst werden alle nötigen Variablen initialisiert und Objekte Entworfen. Das Hauptobjekt, die Kugeln, habe ich als Klasse realisiert. Da es eine variable Anzahl an Kugeln geben wird habe ich eine Art Arraylist benutzt.

Beim Update werden die Kollisionen abgefragt und die Kugeln bewegt, dazu aber später mehr. Für das rendern der Kugeln und des Hintergrundes etc. konnte ich die nativen Zeichenfunktionen  des HTML5 Canvas benutzen.

Physik Engine

Die Physik Engine war wohl das Aufwendigste am Spiel und deswegen gehe ich ein wenig genauer auf die Algorithmen ein.

Bewegung der Kugeln

Da sich die Kugeln auf einen Punkt hinzubewegen, also nicht einfach nach unten, musste bei die Bewegung etwas mehr beachtet werden. Einfach mit jeden Schritt die x&y-Werte runterzählen ergab nur in 45° Schritten eine grade Linie. Der Bresenham-Algorithmus kann zwar eine Linie zwischen zwei Punkten in einen Raster-System berechnen ergab aber eine sehr zittrige Bewegung. Als Lösung habe ich die Schrittweite der jeweiligen Richtung relativ zu Entfernung zum Nullpunkt gewählt:

V: Schrittgeschwindigkeit

x1 = |x0*0.01|*V
y1 = |y0*0.01|*V

Damit ist eine stabile Flugbahn auf den Nullpunkt hinzu möglich, als neben Effekt werden die Objekte langsamer um so näher sie den Nullpunkt kommen. Diesen Effekt kann man vermutlich mit einer weiteren Variable ausgleichen – ich fand den Effekt aber recht ansprechend für Rountris.

Kollisionsabfrage

Die nächste Aufgabe war die Kollisionsabfrage. Während bei Evade eine rechteckige Kollisionsbox ausreichte brauchte ich bei den runden Kugeln etwas genaueres. Da die Kugeln perfekt rund sind reichte es einfach den Abstand  der Mittelpunkte zu ermitteln, wenn dieser kleiner als der Durchmesser ist gibt es eine Kollision. Die Entfernung zweier Punkte kann man bekannter weise mit dem Satz von Pythagoras ermitteln:√(Δx² + Δy²)

Drehung

Zu guter Letzt war nur noch die Drehung der fixierten Kugel offen. Doch mit hilfe der Rotationsmatrix war auch dies schnell erledigt:

α: Winkel der Drehung

x1 = cos(α)*x0 - sin(α)*y0
y1 = sin(α)*x0 + cos(α)*y0

 

Grafiken & Sound

Wie bei meinen Spielen typisch ist die Optik und der Sound ein wenig zu kurz geraten. Die Bilder hab ich wie immer mit Gimp erstellt für die Sounds einen 8-Bit Tracker: famitracker

 

Ich hoffe euch hat dieses kleine Making Of gefallen über Feedback im Kommentar bereich würde ich mich sehr freuen. Als Abschluss noch ein Foto das zeigt wies bei mir in der Entwicklung aussah 😀

Entwicklung von Rountris

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Time limit is exhausted. Please reload CAPTCHA.