Grundlagen der Spieleprogrammierung – Das Spielfeld

Das Spielfeld

 

Die Grundstruktur und der Aufbau des Haupt-Fensters f├╝r das Spiel

 

Im letzten Beitrag Vorbereitung und Planung haben wir eine Klasse f├╝r unser Raumschiff erstellt und f├╝r Benutzer-Eingaben vorbereitet um das Schiff sp├Ąter zu steuern und Projektile abfeuern zu k├Ânnen. Jedoch bringt uns die beste Klasse nichts, wenn der Spieler das Ergebnis seiner Eingaben und das weitere Spielgeschehen nicht sehen kann.

In diesem Beitrag bereiten wir eine Spiele-Landschaft mit HTML und CSS vor, um den visuellen Eindruck zu vermitteln, dass der Spieler sich im Weltraum befindet. Durch mehrere ├╝bereinander gelagerte Bilder und einer flie├čenden Animation k├Ânnen wir den Effekt verschaffen, dass sich das Raumschiff von unten nach oben bewegt. Dazu verwenden wir einige Bilder, die unter die CC0-Lizenz registriert sind. Die Lizenzbestimmungen von CC0 besagen, dass die zur Verf├╝gung gestellten Bilder (im Fall unserer verwendeten Bilder von Kenney Vleugels) f├╝r private und kommerzielle Projekte verwendet werden d├╝rfen ohne den Ersteller der Dateien namentlich zu nennen oder auf seine Webseite zu verweisen. Weiterhin d├╝rfen wir die Bilder nicht als unser Eigentum betiteln oder die Bilder einzeln oder geb├╝ndelt verkaufen. Erst nachdem wir unsere Arbeit als Programmierer fertig gestellt haben, indem wir den Bildern Leben einhauchen d├╝rften wir dieses Projekt zum Verkauf anbieten.

Da wir ohne einen Nachweis nicht beweisen k├Ânnen unter welcher Lizenzvereinbarung diese stehen stelle ich dir zus├Ątzlich zu den Bild-Dateien die Lizenz-Datei zur Verf├╝gung. Sichere diese Text-Datei am besten im gleichen Verzeichnis in der sich die Bilder befinden. Du kannst die ben├Âtigten Bilder jeweils einzeln in den jeweiligen Schritten per Rechtsklick und ÔÇ×Grafik speichernÔÇť oder per Drag&Drop auf deinen lokalen Rechner f├╝r die weitere Verarbeitung herunterladen.

 ---

Space Shooter graphics by Kenney Vleugels (www.kenney.nl)

You may use these graphics in personal and commercial projects.
Credit (www.kenney.nl) would be nice but is not mandatory.

 --

 

F├╝r den Hintergrund unserer Spiel-Welt verwenden wir 3 unterschiedliche Bilder die Sterne und ÔÇ×Bewegungs-StreifenÔÇť abbilden. Da die Motive auf diesen Bildern wei├č mit einer hohen Transparenz sind empfehle ich einen dunklen Hintergrund zu verwenden.

Unser Raumschiff soll sich etwas neigen, wenn der Spieler es nach links oder nach rechts bewegt. Dazu brauchen wir die passenden Bilder. Ich habe bereits ein Spritesheet f├╝r Dich erstellt. Du wirst beim Herunterladen des Bilds feststellen, dass die 3 Raumschiffe keine einzelnen Bilder sind, sondern in ein einziges gr├Â├čeres Bild ist.

 

Da wir Hintergrundbilder f├╝r unsere Grafiken verwenden und keine IMG-Tags k├Ânnen wir einer Eingrenzung der Bilddarstellung und mit der CSS-Eigenschaft background-position die Position im Bild und somit die Aussehen des Elements ver├Ąndern. Mit dieser Methode sparen wir Dateivolumen und sind flexibel in der Handhabung der Grafik.

Auf den ersten Blick sieht die Verwendung von Spritesheets vielleicht ein wenig befremdlich aus, aber sie sind viel einfacher zu verwenden als der erste Schein vermutet. Wichtig zu wissen ist, dass der Ausschnitt des Bildes sich nicht in die positive Richtung der X- und Y-Koordinaten bewegt, sondern in den negativen Bereich. Im folgenden Beispiel wird das Verhalten etwas klarer.

Anstatt die Animation mit JavaScript zu erstellen verwenden wir CSS-Animationen, die einen Bruchteil der Performance gegen├╝ber des JavaScript-Codes verbrauchen. Durch die Verwendung von background-repeat und der background-position wird der Hintergrund fortlaufend und mit einem nahtlosem ├ťbergang nach unten bewegt. Dadurch entsteht die Illusion, dass das Raumschiff immer weiter fliegt, obwohl es sich immer an der gleichen Stelle in unserem Browser-Fenster befindet.

