GODOT Forum - Alle Foren

Einzelnes Tile verändern

Sun, 18 Feb 2024 20:23:54 +0100

Ein einzelnes Tile einer Tilemap zur Laufzeit ändern

I. Warum?
Es gibt Situationen, da möchte man während der Laufzeit seines Spiels das eine oder andere Tile seiner Tilemap in seiner Modulation, also Farbe oder Transparenz, ändern. Ganz speziell schreibe ich dies hier über folgende Situation: Mein Spieler bewegt sich durch eine kaputte und graue Welt. Überall dort wo der Spieler sich befindet, soll die Welt um ihn herum aber hell und grün sein.

II. Problem!
Wenn Du Dir die TileData eines Tiles (einer Cell) für eine bestimmte Zelle holst und die Eigenschaft "modulate" (die Eigenschaft ist vom Typ "Color") änderst, ändern sich alle Tiles in der Map die Du mit diesem Tile aus Deinem Tileset gesetzt hast. Wie man an ein einzelnes Tile der Map kommt und dessen TileData bearbeitet soll nicht Teil dieser Exkursion sein.

III. Lösungsansatz
Der erste Layer der Tilemap beinhaltet die kaputte, graue Welt und auf dem zweiten Layer liegt die grüne, helle Welt. Für den zweiten Layer habe ich in der Option "Modulate" das Alpha der Farbe auf 10 gesetzt. Setze es nicht auf 0, dann bekommst Du es nie wieder über diesen Wert hinaus. Desweiteren solltest Du wissen dass die Werte für "r", "g" und "b" zewischen 0.0 und 1.0 angesiedelt sein müssen, während "a" (Alpha, also Transparenz) einen Wert zwischen 1.0 und 255.0 erwartet. Warum das so ist? Keine Ahnung. Eventuell ein Bug.
Mit der Modulation Alpha auf 10 erreiche ich dass ich den zweiten Layer im Game nicht sehe. Die nächste Challenge ist es jetzt zur Laufzeit die Tiles auf dem zweiten Layer rund um den Spieler so zu verändern dass sie sichtbar werden. Ich möchte nun das in alle Richtungen drei Tiles von Layer 1 hell und grün werden. Also ermittle ich über welchem Tile sich mein Sprite gerade befindet, berechne dann alle Tiles in alle Richtungen die ich ändern muss und speichere diese in einem Dictionary. Als Tipp: das Tile hinter meinem Sprite ist das Zentrum. Von diesem gehe ich drei Tiles nach links, oben, rechts und unten. Mein Dictionary enthält am Ende also 49 Tiles mit ihren Koordinaten. Die Koordinate der Tiles fungiert hier als Key. Als Value könnt ihr entweder 1 angeben, oder aber eine Instanz von Color um zu definieren welche Modulation dieses eine Tile bekommen soll.

IV. Implementierung
Godot bietet diverse interne Funktionen an die wir überschreiben können. In diesem Fall sind es die Funktionen _use_tile_data_runtime_update und _tile_data_runtime_update. Diese sollten in einem Script implementiert werden welches der Tilemap zugewiesen wurde. Zudem ist es notwendig die Funktion _process zu implemetieren um in dieser einer force_update auf die Tilemap ausführen zu können.

Aber wie funktioniert das jetzt?
Beide oben genannten Funktionen werden für alle Layer der Tilemap und alle darin enthaltenen Tiles in jedem Frame ausgeführt. Die Sache kann also teuer werden wenn es viele Layer gibt und die Welt sehr groß ist!
Die Funktion _use_tile_data_runtime_update ermittelt ob es überhaupt Tiles gibt die aktualisiert werden müssen. Ihr werden von Godot der Layer übergeben der gerade angefasst wird und die Koordinate des Tiles. Wenn Euch das egal ist könnt ihr einfach ein true zurückgeben. Denkt aber daran dass in diesem Fall in jedem Frame die Map aktualisiert wird. Selbst wenn sich nichts verändert hat. In unserem Beispiel wissen wir dass sich nur Tiles auf Layer 1, also dem grünen, hellen Layer ändern. Außerdem kennen wir die Koordinate des Tiles welches aktualisiert werden muss. Somit ist es sinnvoll nur dann true zurück zu geben wenn Layer 1 als Parameter layer übergeben wurde und die Koordinate des Tiles über den Parameter coords.

Die Funktion _tile_data_runtime_update indessen führt die eigentliche Aktualisierung durch. Wie schon erwähnt wird sie in jedem Frame ausgeführt und liefert Euch den aktuell angefassten Layer, die Koordinate des gerade ermittelten Tiles und, super wichtig, die TileData des Tiles. Prüft also ob die Funktion gerade auf dem Layer aktiv ist den ihr ändern wollt und ob sie gerade bei dem Tile ist welches Euch interessiert. Wenn all das gegeben ist könnt ihr mit dem Parameter tile_data die Modulation dieses einen Tiles durchführen. Zum Beispiel mit tile_data.modulate.a = 255.0 um das Tile sichtbar zu machen.

