Grundlagen der Spieleprogrammierung – Die Verarbeitung

Vorbereitung und Planung

 

Die Eingabe verwenden und verarbeiten

 

Im letzten Beitrag haben wir zusammen die Eingabe f├╝r unser Spiel erstellt, um unserem Programmcode beizubringen welche Tasten wir verwenden werden. Um die Eingaben zu verarbeiten ben├Âtigen wir einen steuerbaren Charakter, der sich in unserer Spiel-Umgebung befindet. In diesem Beitrag k├╝mmern wir uns um die Planung des Spiels, sowie die Erstellung eines bewegbaren Objekts in unserer Spielumgebung.

Die beiden Grund-Voraussetzungen Main-Loop und die Eingabe unseres Spiels wurden bereits fertiggestellt. Nun solltest Du eine Vorstellung haben was f├╝r ein Spiel Du erstellen m├Âchtest. Viele Entwickler haben schon viel fr├╝her eine Idee von Ihrem Wunsch-Ergebnis und planen auch schon vor der ersten Zeile Code, damit sie eine Struktur f├╝r das Spiel erarbeiten k├Ânnen und Ihre Gedanken schriftlich zu Papier bringen. Im Prozess des Entwickelns k├Ânnen nat├╝rlich manche Algorithmen nicht in das Spiel aufgenommen werden, die in der Planung noch als wichtig erachtet wurden. Das sich Spiel-Funktionen grundlegend ver├Ąndern kann zus├Ątzlich in der Entstehung vorkommen. Auch w├Ąhrend des Erstellens kann der Entwickler auf verschiedene Besonderheiten aufmerksam werden, die er bei der Planung nicht ber├╝cksichtigen konnte, da sich bestimmte Verhaltensmuster erst beim Testen bemerkbar machen.

F├╝r das Grundspiel ├╝bernehme ich die Planung f├╝r Dich. W├Ąhrend du die Code-Schnipsel umsetzt kannst du gerne Feinheiten, wie die Bewegungsgeschwindigkeit oder Zufallszahlen justieren. Ich erkl├Ąre Dir an den passenden Stellen welche Variablen Du ver├Ąndern kannst, damit das Spiel deinen eigenen Vorstellungen entspricht. Nach der Fertigstellung dieses Tutorials kannst Du Dein Spiel auch weiter Anpassen, indem du andere Grafiken f├╝r die Objekte verwendest oder mehr Gegenst├Ąnde oder Gegner erstellst.

Ein beliebtes Genre unter vielen Gamern ist der Space Shooter. Der Spieler braucht eine gute Auffassungsgabe und eine schnelle Reaktion um in diesem Spiel punkten zu k├Ânnen. In unserem Tutorial werden wir genau so ein Spiel erstellen, da Anf├Ąnger einfach in die Spiele-Entwicklung schnuppern und alle wichtigen Themen der Programmierung angeschnitten werden k├Ânnen.

├ťberlegen wir was wir f├╝r einen Space Shooter alles ben├Âtigen. Unser Spieler braucht ein steuerbares Raumschiff mit dem er Gegner und Gefahren zerst├Âren oder umfliegen kann. Um ein Hindernis zu zerst├Âren ben├Âtigen wir eine Art Angriff den das Raumschiff f├╝r den Spieler ausf├╝hren wird. In unserem Beispiel wird das ein Projektil sein, dass der Spieler mit der Leertaste abfeuern kann. Da wir uns im Weltraum befinden sind wohl die besten Hindernisse Meteore, die ziellos durch das All fliegen. Zu guter Letzt ben├Âtigen wir intelligentes Leben, das versuchen wird unser Raumschiff mit verschiedenen Angriffen zu eliminieren.

In JavaScript k├Ânnen wir aus den geplanten Typen unsere Blaupausen erstellen, die verschiedene Eigenschaften und F├Ąhigkeiten besitzen, wie schon im letzten Schritt unsere Eingabe-Klasse. Bringen wir unsere geplanten Typen zu Papier und definieren, was f├╝r F├Ąhigkeiten diese ben├Âtigen:

