Grundlagen der Spieleprogrammierung – Bewegung entwickeln

Bewegung entwickeln

 

Das Raumschiff mit der Eingabe bewegen lasen

 

Unsere zentrale Steuereinheit Input und das Raumschiff haben wir bereits in den Beiträgen Die Eingabe und Vorbereitung und Planung erstellt. Lassen wir sie zusammenfinden um dem Spieler eine bewegbare Spielfigur auf unserer Leinwand zur Verfügung zu stellen.

Damit das Raumschiff auch an der richtigen Stelle auf der Spielfläche ausgegeben wird müssen wir zunächst noch eine wichtige Klasse vorbereiten. Der Renderer wird unser Ansprechpartner in Sachen Ausgabe des Graphical User Interface (Grafische Benutzeroberfläche) und der Veränderung und Erstellung von Elementen, deren Erscheinung und auch deren Position auf dem Spielfeld.

Wie beim Raumschiff werden wir für den Renderer eine globale Variable erstellen, die außerhalb unseres jQuery-Wrappers in der JavaScript-Datei gesetzt wird. Dadurch können wir das Objekt jederzeit und von jeder Stelle aus aufrufen um dem Renderer zu sagen welche Objekte und auszugebende Variablen verändert werden sollen. Die Deklaration wird ebenfalls in der $(document).ready()-Funktion geschehen, damit wir sicherstellen können das die Variable myRenderer vor dem Aufruf der Deklaration existiert. Andernfalls werden wir an diversen Stellen eine Fehlermeldung erhalten, dass Funktionen nicht im Objekt enthalten sind, wenn wir sie verwenden möchten.

/* ... */
var myRenderer;
(function($) {
	$( document ).ready( function() {
		/* ... */
		
		myRenderer = new Renderer();
		
		/* ... */
	});
	function mainLoop() {
		/* ... */
		
		if( typeof myRenderer !== "undefined" ) myRenderer.update();
		
		/* ... */
	}
	/* ... */
	class Renderer {
		constructor() {
			this.Spaceship = $( '#main_wrapper #spaceship' );
		}
		
		update() {
			if( typeof this.Spaceship !== "undefined" ) this.updateSpaceship();
		}
		
		updateSpaceship() {
			
			this.Spaceship.position().left = mySpaceship.Position.X;
			this.Spaceship.position().top = mySpaceship.Position.Y;
			
			// Mit folendendem Code schwenkt das Raumschiff entweder nach links oder nach rechts. Die CSS-Formatierung haben wir bereits vorbereitet
			if( mySpaceship.DirectionH == 1 )
				this.Spaceship.attr( 'data-direction', 'right' );
			else if( mySpaceship.DirectionH == -1 )
				this.Spaceship.attr( 'data-direction', 'left' );
			else if( mySpaceship.DirectionH == 0 )
				this.Spaceship.attr( 'data-direction', '' );
			
		}
	}
})(jQuery);

 

Bevor wir die Position des Raumschiffs verändern benötigen wir eine Abgrenzung des Rahmens unserer Spiele-Landschaft. Wir haben bereits mit CSS die Breite und die Höhe des Spielfelds definiert. Mithilfe von jQuery können wir diese Eigenschaften abrufen und in ein globales Objekt setzen. Mit diesen Angaben können wir dem Raumschiff die ersten Grenzen zeigen, damit der Spieler sein Raumschiff nicht in das Nirvana transportiert und es nicht mehr wiederfindet.

/* ... */
var Field = {
	Width: 600, 
	Height: 600
};
(function($) {
	$( document ).ready( function() {
		/* ... */
		
		$( '#main_wrapper' ).css({ 'width' : Field.Width+'px', 'height' : Field.Height+'px' });
		
		/* ... */
	});
	
	/* ... */
	
})(jQuery);

 

 

