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
 

Das konnte dich auch interessieren

Schreibe einen Kommentar

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

 

Kommentare

Sei der Erste, der einen Kommentar erstellt!

 
Secured By miniOrange