Verschiedene Algorithmen werden wir nicht nur f├╝r ein bestimmtes Objekt ben├Âtigen, sondern f├╝r mehrere Bereiche im Spiel. Deshalb ben├Âtigen wir neben den oben aufgef├╝hrten Klassen noch globale Funktionen die uns helfen werden eine Kollision abzufragen oder neue Objekte zu erstellen.

Du merkst, dass auch ein Minispiel einen gewissen Planungsaufwand vor dem Erstellen des Quellcodes ben├Âtigt. Ich empfehle Dir kein Spiel zu erstellen, bevor die Grundfunktionen nicht definiert und schriftlich verfasst wurden. Denn sobald du mehrere Tage hintereinander an deinem Spiel entwickelst kann es Dir passieren, dass du Algorithmen vergisst, oder nicht mehr wei├čt welches Ziel Du mit Deinem Spiel verfolgst. Eine Dokumentation kann dir auch viele Vorteile bringen, in der du immer die tagesaktuellen Codes notierst und erkl├Ąrst. Damit solltest du dich in deinem Programm noch auskennen, auch wenn du mehrere Tage oder Wochen nicht mehr daran gearbeitet hast.

Unser Raumschiff wartet darauf von uns erstellt zu werden, also lassen wir es nicht mehr l├Ąnger warten.

 

Das Raumschiff

Wie bereits unsere Klasse Input ben├Âtigt unser Raumschiff einen Namen, mit dem wir ein Objekt daraus generieren k├Ânnen. Ich verwende sehr gerne englische Begriffe f├╝r meine Variablen, Funktionen und Klassen da diese ohne Umlaute auskommen, die in einem Programmcode nicht verwendet werden k├Ânnen. Die Klasse des Raumschiffs nenne ich also Spaceship.

Das Raumschiff definiert beim Deklarieren eines Objekts einige wichtige Variablen, die wir im Spielgeschehen verwenden werden. Um den Standort des Raumschiffs zu definieren ben├Âtigen wir ein Objekt Position das die Variablen X, Y, W und H enth├Ąlt und die Variablen DirectionH. X und Y sind unsere Koordinaten in Pixeln, W und H gibt die H├Âhe und die Breite in Pixel an um sp├Ąter eine valide Kollision zu generieren. Die DirectionH-Variable verwenden wir zur Kontrolle, um festzustellen in welche Richtung das Raumschiff gesteuert wird, um es nach links oder nach rechts zu neigen.

Des Weiteren ben├Âtigen wir eine Variable f├╝r die Bewegungsgeschwindigkeit (Speed), f├╝r die Anzahl an Leben (Life), den Angriffsschaden der Projektile (Damage), sowie Kontroll-Variablen wie Destroyed und ID. Es wird auch noch mehr Variablen hinzukommen, aber dazu sp├Ąter mehr.

 

class Spaceship {
	constructor( args ) {
		args = args || {};
		
		this.Position = { X: 0, Y: 0, W: 49.5, H: 37.5 };
		if( typeof args.Position !== "undefined" ) {
			if( typeof args.Position.X !== "undefined" )
				this.Position.X = args.Position.X;
			if( typeof args.Position.Y !== "undefined" )
				this.Position.Y = args.Position.Y;
			if( typeof args.Position.W !== "undefined" )
				this.Position.W = args.Position.W;
			if( typeof args.Position.H !== "undefined" )
				this.Position.H = args.Position.H;
		}
		this.DirectionH = 0;
		
		// Die folgenden Variablen werden in kommenden Beitr├Ągen n├Ąher erl├Ąutert
		if( typeof args.Life !== "undefined" )
			this.Life = args.Life; 
		else this.Life = 5;
		
		if( typeof args.Speed !== "undefined" )
			this.Speed = args.Speed;
		else this.Speed = 1;
		
		if( typeof args.Damage !== "undefined" )
			this.Damage = args.Damage;
		else this.Damage = 1;
	}
	update() {
		// Die Update-Funktion wird verwendet, um die Funktionen move() und shoot() auszuf├╝hren. Die Abfrage, ob die jeweilige Taste get├Ątigt wurde wird von der Funktion selbst ausgef├╝hrt. Diese Funktion wird in der Main-Loop des Spiels aufgerufen, da diese Funktion kontinuierlich ausgef├╝hrt werden soll
	}
	move() {
		// Hier werden wir die notwendigen Algorithmen zum steuern des Schiffs eintragen
	}
	shoot() {
		// Hier werden wir die Algorithmen hinterlegen um ein Projektil zu erstellen
	}
}

 

