Feb 142013
 

Willkommen im Kapitel 3. In den nächsten Lektionen werden wir lernen, wie man Level erstellt, Kollisionen programmiert, den Heliboys eine Art Intelligenz verpasst und einiges mehr, um unserem Spiel den letzten Schliff zu geben. Wir sind nun schon fast fertig mit unserem ersten Java-Spiel, also lasst es uns angehen.

Teil 1: Ein gemeinsamer Start

Wir werden da weiter machen, wo wir in Kapitel 2 Lektion 8 aufgehört haben. Falls ihr euren Code nicht mehr habt oder ihr erst hier einsteigt, hier der Code aus Kapitel 2 Lektion 8.

Source Code

Kapitel 2 Lektion 8

Nachdem wir nun alle mit dem selben Code arbeiten, können wir beginnen.

1. Wir benötigen für unsere Felder erst einmal Bilder, um diese auszufüllen. Dazu ladet bitte diese beiden Bilder herunter und kopiert diese in den data-Ordner.

tiledirt tileocean

 

Diese beiden Bilder sind 40 x 40 Pixel groß. Da wir eine Bildschirmauflösung von 800 x 480 nutzen, sind wir in der Lage, 12 von oben nach unten und 20 von links nach rechts darstellen zu lassen.

2. Am besten ist es, wenn wir zu unserem alten Himmel-Hintergrundbild zurückkehren. Dazu ladet ihr das Bild herunter und ersetzt damit die vorhandene Datei background.png im data-Ordner.

background

Teil 2: Tile (Kachel bzw. Feld) Klasse erstellen

Warum benötigen wir diese Bilder? Wir wollen am Ende folgendes Ergebnis haben:

9182060_orig

1. Wir erstellen eine neue Klasse innerhalb des basteldroid Pakets namens Tile.

2. Wir fügen die folgenden Variablen hinzu:

tileX ist die X-Koordinate und tileY die Y-Koordinate in unserem Feld. speedX sollte mittlerweile jedem bekannt sein und type definiert, ob wir einen Ozean darstellen oder eben Erde.

3. Wir erstellen ein Hintergrundobjekt namens bg und verweisen es auf das bg1 Objekt in der StartingClass.

 4. Erstellen eines Konstrukteurs.

Wie bereits erwähnt, haben unsere Bilder eine Größe von 40 x 40 Pixeln. Wir werden mit Indizes arbeiten, da dies wesentlich komfortabler ist als mit Pixeln. Daher werden wir jeden Index mit 40 multiplizieren.

Wenn wir nun den Index (0, 0) haben und diesen mit 40 multiplizieren, bekommen wir für tileX und tileY (0, 0). Wenn wir aber den Index (1, 0) haben, bekommen wir (40, 0).

5. Erstellen der update()-Methode.

Diese kennen wir schon aus den anderen Klassen unseres Spiels und sie wird bei jedem Durchlaufen der Spielschleife aufgerufen.

Als Typ 1 nehmen wir unseren Ozean. Dieser soll sich langsam im Hintergrund bewegen. Wenn aber nun unser Roboter sich bewegt, muss sich der Ozean etwas schneller bewegen.

Dabei wird euch auffallen, dass sich der Ozean langsamer bewegt als unser Roboter. Dies liegt daran, dass der Roboter viel näher ist als der Ozean im mittlerem Hintergrund. Unser Wolkenhimmel bewegt sich aber noch langsamer als der Ozean, da dieser noch weiter hinten ist.

 6. Getters and Setters.

Rechtsklick in den Code, danach Source > Generate Getters and Setters…

7. Die Tile-Klasse

Teil 3: Änderungen in der Robot und Enemy Klasse

1. Da wir nun den Roboter im Vordergrund, den Ozean als mittleren Hintergrund und die Wolken als Hintergrund haben und diese sich auch unterschiedlich schnell bewegen sollen, müssen wir ein paar Anpassungen vornehmen.

Dazu gehen wir in die vierte if-Anweisung innerhalb der update()-Methode in der Robot Klasse und nehmen die folgenden Änderungen vor:

Damit wird sich der Hintergrund 1/5 langsamer bewegen als der Roboter.

2. Nun gehen wir in die Enemy Klasse und ändern Folgendes aus den selben Gründen:

 Teil 4: Hinzufügen der Tile Klasse in die StartingClass.

Hierfür werden wir nun ausschließlich in der StartingClass arbeiten.

1. Als Erstes werden wir unsere beiden neuen Bilder hinzufügen und eine neue ArrayListe Tile:

 2. Wir fügen unsere neuen Bilder zu den Bildeinstellungen hinzu:

 3. Als Nächstes müssen wir unsere neue ArrayListe initialisieren. Dazu fügen wir den folgenden Code der start()-Methode hinzu:

Hier führen wir eine zweifache Schleife durch, wie in Kapitel 2 Lektion 9 und 10. Die Zahlen i < 200 und j < 12 ergeben 2400 mögliche Positionen.

4. Mit der Erstellung der Tile ArrayListe müssen wir diese nun immer wieder einem Update unterziehen und die individuellen Tiles in der ArrayListe zeichnen.

Die folgenden zwei Methoden erstellen wir unter der paint()-Methode, so dass wir weiterhin Ordnung halten:

Beide Methoden benutzen nur einen Index. In der for-Schleife wird i immer um 1 erhöht, von 0 bis 2399, so haben wir 2400 Tiles, welche wir zeichnen können.

Wenn wir nun innerhalb von g.drawImage schauen, sehen wir, dass hier das Bild gesucht und an den entsprechenden X- und Y-Koordinaten gezeichnet wird.

5. Zum Schluss müssen wir diese beiden Methoden noch aufrufen.

Die updateTile()-Methode rufen wir innerhalb der run()-Methode auf:

Als Nächstes müssen wir noch dafür sorgen, dass unsere Tiles auch gezeichnet werden. Das geschieht innerhalb der paint()-Methode. Hier wollen wir, dass die Tiles hinter unseren Charakteren gezeichnet werden, aber noch vor unserem Hintergrund. Daher müssen wir die Tiles unter dem Hintergrund platzieren und noch vor unseren Charakteren:

Damit sollten wir die folgende StartingClass haben:

Das Ergebnis kann sich sehen lassen:

1

Wir werden hier in Lektion 2 weiter machen.

Source Code

Für diejenigen unter euch, die hier einsteigen möchten, ohne den ganzen Code abtippen zu müssen, habe ich das Projekt exportiert. Mit der Importfunktion könnt ihr das Projekt bequem bei euch einfügen. Unter der Kategorie Eclipse und Java > Import und Export habe ich erklärt, was dafür zu tun ist.

Kapitel 3 Lektion 1

Falls ihr Fragen habt, immer raus damit, ich helfe euch sehr gerne. Hinterlasst bitte einfach einen Kommentar.

Teilt diese Seite mit euren Freunden und besucht uns mal auf Facebook und auf Google+, das würde dieser Seite wirklich weiterhelfen, danke sehr. Auch ein Klick auf die Werbung hilft dabei, diese Seite am Laufen zu halten.

 

Quelle: Original Anleitung auf englisch von Kilobolt Studios

Kapitel 3 Erstellen eines Spiels Teil 2 Lektion 2 – Level erstellen Teil 2