V. Grenzen
Wenn ihr die Modulation eines Tiles halten möchtet, also für immer manifestieren, dann ist dies hier die schlechtere Lösung, denn jede Aktualisierung der TileMap bedeutet einen Einbruch der Performance. Wenn ihr aber immer nur einen kleinen Teil der Map ändern wollt funktioniert das hier hervorragend.

Eigenen Bitmapfont erstellen und nutzen

Sat, 06 May 2023 16:09:41 +0200

I. Worum geht es?

Gerade für klassische Pixel Art Games ist es großartig wenn man seinen eigenen, ganz individuellen Font verwenden kann anstelle von irgendwelchen OTF oder TTF Schriften. Dieses Tutorial zeigt Dir wie Du das bewerkstelligen kannst.

II. Die benötigten Zeichen

Um einen eigenen Bitmapfont (Pixel Font) erstellen zu können ist es zunächst notwendig eine Zeichenkette mit allen Zeichen die man später verwenden möchte zu erstellen. Wer nur Großbuchstaben und Zahlen verwenden will hat hier weniger Arbeit als jemand der gern den kompletten ASCII Satz anbieten möchte. Für meinen Font sieht die Zeichenkette so aus:

Code:
ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜabcdefghijklmnopqrstuvwxyzäöüß0123456789!"§$%&/()=?´`[]{}\*+~'#-_.:,;<>|@

Speichere Dir Deine Zeichenkette als Textdatei ab denn wir werden sie später noch dringend brauchen. Zudem ist es ganz praktisch beim pixeln hin und wieder nachschauen zu können welches Zeichen denn als nächstes kommt. Die Zeichen in Deiner Pixel Grafik müssen nämlich in exakt der Reihenfolge stehen wie sie auch in der Zeichenkette auftauchen.

III. Die Zeichenkomfortzone

Bevor Du anfängst Deinen Font zu pixeln muss klar sein dass sich die Zeichen in einem Raster (Grid) befinden müssen. Für meinen Font habe ich eine Größe von 10x12 Pixel gewählt. Die Zeichen sind etwas breiter als hoch um auch ausreichend Platz für die breiteren Zeichen wie das "W" oder das "@" zu haben.
Außerdem ist es wichtig zu wissen dass die Software, mit der wir später den fertigen Font erstellen, ordentlich Raum zwischen den Zeichen benötigt. Aus diesem Grund habe ich zwischen meinen Zeichen immer ein komplettes Rasterfeld leer gelassen. Sowohl horizontal als auch vertikal. Schlussendlich sieht meine Pixelgrafik also so aus:

font12x10-Grid.PNG (Größe: 42,21 KB / Downloads: 3)

Beachte dass der Hintergrund transparent sein sollte. Speichere Deine Grafik also am besten als PNG ab. Mit welcher Software man seinen Font zusammen pixelt ist hierbei komplett unerheblich.

IV. Ein Schuhkarton!

Die Software mit der man aus der o.g. Zeichenkette und der eigenen Pixel Grafik einen Bitmapfont bauen kann nennt sich ShoeBox. Ein kleines Open Source Tool das sogar noch mehr kann als nur Bitmapfonts zu generieren, aber darum soll es an dieser Stelle nicht gehen.
ShoeBox kannst Du Dir von der Seite http://renderhjs.net/shoebox/ herunterladen. Nach dem Start wirkt das Tool zunächst recht unspektaktulär.

Auch die Bedienung ist an mancher Stelle etwas gewöhnungsbedürftig. Das fängt bereits damit an dass wir, um unseren Font zu konfigurieren, mit der rechten Maustaste auf "Bitmap Font" klicken müssen. Es öffnet sich ein neues Fenster mit einigen wenigen Einstellungen. Das liegt aber daran dass wir uns gerade im Reiter "Basic" befinden. Klicke einfach einmal oben auf "Advanced" und schon sind wir dort wo wir hin wollen:

Bei Dir befindet sich in diesem Fenster natürlich kein roter Balken. Ich habe hier nur schon mal den Punkt markiert zu dem wir jetzt müssen. Er definiert nämlich welche Zeichen, in welcher Reihenfolge in unserem Font enthalten sein sollen. Wenn Du jetzt noch Deine Zeichenkette vom Anfang dieses Tutorial hast, kann es weiter gehen. Kopiere die Zeichenkette einfach über die bereits vorhandene bei dem Punkt "Txt Chars". Sollte bei Dir, eine Zeile tiefer bei "TxtLine Height" ein kleinerer Wert als 13 stehen, oder Dein Font ohnehin höher als 13 Punkte sein dann trage hier Deine Font Höhe in Pixel ein, mindestens aber 13. Das hat den Hintergrund dass kleinere Zeilenhöhen bewirken dass der Font in GODOT Schaltflächen (Label, Buttons etc.) am oberen Rand kleben und damit ein unschönes Gesamtbild geben.
Zum Schluss genügt ein Klick auf "Apply", das Einstellungsfenster schließt sich und das Hauptfenster von ShoeBox steht wieder allein da.

