2D Grafiken

In dieser Kategorie findet ihr meine 2D Grafiken. Sie sind grösstenteils in einem speziellen isometrischen Format.

Wie man sich in den Tiles zurechtfindet …

Einige von euch haben mit Sicherheit Schwierigkeiten, die einzelnen Tiles auf den Sets auseinanderzuhalten, beziehungsweise sich darin zurechtzufinden. Deswegen beschreibe ich hier mal kurz anhand einer ISOMETRISCHEN Steinmauer, wie die einzelnen Tiles überhaupt entstehen, und wieso sie manchmal so schräge Masse haben. Die Puzzlearbeit bleibt trotzdem erhalten 😛

Meine alten nichtisometrischen Sets basieren auf einem 32 Dot Grid: mein Basistile war in diesem Falle 32 x 32 Pixel. Das kann im Einzelfall bedeuten, dass ein einzelnes Tile Masse von 128 X 96, 32 x 32, 64 x 32, etc hat. Eben alles was durch 32 teilbar ist. Was in diesem Falle noch einigermassen durchsichtig ist.

Allerdings habe ich in meinen neuen Iso Tilesets etwas andere Masse, und auch deutlich mehr Tiles, um zum Beispiel eine Mauer darzustellen. Bei einem alten Set bestand eine Mauer oder ein Zaun noch aus den Seitenteilen, vier Ecken, sowie den vier Abschlussteilen in Frontansicht und eventuell noch Variationen wie zum Beispiel eine Tür. Und das alles eben in 32 Pixel basierten Tiles. Nicht viele Möglichkeiten, um sich darin zu verlaufen.

Bei den isometrischen Sets sieht die Sache schon ein wenig anders aus. Hier mal ein kleiner Exkurs, wie sie entstehen.

Wenn ihr genauere Angaben haben wollt, wie man isometrische Tiles herstellt, ladet ihr euch am Besten mein isotiles tutorial herunter. Zu finden in der Tutorials Kategorie: isotiles tutorial

Ich verwende hier ein Grid von 16 Pixeln, damit die Tiles zusammenpassen. Und ein Isoformat von 4:3 für die neueren Sachen.

Kurzer Ausflug in die Welt des Standard ISO Tiles mit 2:1.

Das Standard Iso Format hat ja ein Verhältnis von 2:1 und ein Basistile von 64 x 32 Pixeln. Sieht ungefähr so aus:

Stellt euch einfach vor, dass das Rote mit Gras gefüllt ist 😉 . Und um damit ein Level zu füllen benötigt man ein Grid von Breite 32 mal Höhe 16 Pixeln. Ungefähr so:

Und bekommt durch die Rautenform doppelt Arbeit und Platzbedarf, weil ja der transparente Bereich zwischen den Tiles auch ein Extratile benötigt. Die grünen Tiles … .

Für grosse Bereiche verwende ich in MMF einen sogenannten Quick Backdrop. Der kachelt mir dann die Fläche. Mit der Rautenform bräuchte ich derer zwei, was mir nicht so recht schmecken wollte. Also weg mit dem grauen Bereich auf dem Tile, damit es rechteckig wird. Auch hat mich die relativ flache Ansicht des 2:1 Iso Formates nicht so recht gefallen. Ich wollte eine Ansicht, die ein wenig mehr von oben kommt. Deswegen habe ich eben das 4:3 Iso Format ausgeknobelt.

Selbst hier würde eine Rautenform zusammenpassen. Das dazugehörige Grid wäre 32 Pixel breit, und 24 Pixel hoch. Aus genannten Gründen verwende ich aber keine rautenförmigen Tiles. Diese rechteckigen Tiles passen in ein 16 dot Grid, was mir ein wenig mehr Freiheit beim Verteilen von meinen anderen Grafiken gibt. Bäume zum Beispiel. In 16 er Steps lassen sich selbige ungleichmässiger verteilen.

