Isometrische Bodentiles mit Photoshop

Isometrische Spiele haben ihren eigenen Reiz, sind aber, sowohl bei der Programmierung, aber auch bei der Grafik, eine Herausforderung. In diesem Tutorial wird gezeigt, wie man sehr simpel und sehr schnell aus normalen Texturen isometrische macht.

Bodentexturen werden meist erst einmal als Top-Down Texturen erstellt und eine solche Textur nehmen wir auch als Ausgangspunkt. Das Isometrie-Problem ist mit etwas Mathematik in Photoshop sehr leicht lösbar. Erstelle eine normale, quadratische Textur. Schön groß, z. B. 256×256 Pixel. Dann dupliziere den Hintergrund (Strg+J) und blende die Hintergrundebene aus. Nun klickst Du auf die neue Ebene.

Wähle dann „frei Transformieren” und tippe die Werte ein.

• Skalieren: 100% und 80%
• Drehen: 26,57°
• Horizontal Neigen: -36,87°

Schon haben wir eine isometrische Textur. Damit diese auch entsprechend gemapt werden kann, können wir nun die entstandenen Lücken schließen, indem wir die Textur vier Mal duplizieren und an die entsprechende Position schieben.

Vergrößere erst einmal Deine Arbeitsfläche auf 600 Pixel, damit Du die ganze Ebene auswählen (Strg+A) und kopieren (Strg+C) kannst. Jetzt erstellst Du eine neue Grafik (Strg+N). Wenn Du mit einer Ausgangsgrafik von 256×256 gearbeitet hast, sollte das neue Bild eine Auflösung von 458×230 Pixel haben. Sobald Du das Bild erstellt hast, fügst Du Deine isometrische Textur ein. Deine Ausgangsgrafik kannst Du nun, ohne zu speichern, schließen. Wir wollen ja das Original erhalten.

Alternativ: Man kann auch, nachdem die Arbeitsfläche vergrößert wurde, die Größe über Bild -> Zuschneiden anpassen, indem man transparente Pixel auswählt und unter Entfernen alle vier Richtungen ankreuzt. Allerdings muss man beim Speichern auf jeden Fall Speichern unter… wählen, damit man nicht versehentlich das Original überschreibt.

Jetzt haben wir die isometrische Textur. Wenn wir im Spiel isometrisch mappen, können wir den Hintergrund ausschalten, so das die nicht texturierten Flächen transparent sind. Wenn nicht, duplizieren wir die Ebene vier Mal und richten die Ebenen so aus, dass sie genau zur jeweiligen Kante passen. Um sauberer arbeiten zu können, zoome ich an dieser Stelle ordentlich rein und prüfe, ob der Übergang pixelgenau bündig ist. Nach wenigen Sekunden ist das Ergebnis perfekt und ihr könnt den Boden nun als PNG exportieren. Die Datei würde ich nun mit seinen einzelnen Ebenen separat abspeichern, schließlich kann es immer passieren, dass man einen kleinen Fehler gemacht hat.

Die meisten gezeigten Arbeitsschritte lassen sich in Photoshop auch automatisieren. Wie das funktioniert, zeige ich in einem weiteren Tutorial.

Man kann natürlich auch aus isometrischen Texturen „normale” Texturen machen. Die Umkehroperation ist sogar etwas einfacher. Hier ist die Skalierung wichtig, damit die
Größe der Grafik unverändert bleibt: Skalieren 79,1% und 158,1%, Drehen -45°. Fertig!