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.

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: Erstellung einer Game-Loop