Grundlagen der Spieleprogrammierung im Web: Die Loop

Der Einstieg in die Spiele-Entwicklung mit der Game-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.

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.