Ausflug Ende, und zurück zu meinem 4:3 Isoformat …

Mein Basistile hat dabei eine Grösse von 64 x 48 Pixeln. Für grössere Sachen das Doppelte: das Tile hat dann 128 x 96 Pixel. In dieses grosse Tile passt mein Basistile Vier mal rein. Und es passt immer noch alles ins 16 Dot Grid. Ganz grosse Sachen mache ich PI mal Schnauze, und schneide sie dann auf das 16 Pixel Grid zu. Meine Häuser zum Beispiel.

Zurück zu unserem Basistile. Auf diesem Basistile plaziere ich in meinem Renderprogramm nun alle Sachen: zum Beispiel eine Grastextur, oder eben eine Mauer …

Wie ihr seht, ist unter der Mauer mein Basistile zu sehen. Beim Abrendern ist dieses Basistile natürlich ins Fenster eingepasst. Unglücklicherweise kann ich bei manchen Sachen nicht in der Basistilegrösse abrendern. Das Ergebnis wäre nicht vollständig:

Ich muss also beim Rendern immer oben und unten ein Tile dranhängen, damit zum Beispiel die Mauer vollständig dargestellt wird:

Und das muss ich nun für alle Mauerteile tun, damit die Mauer später zusammenpasst. Die Sache hat nur den Haken, dass nun alle meine Mauertiles eine Grösse von 128 X 288 Pixeln hätten. Und das ist unpraktisch, weil sich erstens im ungünstigsten Fall zig Tiles im Spiel überlappen würden, und zweitens unnötiger Speicherverbrauch im späteren Spiel entstehen würde. Deswegen schneide ich meine Grafiken so zu, dass alle leeren und überflüssigen Flächen weggeschnitten werden. Und das natürlich in Gridsteps.

Wir erinnern uns, dass wir ein Grid mit 16 Pixeln verwenden. Also alles weg, was in 16 Pixel Schritten relativ zur Mauer übersteht:

Hier könnt ihr mal ein ungeschnittenes Tileset bestaunen. Riesengross, umpraktisch und unhandlich. In Originalgrösse würde das Set gar nicht auf den Schirm passen.
Damit ihr seht, was welches Tile ist, habe ich sie abwechselnd Rot und Rosa unterlegt. Jedesmal ein Tile von 128 X 288 Pixeln. Ihr könnt ja mal durchzählen. Deutlich mehr Tiles als bei simpler Frontansicht :p

Alles was Rot oder Rosa ist, fällt der virtuellen Schere zum Opfer. Alles mit braunem Hintergrund findet ihr auf dem fertigen Tileset wieder … Es ist doch eine ganze Menge, was da weggeschnitten werden kann. Und somit erklärt sich auch, wieso manchmal so schräge Masse bei den Tiles rauskommen.

AUFSCHLÜSSELUNG:

Zum Schluss noch eine kleine Aufschlüsselung, was für Tiles sich so auf einem Iso Tileset mit Mauern oder Zäunen tummeln können, unterteilt in vier Abschnitte:

Zuerst kommen die ganzen Isometrischen Stücke: einmal schräg rechts, einmal schräg links. Desweiteren die vier Ecken, sowie die Kreuzungsteile. Und nicht zu vergessen die isometrischen Abschlussteile. Im Falle meiner Mauer habe ich zwei unterschiedliche Abschlusstücke. Eimal gerade runter, und einmal auslaufend. Macht hier zwei mal vier Abschlüsse.

Dann kommen die geraden Stücke: einmal Front, einmal Hochkant. Dann wieder die vier Ecken sowie die Kreuzungsteile. Und eben wieder die Abschlussteile.

Dann folgen noch acht Stücke, um die geraden Tiles mit den Isometrischen zu verbinden.

Und zum Schluss solche Sachen wie kaputte Mauerabschnitte. Variationen eben. Bei einem Zaun zum Beispiel die Gartentore. Hier bei meiner Mauer ist es ein defektes Mauerstück.

