Das Spielfeld eines Browser-Spiels

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.