V. Funktioniert mein Font?

Um jetzt herauszufinden ob Dein Font funktioniert, also dass alle Zeichen an der richtigen Stelle stehen und auch die Abstände zwischen den Zeichen passen, musst Du jetzt Deine Font Pixel Grafik aus dem Explorer auf den Button "Bitmap Font" ziehen und dort "fallen lassen". Es öffnet sich jetzt ein Fenster mit einer Vorschau Deines Fonts. Bei mir sieht diese so aus:

Wenn Du hier in Deiner eigener Schrift geschrieben lesen kannst: "The quick brown fox jumps over the lazy dog!" und auch sonst alle Zeichen korrekt angezeigt werden, ist Dein Font fast fertig um in GODOT und Deinem Spiel genutzt zu werden. Aber bevor es soweit ist musst Du erst einmal auf "Save Font" klicken. Beachte dass ShoeBox die Font-Datei und eine neue Grafikdatei an den Ort sichert an dem auch Deine Pixel Grafik liegt! Bei mir liegt jetzt also neben meiner Grafikdatei "Font-light-12x10.png" noch die Font-Datei "Font-light-12x10-export.fnt" und die optimierte Grafikdatei "Font-light-12x10-export.png". Wie man den Standard-Exportnamen dieser Dateien ändert und andere Feinheiten können wir ja in den Kommentaren besprechen. Wichtig ist jetzt erst einmal dass wir die neue Font-Datei (.fnt) noch anpassen müssen, denn da stehen noch Sachen drin die GODOT verwirren und das wollen wir ja nicht.

VI. Fit machen für GODOT

Öffne die neu erzeugte Font-Datei mit einem Texteditor Deines geringsten Misstrauens. Gleich in Zeile 1 siehst Du den kompletten Pfad zum exportieren Font. Bei mir steht dort:

Code:
C:\Dev\Projekte\Godot\OH LECK!\__work\Font-light-12x10-export

Das benötigen wir so nicht. Entferne einfach alles inklusive dem letzten Backslash (\). Bei mir bleibt dann übrig:

Code:
Font-light-12x10-export

In Zeile 2 findest Du irgendwo die Zuweisung alphaChnl=1. Ändere hier die 1 in eine 0, ansonsten ist Dein Font in GODOT nicht transparent! An dieser Stelle geht ein fettes Danke an whiteshampoo auf dem deutschsprachigen GODO Discord-Server raus! Ohne ihn wäre ich nie darauf gekommen dass das die Lösung für meine nicht transparenten Fonts ist.
Weiter geht es in Zeile 3 in der wieder ein kompletter Pfad zu finden ist. Diesmal zu Deiner Pixel Grafik mit dem Font. Entferne hier alles aus dem Pfad so dass nur noch der Dateiname übrig bleibt. Speichere jetzt die Datei.

VII. Zeit zum Testen

Kopiere jetzt die exportierte Pixel Grafik und die neue Font-Datei in Dein GODOT Projekt Verzeichnis. Ich habe bei mit eine Verzeichnisstruktur als "assets\fonts\" angelegt, wo ich meine Schrift hin kopiere. GODOT wird diese Daten nun importieren und wir können den Font ausprobieren. Das erste Indiz dass Dein Font erfolgreich importiert wurde ist das Icon der Font-Datei. Es sollte so aussehen:

Jetzt erstelle eine 2D Scene und hänge ein Label an die Node2D. Im Inspektor erzeugst Du ein neues "LabelSettings" Objekt. Wenn Du dieses dann anklickst hast Du die Möglichkeit einen Font für Dein Label anzugeben. Wie man das global einstellt damit man nicht für jedes UI Element einen Font angeben muss soll nicht Teil dieses Tutorials sein.

Wenn alles geklappt hat sollte Dein Label nun seinen Text mit Deinem eigenen Font anzeigen. Herzlichen Glückwunsch!

Erster!

Fri, 03 Jun 2022 18:44:09 +0200

Falls Du das Forum gefunden hast bevor wir es publik gemacht haben: Herzlichen Glückwunsch! Gleich vorweg, wir gönnen uns noch mindestens 2 Wochen um es zu skinnen, zu pimpen und zu optimieren. Danach spülen wir es noch gut mit einem pflegenden SEO durch und dann geht es los.

Unabhängig von den derzeit noch stattfindenden Arbeiten kann das Forum natürlich jetzt schon verwendet werden. Alles kann, nichts muss.

Fühle Dich willkommen geheißen, Kuss auf Dein Herz!