Es kann auch sein, dass noch mehr Tiles zusammenkommen, wenn ich zum Beispiel bei einer Wand noch für Innen und Aussenwände, bzw. Randwände Tiles fertigen muss. Dies ist zum Beispiel bei dem Cavewall Iso Tileset der Fall.

Schlussendlich: verwendet ein Grid mit 16 Pixeln, um die Tiles zusammenzusetzen. Viel Spass beim Puzzlen 😉

Tips Sprites

Ich liefere meine Sprites als Einzelbilder im Bitmap Format. Der Hauptgrund dafür ist mein chronischer Mangel an Zeit. Mal davon abgesehen, dass ein Tileset mit allen 400 Einzelbildern schlichtweg zu unübersichtlich gerät.

So ein Sprite hat doch so einige Einzelbilder. Damit ein geschwungenes Schwert nicht einfach abgeschnitten wird, muss ich beim Rendern darauf achten, dass genug Rand für das Schwert vorhanden ist.

Dumm nur, dass dabei eine Menge unnötiger Rahmen entsteht … und der beansprucht eine Menge unnötigen Speicherplatz.

MMF bietet die Möglichkeit, jedes Bild auf die sichtbare Fläche zu verkleinern: reduce to visible Area. Das Bild der Animation wird dabei genau auf den sichtbaren Bereich zugeschnitten. Und es erhält dabei die ursprünglichen Koordinaten des Nullunktes, in MMF Hot Spot genannt, sodass der Sprite immer an der gleichen Stelle gezeichnet wird. Nun wird nicht jeder von euch MMF zum Spielebasteln verwenden …

Würdet ihr das gleiche zum Beispiel für ein C++ Spiel probieren, hättet ihr das Problem, dass sich der Nullpunkt zum Zeichnen des Animationsframes plötzlich bei 0/0 des zugeschnittenen SICHTBAREN Bildes befinden würde:

Was unweigerlich dazu führen würde, dass der Sprite zu hoppeln anfängt. Man beachte das rote Kreuz, das hier mal den Hot Spot darstellen soll. Relativ zu diesem Punkt werden alle Bilder der Animation gezeichnet. Vom dritten zum vierten Bild befindet sich der Körper deutlich sichtbar an anderer Stelle relativ zum Hot Spot als bei der Schwertanimation … . Logisch, der Hot Spot sitzt eben an anderer Stelle.

ihr habt nun drei Möglichkeiten, den Sprite trotzdem zu verkleinern. Alles mit Aufwand verbunden :

1. ihr nehmt MMF um eure Spiele zu basteln, hehe 😉

2. ihr schneidet die einzelnen Animationsbilder trotzdem auf den sichtbaren Bereich zu, und notiert zu jedem einzelnen Bild den Darstellungspunkt im späteren Spiel

3. ihr schneidet nur unten und rechts den überflüssigen Rahmen weg:

Letztere Möglichkeit bietet natürlich nicht so viel Ersparnis. Aber besser als nichts 🙂

Natürlich könnt ihr die Spriteanimationen auch unbearbeitet lassen. Allerdings bezahlt ihr dabei mit einer Unmenge unnötigem Ramverbrauch. Und spätestens wenn sich eine Menge Sprites auf dem Bildschirm tummeln, wird es eine Sache der Performance.

mit Hilfe von MMF´S Reduce to visible Area schrumpfte mein Swordstan immerhin von satten 10 mb auf 4, 4 mb. Truecolour.

Wenn ich später von Truecolour auf Highcolour reduziere, gehen davon nochmal 1/3 weg. Also dann nur noch ca. 3 mb 😉

Reduzieren von Truecolour nach Highcolour lohnt in jedem Falle. Der sichtbare Unterschied zu Truecolour ist sehr gering. Und ihr reduziert wie erwähnt die Filegrösse eurer Grafiken um circa 1/3 …