Dies ist die letzte Lektion von Kapitel 2. Wir werden dabei auf Lektion 9 aufbauen. Also bitte erst Lektion 9 lesen, bevor ihr hier weitermacht.
Heute werden wir zwei zweidimensionale Arrays erstellen, eins, welches eine zufällige Anzahl an Werten beinhaltet, und ein weiteres, mit dem wir einen schönen bunten Bildschirm erzeugen.
Warum machen wir das?
Wenn wir unser Spiel weiter gestalten wollen, benötigen wir verschiedene Level. Um diese zu erstellen, werden wir Textdokumente benutzen. Wir werden Zahlen dazu verwenden, um dem Spiel zu sagen, wie unsere Welten aussehen sollen, das Spiel liest diese Daten ein und gibt sie als Umgebung wieder.
Stunde #2-28: Erstellen einer Tilemap
1. Wir erstellen eine neue Klasse in einem neuen Java Projekt, mit dem Namen Renderer.
2. Wir erweitern die Klasse mit Applet und importieren diese.
- hinter Renderer einfach extends Applet hinzufügen
- Mit STRG + Shift + O automatisch importieren
|
1 2 3 4 5 |
import java.applet.Applet; public class Renderer extends Applet{ } |
3. Es müssen die init() und die paint()-Methode überschrieben werden.
- Da wir unsere Klasse mit dem Applet erweitert haben, wird Java nach der init() und paint()-Methode suchen.
- Wir wollen unsere eigenen Methoden verwenden, dazu schreiben wir @Override vor diese Methoden.
- Wir importieren Graphics.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import java.applet.Applet; import java.awt.Graphics; public class Renderer extends Applet{ @Override public void init() { } @Override public void paint(Graphics g) { } } |
4. Die init()-Methode definieren
- Wir müssen die Größe unseres Applets definieren.
- Die Hintergrundfarbe muss eingestellt werden.
- Wir erstellen eine Tilemap.
- Wir importieren Color.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import java.applet.Applet; import java.awt.Color; import java.awt.Graphics; public class Renderer extends Applet{ @Override public void init() { setSize(800, 480); setBackground(Color.BLACK); createTilemap(); } @Override public void paint(Graphics g) { } } |
Eclipse zeigt uns nun bei createTilemap einen Fehler an. Hier müssen wir Folgendes tun:
Da wir so eine Klasse noch nicht erstellt haben, müssen wir das jetzt machen. Wenn ihr nun auf Create method ‚createTilemap()‘ klickt, wird diese Klasse erstellt.
|
1 2 3 4 |
private void createTilemap() { // TODO Auto-generated method stub } |
6. Die Tilemap Klasse
- Wir müssen ein zweidimensionales Array namens tilemap erstellen und definieren die Reihen und Spalten.
- Wir nehmen einen Zufallsgenerator und füllen jedes Feld mit einer Zahl zwischen 0 und 4.
Erstellen eines zweidimensionalen Arrays
Wir erstellen drei Variablen direkt unter public class Renderer extends Applet{. Damit erstellen wir in zweidimensionales Array mit dem Namen tilemap und integere Variablen für Reihen und Spalten.
static int[][] tilemap;
static int rows, columns;
Innerhalb der createTilemap()-Methode ergänzen wir Folgendes:
tilemap = new int[50][30];
rows = tilemap.length;
columns = tilemap[1].length;
- Als Erstes haben wir ein 2D-Array erstellt mit 50 Reihen und 30 Spalten.
- In der zweiten Zeile geben wir tilemap.lenght; den Wert unserer Reihen, also 50.
- Und in der dritten Zeile sagen wir, dass jedes dieser 50 Felder weitere 30 Felder beinhaltet, unsere Spalten. Also ist tilemap[1].length; gleich 30.
- Bedenkt bitte, dass jeder Index bei 0 beginnt, also können wir jedes Element einem Index zwischen 0 und 49 zuordnen.
Erstellen des Zufallsgenerators
Wir erstellen als Erstes ein Zufallsobjekt und importieren Random:
Random r = new Random();
Als nächstes werden wir zwei Schleifen benutzen, um alle Felder mit einer Zahl zwischen 0 und 4 zu füllen.
|
1 2 3 4 |
for (int i = 0; i < rows; i++) { for (int j = 0; j < columns; j++) { tilemap[i][j] = r.nextInt(5); } |
Falls ihr noch ein wenig durcheinander seit, wie so ein 2D-Array aussieht, hier ein mal ein Bild.
Nun müssten wir alle den folgenden Code haben:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import java.applet.Applet; import java.awt.Color; import java.awt.Graphics; import java.util.Random; public class Renderer extends Applet{ static int[][] tilemap; static int rows, columns; @Override public void init() { setSize(800, 480); setBackground(Color.BLACK); createTilemap(); } private void createTilemap() { // TODO Auto-generated method stub tilemap = new int[50][30]; rows = tilemap.length; columns = tilemap[1].length; Random r = new Random(); for (int i = 0; i < rows; i++) { for (int j = 0; j < columns; j++) { tilemap[i][j] = r.nextInt(5); } } } @Override public void paint(Graphics g) { } } |
Stunde #2-29: Zeichnen der Tilemap
Nun werden wir 16 x 16 Pixel große Quadrate erzeugen, so dass unsere 50 Reihen und 30 Spalten ausgefüllt sind (800, 480). Diesen Quadraten geben wir eine zufällige Farbe basierend auf den Zahlen zwischen 0 und 4.
Als Erstes müssen wir die folgenden Zeilen zur paint(Graphics g)-Methode:
|
1 2 3 4 5 6 |
for (int i = 0; i < rows; i++) { for (int j = 0; j < columns; j++) { int mod_i = 16*i; int mod_j = 16*j; } } |
Diese beiden Schleifen haben wir auch schon in der createTilemap()-Methode benutzt. Wir werden i und j benutzen, um auf die Koordinaten zu verweisen.
Wir haben nun 50 Reihen und 30 Spalten aber eine Auflösung von (800, 480). Also müssen wir unser Koordinatensystem anpassen, indem wir (16*i, 16*j) nutzen werden. Deshalb müssen wir noch zwei Zeilen zu unseren Schleifen hinzufügen.
|
1 2 3 4 5 6 7 8 9 |
@Override public void paint(Graphics g) { for (int i = 0; i < rows; i++) { for (int j = 0; j < columns; j++) { int mod_i = 16*i; int mod_j = 16*j; } } |
Die Unterstriche „_“ bedeuten hier nichts, wir haben hier nur ein modifiziertes i und ein modifiziertes j.
Nun müssen wir direkt unterhalb von unseren modifizierten i und j einen Schalter einbauen, der die tilemap[i][j] als einen Schlüssel nimmt und diesen mit den Zahlen von 0 bis 4 vergleicht.
Für jeden Fall werden wir eine Farbe bestimmen und diese an den entsprechenden Koordinaten (mod_i,mod_j) zeichnen lassen. Des Weiteren müssen wir Frame importieren.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import java.applet.Applet; import java.awt.Color; import java.awt.Frame; import java.awt.Graphics; import java.util.Random; public class Renderer extends Applet{ static int[][] tilemap; static int rows, columns; @Override public void init() { setSize(800, 480); setBackground(Color.BLACK); createTilemap(); } private void createTilemap() { // TODO Auto-generated method stub tilemap = new int[50][30]; rows = tilemap.length; columns = tilemap[1].length; Random r = new Random(); for (int i = 0; i < rows; i++) { for (int j = 0; j < columns; j++) { tilemap[i][j] = r.nextInt(5); } } } @Override public void paint(Graphics g) { for (int i = 0; i < rows; i++) { for (int j = 0; j < columns; j++) { int mod_i = 16*i; int mod_j = 16*j; switch (tilemap[i][j]) { case 0: g.setColor(Color.RED); g.fillRect(mod_i, mod_j, 16, 16); break; case 1: g.setColor(Color.BLUE); g.fillRect(mod_i, mod_j, 16, 16); break; case 2: g.setColor(Color.YELLOW); g.fillRect(mod_i, mod_j, 16, 16); break; case 3: g.setColor(Color.WHITE); g.fillRect(mod_i, mod_j, 16, 16); break; case 4: g.setColor(Color.GREEN); g.fillRect(mod_i, mod_j, 16, 16); break; } } } } } |
Wenn ihr nun auf Play drückt, haben wir unser ausgefülltes Applet.
Damit endet diese Lektion und auch Kapitel 2. In der nächsten Lektion werden wir diese Technik anwenden, um Level zu erstellen. Im nächsten Kapitel werden wir Level erstellen, Kollisionen programmieren und unserem Roboter einen Gesundheitsbalken verpassen.
Ich hoffe, diese Lektion war für jeden verständlich. Ich weiß, dass alle ein unterschiedliches Niveau an Programmiererfahrung und -verständnis mitbringen und daher versuche ich, einen guten Mittelweg zu finden, um einerseits die Leute nicht zu langweilen und andererseits keinen zurückzulassen. Ich nehme immer an, dass ihr euch an den Stoff der vorherigen Lektionen erinnert, aber der eine oder andere kann natürlich manches schon wieder vergessen haben. Also lasst es mich wissen, wenn ich irgendwas ausführlicher erklären soll.
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
Lektion 9 – 2D-Felder Kapitel 3 Erstellen eines Spiels Teil 2