Java/Tutorials/Karteneditor Kapitel 4

Entwicklung eines einfachen Karteneditors
Autor
Thematik	Java
Vorraussetzungen	Programme: Fähigkeiten:
Andere Teile	Einleitung 1 - Das Fenster 2 - Kartenmodel I 3 - Kartenmodel II 4 - Die TilePalette anzeigen 5 - Die Kartenanzeige 6 - Zeichnen von Tile über Maus-Ereignisse I 7 - Zeichnen von Tile über Maus-Ereignisse II 8 - Das Hauptmenü 9 - Anlegen einer neuen Karte 10 - Speichern von Karten 11 - Laden von Karten 12 - Schlussbemerkung Quellcode Bekannte Fehler und deren Lösung Material Datei:BeispielKarteneditor.jar Tileset.png Eclipse-Projekt]

In diesen Abschnitt, werden wir die Tile-Palette unseres Editors erstellen. Aber zuvor brauchen wir noch eine Demo-Karte, womit wir dann unsere Funktion testen können. Daher erweitern wir unser KartenFenster-Klasse um eine Klassenvariable. Diese nennen wir aktuelleKarte, welche vom Typ Karte ist, die wir im vorangegangenem Kapitel erstellt haben.

public class KartenFenster extends JFrame{
 
	public Karte aktuelleKarte;
 
	public KartenFenster() {
		//größe des Fensters setzen
		setSize(1024, 768);
		//Setzen eines Fenstertitels
		setTitle("Karteneditor");
	}
}

Nun legen wir uns eine Startkarte an, die wir später für Tests usw. verwenden werden.

Dafür erweitern wir unseren Konstruktor und erzeugen eine Karte mit aktuelleKarte=new Karte(karte, tilesetDateiname, name); Wir erzeugen also einen Integer-Array was unsere Karte darstellt, geben den Dateinamen unseres Tilesets an, also Tileset.png und wie unsere Karte heißen soll.

public class KartenFenster extends JFrame{
 
	Karte aktuelleKarte;
 
	public KartenFenster() {
 
		int karte[][]=new int[100][100];
		String name="Unsere erste Karte";
		String tilesetDateiname="Tileset.png";
		aktuelleKarte=new Karte(karte, tilesetDateiname, name);
 
		//größe des Fensters setzen
		setSize(1024, 768);
		//Setzen eines Fenstertitels
		setTitle("Karteneditor");
	}
}

Als Tileset könnt ihr dieses Tileset verwenden:

Packt die Datei in euren Entwicklungs-Ordner, wo die Datei von Java gefunden werden kann. Wenn ihr mit Eclipse arbeitet, packt die Datei in euren Projekt-Ordner, also in den Ordner, wo sich die Ordner src und bin befinden. Achtet auch auf Groß/Kleinschreibung der Datei. Sie muss Tileset.png heißen und nicht tileset.png.

Da nun alle Vorbereitungen abgeschlossen sind, erstellen wir eine Klasse namens TilePalette. die wir von JPanel ableiten. Es sollte wie folgt aussehen:

public class TilePalette extends JPanel {
	KartenFenster fenster;
	public TilePalette(KartenFenster kartenfenster)
	{
		fenster=kartenfenster;
	}
}

Wie ihr seht, verwenden wir die Klasse KartenFenster als Parameter für den Konstruktor, sowie als Klassenvariable. Das machen wir um später auf alle Elemente des Editors zugreifen zu können, sprich auf die Karte und das Panel wo wir unsere Karte zeichnen und wo wir Änderungen machen. Die nächste Klassenvariable die wir benötigen, ist die Variable in die wir die ID der aktuell verwendeten Tile von unserem Tileset schreiben. Daher legen wir eine Variable vom Typ Integer an.

public class TilePalette extends JPanel {
	KartenFenster fenster;
	int aktuelleTile=0;
	public TilePalette(KartenFenster kartenfenster)
	{
		fenster=kartenfenster;
	}
}

Als nächstes legen wir die Größe des JPanels fest, da wir ansonsten nichts oder nur einen Teil angezeigt bekommen. Dafür verwenden wir die Methode setPreferredSize. Damit erzwingen wir die Größe des JPanel. Wir werden je 4 Tiles nebeneinander anzeigen lassen. Wir benutzen die Formel 4*32, also 4 Tile mal je 32 Pixel. Für die Höhe nehmen wir die Anzahl der vorhanden Tiles und teilen diese durch 4. Diese Zahl gibt an wieviele Tiles in der Höhe angezeigt werden. Diese Zahl multiplizieren wir mit der Tilegröße, also 32.