Die Begrenzungen setzen wir nun in die Funktion move() des Spaceship und befüllen die Bedingungen der Tastatur-Abfrage, damit das Schiff sich in verschiedene Richtungen bewegen kann. Wir berücksichtigen dabei das besondere Verhalten, wenn der Benutzer gleichzeitig die vertikalen Hoch und Runter Tasten, oder die horizontalen Links und Rechts Tasten betätigt. In diesem Fall soll sich das Raumschiff je nach Kombination nicht horizontal oder vertikal bewegen, sondern stehen bleiben.

Damit der Renderer auch verstehen kann in welche Richtung sich das Raumschiff neigen soll setzen wir in der gleichen Bedingung die Kontroll-Variable DirectionH in den negativen Bereich (Links), den positiven Bereich (Rechts) oder auf Null um einen Stillstand, also keine Neigung auf der Horizontalen Achse darzustellen.

class Spaceship {
	/* ... */
	move() {
		// ĂśberprĂĽfe, ob das Raumschiff durch einen Fehler auĂźerhalb des Spielfelds liegt
		if( this.Position.X < 0 )
			this.Position.X = 0;
		else if( this.Position.X + this.Position.W > Field.Width )
			this.Position.X = Field.Width - this.Position.W;
		
		if( this.Position.Y < 0 )
			this.Position.Y = 0;
		else if( this.Position.Y + this.Position.H > Field.Height )
			this.Position.Y = Field.Height - this.Position.H;
		
		if( myInput.Arrows.Left ) {
			this.Position.X -= 1;
			this.DirectionH = -1;
		}
		else if( myInput.Arrows.Right ) {
			this.Position.X += 1;
			this.DirectionH = 1;
		}
		else {
			this.DirectionH = 0;
		}
		
		if( myInput.Arrows.Up ) {
			this.Position.Y -= 1;
		}
		else if( myInput.Arrows.Down ) {
			this.Position.Y += 1;
		}
	}
	/* ... */
}

 

Neben der Breite und Höhe des Spielfelds, die wir in CSS gesetzt haben, wurde auch die initiale Position unseres Raumschiffs per CSS gesetzt. Diese Position sollte beim Initialisieren unseres Spiel berücksichtigt werden, damit kein „Sprung-Effekt“ des Raumschiffs entsteht und es plötzlich in der linken oberen Ecke (X- und Y-Koordinate auf „0“) erscheint.

Nachdem Du diesen Beitrag fertiggestellt hast kannst Du gerne ausprobieren wie sich das Raumschiff verhält, wenn der folgende Code nicht in unserer $(document).ready()-Funktion befindet. Du kannst den Code-Block entweder temporär löschen oder auskommentieren.

/* ... */

$( document ).ready( function() {
	/* ... */
	
	var $spaceship = $( '#spaceship' );
	var spaceshipArguments = {
		Position: {
			X: $spaceship.position().left,
			Y: $spaceship.position().top
		}
	};
	mySpaceship = new Spaceship( spaceshipArguments );
	
	/* ... */
});
function mainLoop() {
	/* ... */
	
	mySpaceship.update();
	
	/* ... */
}

/* ... */

 

Das war schon alles um Bewegung in unser Spiel zu bekommen. Du kannst nun Deinen neuen Programmcode testen. Wenn dir das Raumschiff zu langsam oder zu schnell erscheint kannst du die Variable Speed in der Klasse Spaceship verändern und erneut testen. Umso höher der Wert der Variable definiert wurde, desto schneller bewegt sich das Raumschiff. Diese Variable kannst Du in den folgenden Beiträgen gerne erneut nach Belieben verändern, um den anstehenden Objekten besser oder schlechter auszuweichen.

 

Im nächsten Beitrag beschäftigen wir uns mit Projektilen und statten der Funktion shoot() in der Klasse Spaceship mit den notwendigen Algorithmen aus, um unser Raumschiff für das Gefecht vorzubereiten.

 

Codepalm
Spieleprogrammierung fĂĽr Einsteiger
Teil 5: Bewegung entwickeln

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

Codepalm auf Facebook
 
 
 
 
Das könnte Dir gefallen:

Spieleprogrammierung für Anfänger

EUR 39,41

Zu Amazon Mehr erfahren

Einstieg in Unity: 2D- und 3D-Programmierung

EUR 29,90

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.