#main_wrapper {
	background-color: #000529;
	position: relative;
	height: 600px;
	width: 600px;
	overflow: hidden; 
	display: block;
	margin: 0 auto;
}
#main_wrapper .background {
	background-repeat: repeat;
	background-size: 254px 256px;
	background-position: 0px 0px;
	width: 100%;
	height: 100%;
	
	position: absolute;
	left: 0;
	top: 0;
}
#main_wrapper #background1.background {
	background-image: url( '/wp-content/themes/atomik_theme/scheme/post/game/games/SpaceShooter/img/starBackground2.png' );
	animation: BACKGROUND 1s linear 0s infinite;
	opacity: .4;
}
#main_wrapper #background2.background {
	background-image: url( '/wp-content/themes/atomik_theme/scheme/post/game/games/SpaceShooter/img/starBackground3.png' );
	animation: BACKGROUND 25s linear 0s infinite;
	opacity: .5;
}
#main_wrapper #background3.background {
	background-image: url( '/wp-content/themes/atomik_theme/scheme/post/game/games/SpaceShooter/img/starBackground4.png' );
	animation: BACKGROUND 15s linear 0s infinite;
	opacity: .6;
}
@-webkit-keyframes BACKGROUND {
	from {
		background-position-y: 0px;
	}
	to { 
		background-position-y: 256px;
	}
}

#spaceship {
	background-image: url( '/wp-content/themes/atomik_theme/scheme/post/game/games/SpaceShooter/img/player.png' );
	background-repeat: no-repeat;
	background-size: 148.5px 37.5px;
	background-position: -49.5px 0px;
	
	width: 49.5px; 
	height: 37.5px;
	
	position: absolute;
	left: 288px;
	top: 340px;
}
#spaceship[data-direction="left"] {
	background-position-x: 0px;
}
#spaceship[data-direction="right"] {
	background-position-x: -100px;
}

 

 

Die HTML-Struktur wird sehr einfach gehalten. Alles was wir hierf├╝r ben├Âtigen ist ein Wrapper, der eine relative Position zum Inhalt erh├Ąlt und 3 Ebenen mit unseren Hintergrundbildern, die ├╝ber die ganze Breite und H├Âhe mit einer absoluten Positionierung unseres Wrappers andockt. Dank dieser Art den Spielplan zu erstellen k├Ânnen wir den Rahmen des Spiels so gro├č definieren wie wir m├Âchten. Die Hintergrundbilder richten sich immer an unser ├╝bergeordnetes Element aus.

Sobald ein neues Element in unserem Spiel dargestellt werden soll k├Ânnen wir dieses in den Wrapper mit einer absoluten Positionierung hinzuf├╝gen. Die Position kann ├╝ber die CSS-Formatierungen left f├╝r die X-Koordinate und top f├╝r die Y-Koordinate gesetzt werden. Dadurch transportieren wir die Position im JavaScript-Objekt auf unsere Leinwand und k├Ânnen dem Spieler ein visuelles Feedback geben, wo sich sein Raumschiff, die Meteore oder andere Elemente befinden.

Stelle in Deinem JavaScript sicher, dass Elemente wie das Raumschiff erst nach den Hintergrundgrafiken in den Wrapper aufgenommen werden, da sich die Sterne sonst ├╝ber Deinem Schiff befinden. Wenn Dir das noch nicht sicher genug sein sollte kannst Du zu den Hintergrund-Grafiken die CSS-Eigenschaft z-index hinzuf├╝gen um mit Integer-Werten manuell festzulegen, welches Element ├╝ber oder unter deinem Raumschiff dargestellt wird.

<html>
	<head>
		<style>
			/* Unser CSS-Code */
		</style>
	</head>
	<body>
		<div id="main_wrapper">
			<div id="background3" class="background"></div>
			<div id="background2" class="background"></div>
			<div id="background1" class="background"></div>
			<div id="spaceship"></div>
		</div>
	</body>
</html>

 

Wenn du die Hintergrundbilder, sowie die Animationen richtig erstellt und die HTML-Struktur in die Richtige Reihenfolge gebracht hast siehst du nun ein Raumschiff, dass unbeweglich durch das Weltall schwebt und die Sterne an es vorbei ziehen.

 

Das ist aber noch lange kein Spiel an dem Deine Freunde Spa├č haben k├Ânnten. Unserem Raumschiff fehlt noch die Eigenschaft sich zu Bewegen. Im folgenden Beitrag verbinden wir unser JavaScript-Objekt des Raumschiffs und unsere visuelle Darstellung, damit der Spieler einen beweglichen Avatar in Deinem Universum vorfindet.

 

Codepalm
Spieleprogrammierung f├╝r Einsteiger
Teil 4: Das Spielfeld

Abonniere die Fanpage von Codepalm und verpasse keine Beitr├Ąge mehr

Codepalm auf Facebook
 
 
 
 
Das k├Ânnte Dir gefallen:

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

EUR 29,90

Zu Amazon Mehr erfahren

Spieleprogrammierung f├╝r Anf├Ąnger

EUR 39,41

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.