public class TilePalette extends JPanel {
	KartenFenster fenster;
	int aktuelleTile=0;
	public TilePalette(KartenFenster kartenfenster)
	{
		fenster=kartenfenster;
		setPreferredSize(new Dimension(4*32, (fenster.aktuelleKarte.tileset.size()/4)*32));
	}
}

Nun zeichnen wir uns das Tileset auf den JPanel, und zwar mit der paintComponent()-Methode. Zuerst benötigen wir die Anzahl an vorhandenen Tiles, daher greifen wir auf unsere KartenFenster-Klasse mit der Variable fenster zu und holen uns über die Karte und der Methode size() die Anzahl der Tile. Anschließend legen wir zwei Variablen an, einmal für die Zeile und einmal für die Spalte. Mit diesen Variablen bestimmen wir die aktuelle Position eines Tile auf dem JPanel. In der For-Schleife gehen wir alle Tiles durch und zeichnen diese mit drawImage(Bild,x,y, das JPanel) auf das JPanel. Mit if(i%4 == 3) bestimmen wir wann eine neue Zeile beginnen soll. Das % steht übrigens für Modulator und gibt uns den Rest von einer Division zurück. Wir wählen hierfür die 3. Da der Array-Index bei 0 anfängt, steht der Wert 3, dafür, dass nach jeweils 4 Tiles ein Zeilenumbruch erfolgt. Dies machen wir mit der Variable zeile. Um mögliches Flackern zu vermeiden, werden wir nun die Methode setDoubleBuffered(true); noch zusätzlich in unseren Konstruktor schreiben.

public class TilePalette extends JPanel {
	KartenFenster fenster;
	int aktuelleTile=0;
	public TilePalette(KartenFenster kartenfenster)
	{
		fenster=kartenfenster;
		setPreferredSize(new Dimension(4*32, (fenster.aktuelleKarte.tileset.size()/4)*32));
		setDoubleBuffered(true);
	}
 
	public void paintComponent(Graphics g)
	{
		int tileAnzahl=fenster.aktuelleKarte.tileset.size();
		int zeile=0;
		int spalte=0;
		for(int i=0;i<tileAnzahl;i++)
		{
			BufferedImage tile=fenster.aktuelleKarte.tileset.get(i);
			g.drawImage(tile,spalte*32, zeile*32, this);
 
			if(i%4 == 3)
			{
				zeile++;				
				spalte=0;
			}
			else spalte++;
		}
	}
}

In unserem nächsten Schritt, wollen wir uns unsere Tile-Palette anzeigen lassen. Daher setzen wir zuerst einmal mit setLayout das BorderLayout, womit man sehr einfach die Positionen unserer Elemente platzieren kann. Anschließend erstellen wir eine Klassenvariable vom Typ TilePalette, die wir ja erstellt haben und nennen diese palette. Die Initialisierung erfolgt dann nach dem Initialisieren der neuen Karte(Reihenfolge beachten, sonst könnte es zu Fehlern kommen!) und übergeben unserer TilePalette-Klasse unsere KartenFenster-Klasse mit der this Anweisung. Dadurch wird die aktuelle Klasse KartenFenster an die TilePalette-Klassen übergeben. Anschließend fügen wir unsere Palette dem Fenster mit add(palette, BorderLayout.WEST) hinzu. Der Parameter mit BorderLayout.WEST, sagt aus, dass wir unsere Palette links im Fenster platzieren. Wer die Palette gerne rechts hätte müsste EAST schreiben.

public class KartenFenster extends JFrame{
 
	Karte aktuelleKarte;
	TilePalette palette;
 
	public KartenFenster() {
 
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		this.requestFocus();
		int karte[][]=new int[100][100];
		String name="Unser erste Karte";
		String tilesetDateiname="Tileset.png";
		aktuelleKarte=new Karte(karte, tilesetDateiname, name);
		palette=new TilePalette(this);
		setLayout(new BorderLayout());
 
		add(palette, BorderLayout.WEST);
 
		//größe des Fensters setzen
		setSize(1024, 768);
		//Setzen eines Fenstertitels
		setTitle("Karteneditor");
	}
}

Nun sollte das Fenster ungefähr so aussehen: