Grundlagen der Spieleprogrammierung – Die Loop

Die Loop

 

Erstellung der Loop

 

Die Haupt-Schleife (oder nachfolgend "Main-Loop") wird in der Spiele-Entwicklung verwendet um das Spiel aufrecht zu erhalten. Nur bei bestimmten Ausstiegspunkten kann diese Schleife angehalten werden. Eines der Ausstiegspunkte wäre zum Beispiel, wenn der Spieler geschlagen wird und es „Game Over“ heißt.

In jedem Spiel wird initial eine Funktion gestartet, die immer wieder von vorne aufgerufen wird. Mithilfe dieser Funktion können wir Update-Routinen erstellen und ausführen, die es uns erlauben den Spielcharakter laufen zu lassen, eine Kollision festzustellen, Schüsse abzufeuern, die gegnerische künstliche Intelligenz auszuführen und noch vieles mehr, was wir für unser Spiel benötigen.

Viele Tutorials verwenden die bekannte Methode setTimeout() um diese Schleife aufrecht zu erhalten. Es gibt aber eine elegantere Lösung, die unsere Frames per Second (Bilder in der Sekunde) stabiler hält. Mit der Funktion window.requestAnimationFrame die mittlerweile als Standard für JavaScript-Basierte Spiele im Web gilt, erreichen wir einen flüssigen Spiele-Ablauf. Neben allen gängigen Browsern kennt sogar der Internet Explorer 10 diese äußerst nützliche Funktion.

Erstellen wir nun unsere Main-Loop und geben die FPS in einem leeren DIV-Element mit der ID „test_output“ aus.

 

(function($) {
	$( document ).ready( function() {
		window.requestAnimationFrame( mainLoop );
	});
	var lastRender = 0;
	function mainLoop( timestamp ) {
		var progress = timestamp - lastRender;
		lastRender = timestamp;
		
		$( "#test_output" ).html( progress );
		
		window.requestAnimationFrame( mainLoop );
	}
})(jQuery);

 

 

Wenn du alles richtig gemacht hast, solltest Du eine Zahl sehen, die sich recht schnell immer wieder verändert.

0

Zugegeben, das sieht noch nicht spektakulär aus, ist aber essentiell um ein flüssiges Spiel zu entwickeln. Du kannst Dir diese Funktion für weitere Projekte aufheben und ausbauen, denn sie ist das Kernstück unseres Spiels. Da ältere Browser die Funktion window.requestAnimationFrame nicht kennen kannst du eine Abfrage hinzufügen, die überprüft, ob der Spieler einen solchen Browser verwendet. Wenn das der Fall sein sollte kannst du auf die Funktion setTimeout() zurückgreifen, die schon sehr alte Browser wie der Internet Explorer 4.0 kennt. Unter Umständen musst du noch die FPS errechnen, um eine stabile Loop zu erhalten. Diese Berechnung wird in der Beitrags-Reihe aber nicht angeschnitten, da es nur noch einen kleinen Bruchteil von Benutzern gibt, die diese veralteten Browser verwenden. Gerade Gamer kennen sich genug mit Ihrem Rechner aus um alles auf dem neuesten Stand zu halten, somit ist mit der neueren Funktion unsere Zielgruppe gut bedient.

Im nächsten Beitrag beschäftigen wir uns mit der Eingabe von Tasten auf dem Keyboard.

 

Codepalm
Spieleprogrammierung fĂĽr Einsteiger
Teil 1: Die Loop

Abonniere die Fanpage von Codepalm und verpasse keine Beiträge mehr

Codepalm auf Facebook
 
 
 
 
Das könnte Dir gefallen:

Spieleprogrammierung mit Android Studio

EUR 34,90

Zu Amazon Mehr erfahren

Spieleprogrammierung mit Cocoa und OpenGL

EUR 49,70

Zu Amazon Mehr erfahren

Unity5 Spieleentwicklung: Umfassendes Training

EUR 34,99

Zu Amazon Mehr erfahren

Kommentare

Sei der Erste, der einen Kommentar erstellt!

Schreibe einen Kommentar

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