Unsere Blaupause wurde erstellt und kann nun deklariert werden. Dazu erstellen wir uns zun├Ąchst eine globale Variable mySpaceship um in der jQuery- Funktion $(document).ready() das Raumschiff-Objekt zu erstellen, sobald die Webseite vollst├Ąndig geladen wurde. Dadurch k├Ânnen wir auf unser Objekt des Raumschiffs von ├╝berall aus zugreifen.

 

var myInput;
var mySpaceship;
(function($) {
	$( document ).ready( function() {
		myInput = new Input();
		mySpaceship = new Spaceship(); // In den folgenden Beitr├Ągen werden wir die Position des Raumschiffs mit Parametern ver├Ąndern
		mainLoop();
	});
	function mainLoop() {
		var progress = timestamp - lastRender;
		lastRender = timestamp;
		
		if( typeof myInput !== "undefined" ) renderInput();
		if( typeof mySpaceship !== "undefined" ) mySpaceship.update();
		
		window.requestAnimationFrame( mainLoop );
	}
})(jQuery);

 

Damit die Funktion move() unser Raumschiff bewegen kann m├╝ssen wir in unserer Main-Loop kontinuierlich die Funktion update() des Schiffs aufrufen. Mit jedem Durchgang der Loop wird unser Raumschiff somit um die gesetzte Bewegungsgeschwindigkeit (Speed) in die gew├Ąhlte Richtung bewegt, falls der Spieler eine der festgelegten Pfeiltasten bet├Ątigt. Zudem wird die Funktion shoot() unseres Raumschiffs aufgerufen, welche ├╝berpr├╝ft ob die Leertaste zum Abfeuern eines Projektils gedr├╝ckt wird.

Die Bedingungen k├Ânnen wir mit den Variablen unseres Objekts myInput best├╝cken. In ihr haben wir bereits alle Tasten hinterlegt, ob diese gedr├╝ckt werden oder nicht. Auch der R├╝ckgabewert ist ein Boolean-Wert, deshalb brauchen wir nicht mehr auf einen Vergleichs-Operator zur├╝ckgreifen.

class Spaceship {
	constructor( args ) {
		// Siehe oben
	}
	update() {
		if( typeof myInput !== "undefined" ) {
			this.move();
			this.shoot();
		}
	}
	move() {
		if( myInput.Arrows.Left ) { /* Fliege nach links */ }
		if( myInput.Arrows.Right ) { /* Fliege nach rechts */ }
		if( myInput.Arrows.Up ) { /* Beschleunige das Raumschiff */ }
		if( myInput.Arrows.Down ) { /* Verlangsame das Raumschiff */ }
	}
	shoot() {
		if( myInput.Space ) { /* Feuere ein Projektil ab */ }
	}
}

 

Im folgenden Beitrag werden wir die Spielfl├Ąche mit HTML und CSS gestalten und f├╝r die Objekte in unserer JavaScript-Datei vorbereiten.

 

Codepalm
Spieleprogrammierung f├╝r Einsteiger
Teil 3: Vorbereitung und Planung

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

Unity5 Spieleentwicklung: Umfassendes Training

EUR 34,99

Zu Amazon Mehr erfahren

Spieleprogrammierung mit Cocoa und OpenGL

EUR 49,70

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.