2D-Shader in Godot für die Spieleentwicklung: Kodieren einer animierten Lavalampe

1. Code eines Lava: Hi, ich bin Isaac und ich mache Gastkeeper Spiele. In dieser Klasse erstellen wir eine vollständig digitale Lava-Lampe mit Shadern und der Godot-Spiele-Engine, die eine freie und Open-Source-Spiele-Engine ist. Das Ziel hier ist Spiel und Experimentieren. Es gibt unzählige Möglichkeiten für Ihre Lava-Lampe, während Sie es codieren und nach der Tatsache. Sie können Dinge wie die Größe und Geschwindigkeit der Blobs, die Hintergrundfarbe, die Vordergrundfarben, die Farbverläufe, das Glühen jedes einzelnen Blobs sowie die Basis selbst ändern. Wir werden unseren Lava-Lampen-Code mit der Godot-Schattierungssprache schreiben, die GLSL, der beliebten OpenGL Shading Language, sehr ähnlich ist . Am Ende der Klasse erstellen wir ein nahtloses Looping-GIF Ihres Lava-Lampen-Projekts, das Sie in der Projekt-Galerie und anderswo teilen können. Als Bonus zeige ich Ihnen sogar, wie Sie Ihre Lava-Lampe auf Ihrem Desktop laufen lassen können. Diese Klasse dient als Einführung in 2D-Fragment-Shader, die häufig in der Spieleentwicklung verwendet werden, um saubere visuelle Effekte zu erzielen , die schnell über parallele Verarbeitung ausgeführt werden. Shader schreiben zu können ist eine wertvolle Fähigkeit, die viel Flair zu Ihren Spielprojekten hinzufügen kann, und nachdem Sie Ihre Lava-Lampe erstellt haben, werden Sie ein ziemlich gutes Verständnis davon haben, wie sie funktionieren. Ich werde vorsichtig sein, jeden Schritt im Detail zu erklären, aber einige frühere Erfahrungen mit Codierung oder Game-Engines im Allgemeinen wäre sehr hilfreich für Ihr Verständnis. Wenn Sie irgendwelche Probleme haben, lassen Sie es mich bitte in der Registerkarte Diskussionen wissen und ich werde Ihnen sicher helfen. Lasst uns damit anfangen. Stellen Sie sicher, dass Sie mir hier auf Skillshare folgen um weitere Spielentwicklungsklassen wie diesen zu erhalten. In unserer ersten Lektion werden wir eine echte Lava-Lampe beobachten , um herauszufinden, wie wir sie mit unserem Shader-Code emulieren werden. 2. Beobachten einer Lava: Werfen wir einen Blick auf diese Lavalampe als Referenz, bevor wir mit der Programmierung beginnen. Erstens, die Lava trennt sich in einem unverwechselbaren kugelförmigen Blobs, Strecken, Trennen und Verschmelzen miteinander. Wir werden etwas Ähnliches wie Metaballs verwenden, um diesen Effekt zu erzielen. Zweitens, die Lava neigt dazu, schnell zu fließen, nach oben oder unten, verlangsamen, wenn sie einen Endpunkt erreicht und schließlich die Richtung wechselt. Wir werden uns einige mathematische Funktionen ansehen, die im Laufe der Zeit so oszillieren. Drei, die Lava ist wirklich hell an der Unterseite und eine völlig andere Farbe an der Spitze. Es scheint ein wenig zu leuchten. Wir können versuchen, hier einige Farbverläufe zu verwenden, um diesen Effekt zu imitieren. Vier, ähnlich ist die Alkohollösung am hellsten an den Rändern der Lampe und dunkler in der Mitte. Auch hier können wir versuchen, Farbverläufe zu verwenden. Wir werden diese Ideen im Hinterkopf behalten, wenn wir anfangen zu programmieren. In der nächsten Lektion werden wir Kidlo herunterladen und einrichten, damit wir loslegen können. 3. Richte die Maschine ein: In dieser Lektion laden wir die Engine herunter und richten ein grundlegendes Projekt ein. Wenn Sie noch nicht über die Godot-Spiele-Engine verfügen, können Sie sie unter GodoTengine.org abrufen, auf Downloads klicken und den Download finden, Ihrem Betriebssystem und Ihrer Systemarchitektur passt. Sie können die Engine auch von Steam herunterladen. Wenn Sie dies tun, wird es mit einer Reihe von Demos vorinstalliert, die Sie überprüfen können, um zu sehen, wie grundlegende Projekte funktionieren. Fahren Sie weiter und fahren Sie den Motor, wenn Sie es noch nicht getan haben. Wenn Sie das Godot-Image von der Website heruntergeladen haben, nachdem Sie es aus der ZIP-Datei extrahiert haben und versuchen, es zum ersten Mal auszuführen, wird möglicherweise eine Sicherheitswarnung von Ihrem Betriebssystem angezeigt. Unter Windows können Sie Windows Defender beruhigen, indem Sie weitere Informationen drücken und dann trotzdem ausführen. Godot ist eine Open-Source-Software, also können Sie den Code selbst lesen, wenn Sie möchten. Das ist Godots Projektleiter. Wenn Sie die Engine von Steam herunterladen, finden Sie hier eine Reihe von Demos. Da ich die Engine von der Website heruntergeladen habe, habe ich hier noch nichts. Ich werde diese Schaltfläche „Neues Projekt“ auf der rechten Seite drücken. Ich möchte, dass dieses Projekt auf meinem Desktop ist, also werde ich hier Desktop eingeben. Möglicherweise müssen Sie diese Schaltfläche „Durchsuchen“ drücken, um einen Ordner zu finden , in dem Sie Ihr Godot-Projekt ablegen möchten. Godot sagt: „Bitte wählen Sie einen leeren Ordner“, weil er denkt, dass ich die Dateien direkt auf meinem Desktop ablegen möchte. Es würde Dinge wie meine Sprites und Texturen direkt neben den Recyclingbehälter legen wollen , was nicht das ist, was ich will. Offensichtlich ist der Desktop nicht leer. Es enthält zumindest die Abkürzung für den Recyclingbehälter. Ich werde Lava Lamp in den Projektnamen-Abschnitt eingeben und diese praktische Schaltfläche „Ordner erstellen“ drücken, und jetzt hat Godot einen Ordner namens Lava Lamp auf meinem Desktop erstellt , so dass alle Projektdateien für dieses Projekt direkt darin leben können -Ordner. Da ich diese Anwendung nicht brauche, um in einer Webumgebung ausgeführt zu werden, werde ich die Standard-Renderoption belassen. In der nächsten Lektion drücke ich diesen Knopf und wir erstellen unsere Projektstruktur und beginnen mit dem Schreiben unseres Shader-Codes. 4. Einen Sprit und einen Shader erstellen: In dieser Lektion richten wir eine Projektstruktur ein und beginnen Shader-Code zu schreiben. Ich werde die Schaltfläche „Erstellen & Bearbeiten“ drücken. Das ist der Godot-Editor. In der Mitte sehen Sie im Wesentlichen eine Darstellung der aktuellen Szene, die Sie erstellen. Hier auf der linken Seite haben wir die Möglichkeit, den Wurzelknoten für diese Szene zu erstellen. In Godot stellen Knoten kleine Bausteine von Spielen dar. Sie sind Knoten zum Erstellen von Bildern, Charakteren, UI-Elementen, Animationen und mehr. Da wir uns auf das Schreiben eines Shaders für dieses Tutorial konzentrieren, brauchen wir nicht wirklich viele Knoten, aber wir brauchen mindestens einen Knoten, auf den wir unseren Shader anwenden können. Dieser Knoten sollte auch unsere Ebenenbasis zeichnen, wenn wir zu diesem Schritt kommen. Wir können 2D-Shader über Materialien für jeden Knoten schreiben, der von einem Canvas-Element erbt. Um Ihnen zu zeigen, was diese Knoten sind, drücke ich „Other Node“. Dies ist ein ganzer Baum, der letztlich aus allen Knoten besteht , die Godot im Angebot hat. Wir suchen nach Dingen, die von Canvas-Element erben. Dinge, die unter diesem Dropdown-Menü mit dem Namen Canvas-Element vorhanden sind. Ich werde für Node2D und den ganzen Weg am unteren Sprite gehen, weil ich auch die Lavalampenbasis rendern und dann unseren Shader in einem bestimmten Teil der Basis rendern möchte . Ich werde auf „Erstellen“ drücken, um ein Sprite zu erstellen. Jetzt können Sie sehen, dass ich das Sprite hier auf der linken Seite als Stammknoten für meine aktuelle Szene habe. Hier auf der rechten Seite haben wir Zugriff auf weitere Eigenschaften für den Knoten, den wir gerade erstellt haben. Oben hier sehen Sie diese Eigenschaften, die spezifisch für den Sprite Knoten sind, direkt darunter haben wir Eigenschaften, die für alle Node2Ds spezifisch sind, und weil wir Eigenschaften haben, die für alle Canvas-Elemente spezifisch sind. Natürlich, wieder, alle Knoten. Das liegt daran, dass, wenn wir zurückgehen und den Baum betrachten, wir Knoten ganz oben im Baum haben, Canvas-Element darunter und Node2D darunter. Dies sind die Eigenschaften für Sprites, dies sind die Eigenschaften für Node2Ds, dies sind die Eigenschaften für Canvas-Elemente, und dies sind die Eigenschaften für alle Knoten. Ich werde auf „Abbrechen“ drücken, weil ich dir nur den Baum zeigen wollte. Da ich einen 2D-Knoten als Wurzelknoten für die Szene erstellt habe, Godot uns automatisch in die 2D-Ansicht gewechselt. Diese blaue Box hier stellt die Größe des Bildschirms dar, der passieren wird, wenn ich „Play“ drücke, um das Spiel zu debuggen. Sie können sehen, dass ich das Sprite ausgewählt habe, also stellt dieses Fadenkreuz hier die aktuelle Position des Sprite dar. Es rendert derzeit keine Textur, und Sie können das sehen, indem Sie auch sehen, dass die Textur leer ist. Ich werde icon.png in die Sprite Eigenschaft ziehen, und jetzt können Sie sehen, dass icon.png als Textur dieses Sprites gerendert wird. Wir werden icon.png nur vorübergehend verwenden, um zu sehen, wie Sprites funktioniert, und auch unseren ersten Shader-Code zu schreiben, nur um die grundlegende Textur zu überschreiben. Sie können sehen, dass sich der Sprite Knoten jetzt außerhalb des blauen Feldes erstreckt, das wir erstellt haben. Sie können sehen, dass sich das Sprite jetzt außerhalb der Region erstreckt, gekennzeichnet durch das blaue Feld, so dass ein Großteil davon nicht tatsächlich auf dem Bildschirm gerendert wird. Ich werde das Spiel ausführen, indem ich die Schaltfläche „Play“ drücke. Es wird sich beschweren, weil ich keine Hauptszene aufgestellt habe. Denn dies ist ein sehr einfaches Projekt für Shader-Demonstrationen. Um meine Arbeit zu retten, werde ich „Control S“ tun. Sie können „Command S“ verwenden, wenn Sie auf einem Mac sind. Um meine Arbeit bisher zu speichern, gehe ich zur Szene und drücke „Szene speichern“. Da ich diese Szene noch nicht gespeichert habe, fragt sie mich nach einem Namen. Ich werde es nur lamp.scn nennen und „Speichern“ drücken. Sie können jetzt auch sehen, dass lamp.scn in den Projektdateien erschienen ist. Wenn ich hier oben „Play“ drücken würde, würde Godot mich warnen, dass ich nie eine Hauptszene definiert habe. Dies liegt daran, dass die Art und Weise, dass Spiele in der Regel in Godot strukturiert sind, diese sind root gesehen, dass das Spiel als die grundlegende Sache läuft , dass alle anderen Szenen in Knoten sind Kinder von. Wir haben noch keine davon definiert, daher müssen wir sie auswählen. Ich werde wieder lamp.scn wählen, die wir gerade erstellt haben, und drücken Sie „Öffnen“. Da der Ursprung eines Sprite standardmäßig 00 der Mittelpunkt des Objekts ist, können Sie sehen, dass das Sprite in drei der vier Quadranten abgeschnitten wird. Ich werde das schließen. Zurück zu unserem Projekt können wir Offset betrachten und deaktivieren zentriert. Jetzt können Sie sehen, dass das Sprite vollständig in diese blaue Box passt, die die Größe des Bildschirms darstellt, die Sie erhalten, wenn Sie das Spiel spielen. Jetzt fangen wir an, etwas Shader-Code zu schreiben. Ich sagte früher, dass wir Shader-Code für jeden Knoten schreiben können , der von einem Canvas-Element erbt. Ich werde hier nach den Eigenschaften aller Knoten suchen, die von Canvas-Element erben, und unter Material können Sie sehen, dass es derzeit besagt, Material leer. Ich klicke auf diesen Dropdown-Pfeil und drücke „NewShaderMaterial“. Sie sehen eine Vorschau des Grundmaterials, das wir gerade hier in diesem Bereich erstellt haben. Ich werde darauf klicken, und dann, wo es Shader sagt, werde ich auf den Dropdown-Pfeil klicken und einen neuen Shader definieren. Dann klicke ich auf den „Shader“, und du kannst sehen, dass es hier ein kleines Code-Fenster geöffnet hat. Wir haben momentan einen Fehler. Es besagt, dass ein Shader-Typ am Anfang des Shaders erwartet, gültige Typen unserer Canvas-Element, Partikel und räumliche. Wir schreiben einen CanvasItemShader, also werde ich Shader-Typ schreiben: CanvasItem und ein Semikolon, um anzuzeigen, dass ich mit der Zeile fertig bin. Sie können sehen, dass der Fehler dadurch verschwindet. Es ist wichtig zu beachten, dass das, was wir hier schreiben, nicht Judy-Skript ist, das Sie vielleicht in einem vorherigen Video-Tutorial von mir verwendet haben. Aber eine Sprache, die speziell für das Schreiben von Shaders in Godot erstellt wurde. Es ist ähnlich wie GSL, wenn Sie das jemals benutzt haben. Beginnen wir mit dem Definieren eines Fragment-Shaders, der die Farbe an jedem Punkt, der vom Sprite abgedeckt wird, einfach auf Weiß setzt . Ich werde ein wenig auf dem Sprite zoomen, indem ich das Mausrad benutze und das Mausrad gedrückt halten, um anzuheften, nur dass ich ein wenig deutlicher sehen kann, was ich tue. Beginnen wir mit dem Schreiben der Fragmentfunktion. Diese Funktion wird schreiben wird von der Engine an jedem einzelnen Punkt aufgerufen werden , auf dem unser Shader läuft. Zuerst schreiben wir, „Void“, weil diese Funktion nichts zurück an die Funktion, die codiert, und dann schreiben wir „Fragment“, weil wir die Fragmentfunktion implementieren. Sie können sehen, dass Godot versucht hat, für mich automatisch zu füllen. Die Fragmentfunktion nimmt keine Parameter an, daher sind es dort leere Klammern. Öffnen Sie dann geschweifte Klammer, Eingabetaste. Jetzt ist dies der Codeblock, der ausgeführt wird, wenn die Engine die Fragmentfunktion aufruft. Um jedes einzelne Fragment, das vom Sprite abgedeckt wird, auf Weiß zu setzen schreibe ich Farbe gleich vec4, was Vektor 4 oder eine Sammlung von vier Zahlen in diesem Fall bedeutet. Dann schreibe ich 1,0, 1,0, 1,0, 1,0. Was das in diesem Zusammenhang bedeutet, können Sie sehen, dass es gerade aktualisiert und jetzt vollständig demonstriert weiß ist 1.0, was völlig rot bedeutet, 1.0, was völlig grün bedeutet, 1.0, was völlig blau bedeutet, und 1.0, was völlig undurchsichtig bedeutet. Dies ist der Alpha-Wert, also ist es RGBA. Wenn wir sagen, dass Farbe gleich weiß ist, was wir wirklich sagen, ist für jeden einzelnen Punkt, auf dem dieser Shader ausgeführt wird, ich möchte, dass die Farbe an diesem bestimmten Punkt weiß ist. Es gibt einen kurzen Weg, dies zu tun, der Vec4 und dann nur eine einzelne 1.0 zu schreiben. Ich werde das alles löschen. Sie können sehen, dass das in Ordnung ist. Die Engine füllt nur 1.0 in allen vec4-Positionen automatisch. In der nächsten Lektion erstellen wir einige grundlegende Schwarzweiß-Blobs. 5. Erstelle einige Blobs: Lassen Sie uns in dieser Lektion einige grundlegende Schwarz-Weiß-Blobs erstellen. Beginnen wir damit, die Hintergrundfarbe auf Schwarz zu setzen. Da der RGB-Wert von Schwarz 000 ist, könnte man denken, dass die Einstellung von Null hier eine schwarze Hintergrundausgabe erzeugen würde. Aber in der Tat, da der Alpha-Wert auch auf Null gesetzt wird , wenn wir alle vier Komponenten des Vektors 4 Null setzen, erhalten wir einen schwarzen Wert mit einer vollständig transparenten Ausgabe. Wir müssen 000 sagen, und dann 1.0 auf der Alpha. Jetzt haben wir unsere schwarze Hintergrundausgabe. Jetzt möchte ich ein paar weiße Blobs hinzufügen. Um dies zu tun, muss ich eine Farbe außer Kraft setzen, die wir hier gerade in den Bereichen, in denen unsere Blobs erscheinen sollen, auf Weiß gesetzt haben. Zuerst werde ich eine Liste erstellen, die nur die Mittelpunkte jedes dieser Blobs enthält, sowie die Stärke dieses Blobs, relativ analog zur Größe des Blobs. Beginnen wir mit dem Schreiben von vec3, blob_centers, und ich möchte, dass dies derzeit zwei Elemente für zwei Blobs hat, und fügen Sie dann ein Semikolon für die n-te Zeile hinzu. Jetzt werde ich jedem dieser Blob-Zentren zu einem Punkt und einer Stärke zuweisen. Für den 0ten Blob oder den ersten Blob in der Liste werde ich das gleich einem Vektor3 zuweisen, und dies ist eine relative Koordinaten hier. Wenn ich 1.0,1.0 sage und dann eine Null ausdrucke, bezieht sich dies auf 1.0, 100 Prozent über die Textur auf der X-Achse und 100 Prozent auf der Textur auf der Y-Achse. Ich habe momentan die Stärke auf Null gesetzt. Nehmen wir an, ich möchte dies vielleicht hier für 0,6 auf dem x und 0,6 auf dem y oder 60 Prozent über die Textur in beide Richtungen. Ich setze die Stärke auf 0,5. Ich werde etwas Ähnliches mit dem nächsten Blob-Center machen. Vielleicht möchte ich, dass dieser hier ein bisschen mehr links ist. Ich sage 0,5, 0,55, und dann möchte ich, dass das ein bisschen größer wird, sagen wir 0,6. Jetzt haben wir die Standorte für zwei Blobs über hier und hier definiert. Denken Sie daran, dass der Fragment-Shader, den wir schreiben, einzeln auf jedem einzelnen Punkt dieser Textur ausgeführt wird. Was ich tun möchte, ist für diesen aktuellen Punkt, an dem wir sind, zu sehen, wie sehr es von diesen Blobs Zentren beeinflusst wird, die die Stärke verwenden. Wenn es mehr als einen bestimmten Schwellenwert beeinflusst, können wir diese Farbe auf Weiß setzen. Beginnen wir mit der Messung des Einflusses, den jeder der Blobs auf diesen einzelnen Punkt hat. Ich werde Float für Gleitkommawert sagen, und ich gebe Einfluss ein und setze es auf 0,0, um zu beginnen. Als nächstes werde ich die Liste der Blobs durchlaufen, um zu messen, wie stark dieser einzelne Punkt von jedem von ihnen beeinflusst wird. Ich werde sagen für, offene Klammer, int i gleich 0, weil wir anfangen wollen, bei Null zu zählen, i weniger als blob_centers.length. Wir wollen, dass ich weniger als zwei bleibe, weil dieses Array nur die Indizes Null und eins hat , weil es zwei Elemente hat. Ein weiteres Semikolon, und ich sage i++, um i nach jedem Mal, wenn wir durch die Blobs iterieren, um eins zu erhöhen. Ich öffne hier einige geschweifte Klammern, und das ist der Code, der für jeden der Blobs ausgeführt wird. Zuerst berechnen wir die Entfernung von diesem Blob-Zentrum , an dem wir gerade arbeiten, bis zu dem Punkt, an dem wir gerade arbeiten. Ich werde sagen float distance_to_blob_center, und ich werde sagen, Abstand für die eingebaute gute alte Distanzfunktion. Öffnen Sie Klammern und ein Semikolon. Die Distanzfunktion will zwei Positionen, um den Abstand zwischen zu messen. Ich sage blob_centers, offene Klammern, und dann ich, weil ich den Blob möchte, auf dem wir gerade sind, und dann sagen.xy, um einen Vektor mit nur der x-Komponente und der y-Komponente des aktuellen Vektors zu konstruieren . Blob_center i, wenn wir in diesem Moment auf der 0 sind, wird 0.6, 0.6 und es wird auch ein Vektor sein. Dann möchte ich den Abstand zwischen dem aktuellen Blob-Zentrum und unserer aktuellen Position messen , die durch die Eingabe uv dargestellt wird. Nun, diese Distanzfunktion ist vorerst in Ordnung, da wir derzeit eine quadratische Textur im Sprite haben. Aber später werden wir eine rechteckige Textur für das Sprite verwenden wollen , damit wir unsere Lava-Lampensockel hinzufügen können. Sagen Sie, die Textur war eigentlich diese Größe, zum Beispiel. Denken Sie daran, dass für die Positionen, die wir hier verwenden, Blob Zentren xy und uv, es relativ zum Gesamtmaximum x und y ist. Dies ist 1,0 auf der x-Achse, und obwohl es jetzt ein Rechteck ist, ist dies immer noch 1,0 auf der Y-Achse, da es relativ zur Gesamtgröße ist. Dies bedeutet, dass unsere Distanzfunktion ein wenig verzerrt wird. Je weiter wir von einer perfekten quadratischen Sprite-Textur bekommen. Ich werde jede dieser Positionen komponentenweise durch Textur-Pixelgröße teilen. Für die aktuelle Textur verwenden wir icon.png. Textur-Pixelgröße ist auch ein Vektor, der 1 über 64 und 1 über 64 enthält. Was dies hier tatsächlich tut, ist die Multiplikation einer relativen Koordinate, diezwischen Null und 1,0 dargestellt wird,durch die Anzahl der Pixel in jeder Richtung komponenten-weise zwischen Null und 1,0 dargestellt wird, . Es konvertiert sie von einer relativen Koordinate in eine absolute Position auf der Textur. Ich werde ein Sprite wieder so skalieren, wie es früher war, indem unter das Dropdown-Dropdown-Menü für die 2D-Transformation des Knotens gehe und die Skalierung zurücksetze. Lassen Sie uns nun einen gewissen Einfluss auf diesen Punkt basierend auf seiner Entfernung vom spezifischen Blob hinzufügen. Fügen Sie hier eine neue Zeile hinzu und sagen Sie Einfluss plus gleich, um zu sagen, dass ich hinzufügen und neu zuweisen möchte, und dann sage ich blob_centers i, wieder, für den aktuellen Blob. Ich werde sagen.z, weil wir wollen nur diese dritte Komponente, die wir gesagt, repräsentiert die Stärke zu diesem speziellen Blog hat. Dein Bauchinstinkt könnte jetzt sein, dies mit Entfernung zu Blob-Zentrum zu multiplizieren. Aber denken Sie daran, dass dies bedeutet, dass je weiter der Blob von diesem bestimmten Punkt entfernt ist, desto größer wird dieser Wert sein und desto größer wird der Gesamteinfluss. Wir wollen die Umkehrung davon. Die Punkte, die dem Blob am nächsten sind, sollten am stärksten vom Blob beeinflusst und eher weiß sein. Was wir eigentlich wollen, ist 1,0 geteilt durch Entfernungs-zu-Blob-Zentrum. Ich werde das nur in Klammern festhalten, und das wird uns die richtige Beziehung zwischen Einfluss und der Entfernung vom Blob zum bestimmten Punkt geben. Nun, hier wird ein bisschen Magie passieren. Wir wollen sagen, wenn der Einfluss über einer bestimmten Schwelle liegt, wollen wir die Farbe von dem ändern, was es derzeit ist, schwarz zu weiß. Ich werde laufen, wenn der Einfluss über ist, sagen wir, 0,3, wir wollen die Farbe auf Weiß setzen. Denk dran, wir haben diese schöne Kurzschrift. Wir können vec4 sagen und dann alle diese Komponenten mit 1.0 füllen. Da. Jetzt haben wir ein paar kleine Blobs, die auf dem Bildschirm erschienen sind. Ich werde hineinzoomen und Sie können sehen, wie das ein bisschen klarer funktioniert. Wie wir erwartet haben, haben wir einen weißen Bereich um jeden der Blobs. Es ist immer eine gute Idee, Beispiele für sich selbst zu machen, um Ihren Code zu testen und sicherzustellen, dass Sie verstehen, wie alles funktioniert. Nehmen wir einen Beispielpunkt direkt zwischen den beiden Blob-Zentren. Wenn ich mir die Halbpunkte zwischen diesen anschaue, ist das etwa Punkt 0,55 auf der X-Achse, 0,575 auf der Y-Achse. Das ist irgendwo genau hier. Lassen Sie uns unseren Code als Beispiel durchgehen. Da das der aktuelle Punkt ist, den wir betrachten, werden seine Koordinaten in der UV-Eingabe sein. Lasst uns jetzt unseren Code durchlaufen. Zuerst wird der Einfluss auf 0,0 gesetzt, dann tun wir dies für jeden der Blobs. Sagen Sie für den ersten Blob, dieser hier, wir haben Distanz zu Blob-Zentrum ist der Abstand zwischen Blob-Zentren i, also der aktuelle Blob, wieder, diese.xy, also haben wir nur die 0.6 und die 0.6, geteilt durch Texturpixel Größe. In diesem Fall bedeutet dies komponentenweise geteilt durch 1 über 64 und 1 über 64, was dasselbe ist wie das Multiplizieren oder Skalieren dieses Vektors mit 64. Dann haben wir die gleiche Sache, aber für UV statt der Blobs Zentren xy. So ist die UV, wieder, derzeit 0,55 und 0,575. Wenn wir den Abstand zwischen diesen beiden Dingen berechnen, bekommen wir etwa 3.578. Jetzt möchten wir hinzufügen, um einen Wert zu beeinflussen, der der aktuellen Blob-Stärke und unserer Entfernung vom Blob-Zentrum entspricht . Wir ersetzen die aktuelle Blob z-Komponente, die 0,5 ist, multiplizieren 0,5 mal 1,0 über 3,578. Wenn wir das tun, bekommen wir etwa 0,14. Wir fügen 0,14 zu beeinflussen hinzu und gehen dann zum nächsten Blob über. Jetzt sind wir auf diesem Blob. Jetzt gehen wir wieder die gleichen Berechnungen durch. Wir berechnen die Entfernung zum Blob-Zentrum, und da der Punkt, den wir uns für uv entschieden haben, auf halbem Weg zwischen diesen beiden Blobs-Zentren ist, wissen wir, dass es nur 3,578 wieder sein wird. Dann fügen wir hinzu, um die aktuelle Blobs z-Komponente zu beeinflussen, die in diesem Fall jetzt 0,6 ist, und dann multiplizieren Sie das mit 1,0 über 3.578 wieder. Was wir für den Einfluss bekommen, um hier hinzuzufügen, ist 0,17. Wir addieren 0,17 zu dem Einfluss, und jetzt haben wir 0,31 als unseren aktuellen Einfluss, da 0,14 plus 0,17 0,31 ist. der WennderEinfluss größer als 0,3 ist, setzen wir die Farbe auf Weiß. Da der Einfluss momentan 0,31 ist, wahr ausgewertet, dass dieser Wert tatsächlich größer als 0,3 ist, und daher setzen wir die Farbe auf Weiß. Der Punkt in der Mitte zwischen diesen beiden Blobs ist in der Tat weiß. Nur um unsere Mathematik zu überprüfen, können wir auch diesen 0,3 Wert erhöhen. Sag mal, ich will, dass es 0,31 ist, und ich sehe, dass der Punkt dazwischen nicht mehr weiß ist. Das liegt daran, dass 0,31 nicht größer als 0,31 ist, und auch, weil wir ein paar Mal abgerundet als wir darüber sprachen, den Einfluss hinzuzufügen. Der Wert, den wir auf 0,31 aufgerundet haben, ist nicht größer als Punkt 0,31, so dass wir die Farbe nicht auf Weiß setzen und es bleibt schwarz, wie wir es anfangs gesagt haben. Nur weil ich dies später optimieren möchte, werde ich es durch eine neue Variable ersetzen, die ich Schwellenwert aufrufen und oben oben oben eine Uniform erstellen werde . Ich werde eine neue Uniform erklären, indem ich eine einheitliche Float-Schwelle schreibe. Ich werde sagen, standardmäßig, wir werden das auf 0,3 setzen, was der Wert ist, den wir vorher hatten. Aber hier drüben gibt es eine neue Sache, ein neues Drop-down-Menü namens Shader Param, und wir haben diese neue Schwellenwert-Uniform, die wir gerade definiert haben, Setup 0.3. Nun, wenn ich diesen Wert erhöhen, können Sie sehen, dass in der Tat unser Shader aktualisiert. Sie können auch mit der Maus klicken und gedrückt halten und in beide Richtungen ziehen, nach links oder rechts, um zu beobachten, wie sich das anpasst. Das macht es einfach, den Schwellenwert vom Editor anstelle von unserem Code anzupassen . Wenn Sie auf diesen Reset-Button klicken, wie ich es gerade getan habe, wird es auf den Wert zurückgesetzt , den Sie hier gleich gesetzt haben, es ist wie ein Standard. In der nächsten Lektion fügen wir noch ein paar Blobs hinzu und animieren sie. 6. Animiere die Blobs: In dieser Lektion fügen wir noch ein paar Blobs hinzu und animieren sie, damit sie ein wenig mehr wie eine Lava-Lampe aussehen. Um zu beginnen, werde ich die Anzahl der Blobs Zentren erhöhen, die ich habe. Ich setze das auf sechs statt zwei, nur damit wir jetzt sechs Blob-Zentren haben. Ich werde nur Control C auf dieser Auswahl tun , um zu kopieren und Control V, um es ein paar Mal einzufügen. Abhängig von Ihrem Betriebssystem müssen Sie möglicherweise Befehl V oder/und Befehl C anstelle von Control verwenden, und ich werde dies einfach auf 2, 3, 4, 5 setzen. Jetzt haben wir in der Tat sechs Blob-Zentren. Sie werden sehen, dass die Blob-Größe hier eine ganze Menge erhöht hat, und das liegt daran, dass wir für jeden der Blobs hinzufügen, einige den aktuellen Punkt beeinflusst haben. Selbst für Blobs, die hier draußen sind, wirklich weit weg von einem der Blob-Zentren, bekommen sie immer mehr Einfluss, nur weil wir mehr Blobs hinzugefügt haben. Sie sind eher in diesem Bereich enthalten als vorher, einfach weil es mehr gibt. Ich werde ein wenig mit dem Mausrad verkleinern nur damit ich ein wenig deutlicher sehen kann, was los ist, und ich werde nur die X-Koordinaten ein wenig verschieben , um sicherzustellen, dass ich ein wenig sehen kann klarer, wo jeder dieser Blobs ist, denn im Moment haben viele von ihnen genau die gleiche Position. 0,6, 0,5. Nehmen wir an, das ist bei 0.55, das ist bei 0.45, das hier bei, ich weiß nicht, 0.62, das ist bei, sagen wir mal 0.7. Sie hätten sich ein wenig ausgebreitet haben sollen, wie Sie sehen können. Jetzt möchte ich, dass die y-Komponente jedes dieser Blobs-Zentren von der Zeit abhängt. Genauer gesagt möchte ich eine mathematische Funktion, die Zeit als Eingabe in Anspruch nimmt und basierend auf der Zeit, die ich ihm gegeben habe, einen Wert zwischen 0,0 und 1,0 zurückgibt . Jetzt gibt es ein paar verschiedene Möglichkeiten, dies zu tun. Sie sich vor StellenSie sich vor, dass die X-Achse Zeit ist und die Y-Achse die y-Position unseres Blobs ist. Sine x funktioniert ziemlich gut für unsere Bedürfnisse, aber es hat einige negative Werte, die es ausgibt, so dass wir mit einigen Blobs enden würden, die über unsere Textur gehen. Um sicherzustellen, dass unsere Blob-Center-y-Werte zwischen Null und Eins bleiben, wollen wir den Sinus-x-Termin positiv. Eine Option wäre, nur den absoluten Wert von Sinus x zu nehmen, aber das gibt uns diese Ecken, und wenn wir uns wieder vorstellen, dass die x-Achse Zeit ist, bedeutet das, dass, wenn der Blob eine dieser Ecken trifft, es sofort springt zurück und beginnt sich in die entgegengesetzte y-Richtung zu bewegen. Diese Bewegung wäre ein wenig unnatürlich und es würde aussehen, als ob der Blob der Spitze der Lampe abprallte und sofort begann, sich nach unten zu beschleunigen oder umgekehrt. Auch hier gibt es ein paar verschiedene Möglichkeiten, damit umzugehen, aber ich ziehe es vor, Sinus quadriert x oder Sinus x mal Sinus x zu verwenden. Dies eliminiert die negativen Werte, da ein negativer Wert mal ein negativer Wert ein positiver Wert ist, und es glättet diese Ecken, um sie ein wenig runder zu machen. Jetzt haben wir, sagen wir zum Beispiel, einen Blob, der unten beginnt, schnell nach oben beschleunigt, verlangsamt und dann wieder die Geschwindigkeit aufnimmt, wenn er zum Boden der Lampe zurückgeht. Das ist das perfekte Verhalten, nach dem wir suchen. Um ein wenig Variation zwischen Blobs hinzuzufügen, möchte ich vielleicht auch in der Lage sein, den anfänglichen Offset und die Geschwindigkeit zu steuern. Da unsere X-Achse hier Zeit ist, die Art und Weise, wie ich die Dinge ein wenig beschleunigen kann, ist die Art und Weise, wie ich die Dinge ein wenig beschleunigen kann,die x-Eingabe mit einem Geschwindigkeitsfaktor zu multiplizieren. In ähnlicher Weise, wenn ich die Zeit ein wenig versetzen möchte, füge ich dem x einfach ein wenig hinzu. Ich werde eine neue Funktion definieren, die einen Schwimmer namens Oszillate zurückgibt, und die Oszillat-Funktion, die wir definieren, nimmt Float x, Float-Geschwindigkeit und Float-Offset. Hinzufügen meiner geschweiften Klammern, und das ist der Code hier, der ausgeführt wird, wenn wir die Oszillat-Funktion aufrufen. Da wir Sinus quadriert x oder Sinus x mal Sinus x wollen, werde ich sagen, wie Sinus x mal Geschwindigkeit plus Offset zurückgeben , und dann möchte ich das Ganze auf die zweite Macht heben, weshalb es in der Macht enthalten ist -Funktion. Ich werde ein Semikolon schreiben, um meinen Ausdruck zu vervollständigen, und das sind grundlegende oszillierende Funktion. Jetzt möchte ich diese Oszillat-Funktion verwenden, indem ich Zeit als Eingabe für jede meiner Blob-Center-y-Positionen verwende. Könnte auch wie bei der Zeiteingabe gelten. Alles, was ich tun muss, ist die y-Komponente jedes Blob-Centers durch Oszillieren, Zeit zu ersetzen, und dann möchte ich vielleicht, dass dies mit halber Geschwindigkeit mit einem 0,4-Offset läuft. Jetzt können Sie sehen, dass ich diesen Blob habe, der zwischen 0,0 auf der Y-Achse und 1,0 auf der Y-Achse animiert und Zeit als Eingabe verwendet. Ich füge etwas Ähnliches für den Rest hinzu. Nehmen wir an, die Zeit oszillieren, ich möchte, dass dies noch langsamer geht, 0,2, und dann, ich weiß nicht, 0,5 auf dem Offset. Tun Sie das einfach weiter. Jetzt können Sie sehen, dass alle meine Blobs in der Y-Achse mit unserer Oszillat-Funktion hin und her gehen . Jetzt ist es wahrscheinlich ein guter Zeitpunkt, alle diese Werte zu optimieren , nur um sicherzustellen, dass Sie sich mit ihnen wohlfühlen, so dass Sie vielleicht die Blobs auf der X-Achse ein wenig verschieben können, indem Sie ihre x-Komponente ändern oder sie auf die Y-Achse ein wenig durch Änderung ihrer Geschwindigkeit, ihren Offset, und dann auch ändern Sie den Einfluss hier. Ich mag es, die Stärke jedes Blobs ein bisschen größer zu machen, wenn sie langsamer werden. Diejenigen, die ich Geschwindigkeit auf 0,1 eingestellt habe, werde ich den Einfluss auf die Stärke ein wenig erhöhen, also werde ich sagen, das sind 0,8 und 0,8, und ich kann sehen, dass die langsameren sich bewegenden Blobs ein wenig größer sind. Wenn Sie in der Lage sein wollen, diese Werte wirklich schnell zu optimieren, können Sie für jeden von ihnen eine Uniform definieren, wie wir es für den Schwellenwert getan haben. Ich werde das nicht tun, nur weil es viele verschiedene Uniformen zu definieren sind, aber das ist eine Option, wenn Sie möchten, dass die Leute schnell Dinge wie die Geschwindigkeit, den Offset oder die x-Position vom Editor anpassen . Ich bin ziemlich glücklich damit, wie es vorerst ist, also werde ich vorwärts gehen und in der nächsten Lektion ein wenig Farbe hinzufügen. 7. Farben hinzufügen: In dieser Lektion fügen wir unserer Lavalampe einige Farben hinzu. Beginnen wir mit dem Hinzufügen der Hintergrundfarbe, die wir früher beobachtet haben, ist am hellsten an den Rändern und am dunkelsten in der Mitte. Ich werde diese Farben Uniformen machen , so dass ich sie später schnell anpassen kann, wenn ich will. Ich werde wieder Uniform Vec4 schreiben, wir repräsentieren Farben mit Vektorvieren, und ich werde background_edge schreiben und ich sage Doppelpunkt, hint_color. Dies teilt dem Editor mit, dass die Hintergrundkante den Hinweis auf einen Farbwähler haben soll. Obwohl es sich um einen Vektor vier handelt, sind die vier Komponenten RGB und A. Der Editor fügt nun Werte in diese vier Komponenten ein, abhängig von der Farbe, die ich aus einem schönen Farbwähler wähle, anstatt Zahlen eingeben zu müssen manuell und das ist nur, weil wir hier hint_color geschrieben haben, um dem Editor mitzuteilen, dass dies eine Farbe ist. Ich möchte die Hintergrundfarbe am Rand auf eine schöne magentafarbene Farbe einstellen. Ich will, dass das bei 255 ist. Ich möchte, dass Grün bei Null ist, und ich möchte, dass Blau bei 255 ist. Jetzt habe ich diese magentafarbene Farbe, die ich hoffe, an den Rändern zu setzen, speziell an den X Rändern der Lava-Lampe. Jetzt werde ich noch einmal schreiben, einheitliche vec4 background_center und wieder, das ist eine Farbe. Jetzt habe ich einen anderen, der sagt, wenn ich den Mauszeiger über das Hintergrundzentrum führe, werde ich das nur auf eine dunklere violette Farbe setzen und natürlich kann ich diese Werte später optimieren, sind nur Werte, die ich jetzt setze. Jetzt definiere ich zwei weitere Uniformen für das, was ich will, dass die Farben der Blobs oben und unten stehen. Blob_top und ist eine ähnliche Farbe und jetzt es als eine Farbe im Editor erschienen, ich werde dies auf eine schöne lebendige rote Farbe setzen und dann eine weitere einheitliche vec4 blob_bottom für das, weitere einheitliche vec4 blob_bottom was ich möchte, dass die Blobs bei unten und das ist ein weiterer hint_color. Ich habe noch einen Farbwähler hier unten und ich werde das auf ein schönes Gelb setzen. Beginnen wir damit, die Hintergrundfarbe auf eine Mischung zwischen der Hintergrundkante und der Hintergrundmitte zu setzen und einen Farbverlauf zu erstellen. Ich beginne damit, wo ich gerade die Farbe auf Schwarz setze, genau hier, und anstatt einen Vektor für diese Konstante zu verwenden, werde ich sie auf eine Mischung setzen, die eine lineare Interpolationsfunktion in Kidlo ist. Jetzt schreibe ich Hintergrundcenter, Hintergrundkante, weil ich zwischen diesen beiden Farben mischen möchte, und dies wird einen Vektor 4 in die Farbe ausgeben, wie wir brauchen. Dann sagen wir, ich fange hier mit 1.0 an. Sie können sehen, dass dies alles vollständig auf 1,0 gesetzt hat. Wir haben die Hintergrundkantenfarbe überall dort eingestellt, wo das Schwarz war. Wenn ich dies auf 0.0 setzen würde, haben wir jetzt völlig die Hintergrundfarbe Mitte statt. Wenn ich es auf 0,5 setze, haben wir auf halbem Weg zwischen der Hintergrundmitte und der Hintergrundkante und so weiter. Wenn ich diese Variable ändere, ändert es, welche Mischung ich zwischen den beiden Farben verwende und ich möchte, dass diese Mischung, diese letzte Gewichtsvariable, davon abhängt, wie nah ich bin oder wie weit ich von der Mitte der Lampe entfernt bin. Je weiter ich von der Mitte bin, desto mehr möchte ich mich auf Hintergrundkante verlassen, und je näher ich an der Mitte bin, desto mehr möchte ich mich auf Hintergrundzentrum verlassen. Ich werde sagen, ich möchte den absoluten Wert von 0,5 minus der aktuellen x-Position, die wiederum, ich kann die aktuelle Position erhalten, indem ich UV und dann, .x sage, und dann werde ich dies mit 2,0 multiplizieren. Lassen Sie uns das testen, um zu sehen, wie es funktioniert. Wenn ich in der Mitte bin, dann ist meine aktuelle x-Position 0,5. Ich mache den absoluten Wert von 0,5 minus 0,5, was Null ist, und multipliziere diesen dann mit 2,0, was Null ist, was bedeutet, dass ich vollständig auf die Hintergrundfarbe der Mitte angewiesen bin. Es sollte ein dunkles Lila sein und es ist. Lassen Sie uns nun bei 0,0 testen. Der absolute Wert von 0,5 minus 0,0 ist 0,5, mal 2, ist 1. Ich sollte völlig auf die Hintergrundkantenfarbe angewiesen sein und ich bin es. In ähnlicher Weise, wenn ich eine Position zwischen 0,0 und 0,5 auf dem x versuche, sagen wir 0,25, habe ich den absoluten Wert von 0,5 minus 0,25, das ist 0,25, mal 2, was 0,5 ist. Ich bin auf halbem Weg zwischen Hintergrundmitte und Hintergrundkante, die Sie sehen können, dass ich bin. Ich kann diese Werte ändern, wie ich möchte, indem ich jetzt die Hintergrundkante und die Hintergrundfarbe in der Mitte ändere. Ich möchte, dass die Hintergrundfarbe etwas dunkler ist, also bringe ich sie einfach ein bisschen herunter. Da gehst du. Jetzt will ich das Gleiche tun, aber für die Blobs. Unten, wo wir die Farbe der Blobs definieren, wenn der Einfluss größer als der Schwellenwert ist, setzen wir hier die Blob-Farbe auf weiß. Ich werde stattdessen einen anderen Mix verwenden, blob_top, blob_bottom und dann möchte ich, dass das davon abhängt, wo wir auf der Y-Achse sind. Je weiter ich von oben bin, desto mehr möchte ich mich auf den Boden verlassen. Ich werde nur UV.y verwenden, so dass, wenn ich bei 1,0 bin, ich völlig abhängig von der Blob-Bodenfarbe sein werde, die Sie sehen können, dass ich bin und wenn mein UV.y Null ist, bin ich an der Spitze dieser hellen, dann sollte ich völlig verlassen die Blob-Top-Farbe, die man sehen kann, wenn ein Blob hier oben geht, dass ich ganz da oben darauf angewiesen bin. Das funktioniert gut. Jetzt möchte ich, dass die Blobs ein wenig leuchten und die Art und Weise, wie ich das tun werde, besteht darin, eine Mischung zwischen der Hintergrundfarbe an der aktuellen Position und der Blob-Farbe an der aktuellen Position zu erstellen eine Mischung zwischen der Hintergrundfarbe an . Um das zuerst zu tun, werde ich diesen Mix hier speichern und ich werde sagen, es gibt einen neuen vec4 namens current_blob_color und ich werde das auf diesen Mix setzen, das Semikolon setzen, und dann werde ich das hier unten durch current_blog_ Farbe. Das ist nur, um zu vermeiden, Code kopiert und eingefügt zu haben. Jetzt erstelle ich einen neuen Float namens glow_multiplier, und ich setze das auf was immer ich meinen Schwellenwert gesetzt habe, mal 10. Das ist ziemlich willkürlich und ich ermutige Sie, mit diesem Wert zu experimentieren, um zu sehen, welche Arten von Ergebnissen Sie erhalten können. Aber ich werde diesen glow_multiplier verwenden, um eine Mischung zu erstellen, die ich der aktuellen Farbe zuweisen werde. Ich werde sagen, Farbe gleich Mischung zwischen was auch immer die aktuelle Farbe ist, was dieser Farbverlauf ist, den wir hier eingerichtet haben, und ich möchte eine Mischung zwischen dieser Farbe und der current_blob_color an dieser Position mit einem Faktor, der von den glow_multiplier und den Einfluss , den die Blobs auf den spezifischen Punkt haben, den ich gerade betrachte. Ich sage pow, glow_multiplier mal Einfluss, was der Einfluss dieser Blobs auf diese aktuelle Position ist, und dann werde ich das erhöhen, um die fünfte Macht zu sagen, also 5.0, und dann werde ich ein Semikolon hinzufügen. Sie können sehen, dass das eine schöne kleine Aura um die Blobs hinzugefügt hat. Sie können diesen Wert 5.0 auch nach Ihren Wünschen anpassen. Aber wenn ich es vergrößere, um zu sagen, 25, wird das Glühen vollständig verschwinden. Während, wenn ich es um eins verkleinere, das gleiche nicht auf irgendeine Art von Macht erhöht, können Sie sehen, dass das Leuchten jetzt massiv ist. Der Grund dafür, weil man normalerweise denken würde, etwas zu einer höheren Macht zu bringen, würde es größer machen. Der Grund dafür ist, dass der Einfluss von glow_multiplier mal oft ein Wert kleiner als eins ist. einen Wert kleiner als eins mit einem anderen Wert kleiner als eins multiplizieren , werden wir natürlich den Wert verkleinern. Zum Beispiel, wenn wir nicht wirklich nah am Zentrum eines Blobs sind, wie wenn wir draußen in dieser glühenden Region sind, wird Einfluss eine ziemlich kleine Zahl sein. Selbst wenn man es mit den Schwellenwerten 10 multipliziert, ist es immer noch kleiner als eins. Also wirklich, ein Wert, der perfekt ist, ist, ich weiß nicht, vielleicht irgendwo um sechs oder sieben. Wirklich, was ich hier zu tun versuche, ist, etwas zu machen, das den Rand nur ein wenig weicher macht. Ich mag sieben. Nur dass ich das schnell optimieren kann, werde ich einen neuen Uniform Float glow_power machen . Ich gehe zurück und mache es einen Standardwert von sieben, was ich dort unten nicht zugewiesen hatte, so dass Sie jetzt sehen können, dass es das Glühen wiederhergestellt hat, das ich gerade hatte und jetzt kann ich diesen Wert einfach optimieren, so dass Sie sehen können, dass die kleinere ich machen es, je größer das Leuchten wird, und je größer ich es mache, desto subtiler wird das Leuchten. Ich mag immer noch einen Wert um sieben, nur um diese Kante ein wenig zu mildern und ich werde es jetzt so lassen. Auch hier ist das Optimieren und Spielen mit diesen Zahlen Teil des Prozesses. Ich bin wirklich neugierig zu sehen, was Sie tun können, indem Sie diese Funktion ein wenig durcheinander bringen. In der nächsten Lektion fügen wir eine Lava-Lampensockel hinzu. 8. Füge eine Basis hinzu: In dieser Lektion wechseln wir zur Verwendung eines Lava-Lampensockels. Um zu beginnen, werde ich dieses Symbol Punkt PNG ersetzen, das ich gerade verwende, mit der Lava-Lampensockel , die Sie im Abschnitt Projektressourcen finden können. Sie können auch Ihren eigenen Lava-Lampensockel erstellen. Das Wichtigste an diesem Bild ist, dass es eine einfarbige Farbe hat , die Sie mit unserem Lava Lampe Globus Shader ersetzen möchten. Um Ihr Lavalampengrundbild zum Godot-Projekt hinzuzufügen, können Sie die Datei entweder in das Dateisystem hier in der unteren linken Ecke ziehen, oder Sie können diese Datei zu Ihrem Ordner auf Ihrem Desktop hinzufügen , der das Lavalampenprojekt darstellt. Ich habe das Lava-Lampen-Basis-Bild auf meinem Desktop gespeichert, so dass ich es einfach in das Dateisystem in der unteren linken Ecke ziehen werde. Jetzt werden Sie sehen, dass es sagt, „Lava Lamp base dot png“ direkt im res Ordner des Dateisystems. Ich werde auf meinen „Sprite“ -Knoten klicken, und wo Textur hier steht, werde ich nur die Lava-Lampensockel in die Textur ziehen. Das Lava-Lampen-Basisbild, das ich erstellt habe, ist viel höher als Icon Dot PNG. Es hat eine Tonne mehr Pixel, und wenn ich mit dem Mausrad verkleinere, können Sie sehen, dass dies jetzt eine ziemlich lange Lava-Lampe ist. Sie können auch sehen, dass die Blobs jetzt sehr, sehr winzig sind, und das liegt daran, dass wir alles nach Texturpixelgröße skalieren, so dass der Abstand zum Blob-Zentrum ziemlich groß ist, wohin Sie gehen. Um das zu beheben, werde ich einen neuen einheitlichen Schwimmer namens max strength erstellen und ich setze ihn auf 16 für jetzt. Ich werde hier unten die maximale Stärke multiplizieren. Nehmen Sie die Blob-Mittelstärke für jeden Blob, ich werde es nur mit der maximalen Stärke multiplizieren. Da alle diese Werte für die Festigkeitskomponente nicht mehr als eins sind, ist dies in der Tat die maximale Stärke, die ein einzelner Blob haben wird. Sie können sehen, dass das unsere Blobs wieder auf eine normale Größe gebracht hat. Aber ich kann auch in meine Shader-Parameter gehen und dies so anpassen, wie ich möchte, um sie größer oder kleiner zu machen. Ich setze es für jetzt auf 16 zurück oder klicke auf die Reset-Taste. Das nächste, was ich tun werde, ist nur das Sprite herunterskalieren , so dass es in diese blaue Box passt, die derzeit die Größe des Bildschirms darstellt. Moment setze ich das einfach auf 0,4 und 0,4. Ich kann sehen, dass das immer noch ein wenig außerhalb der Box ist, also werde ich 0.3 und 0.3 eingeben. Jetzt sind wir innerhalb der blauen Grenzen, und wir haben diese einfache Lava-Lampe. Aber gerade jetzt, da wir die Farbe überall überschreiben, können wir nie den Lava-Lampensockel selbst sehen. Deshalb habe ich gesagt, dass es wichtig ist, dass der Lampenkugel eine einfarbige Farbe hat. Wenn ich nach oben scrolle und die Textur betrachte, habe ich diese Lava-Lampensockel erstellt und Sie können sehen, dass der Bereich, den ich durch meinen Shader ersetzen möchte , perfekt magenta ist. In meinem Fragment-Shader möchte ich zuerst die Farbe der Textur an diesem aktuellen Punkt verwenden, und dann, wenn die Farbe der Textur an diesem aktuellen Punkt perfekt magenta ist, dann machen Sie all das Zeug, das wir bereits geschrieben haben. Um dies zu tun, werde ich zuerst sagen, „Farbe gleich“ und dann Godot hat eine eingebaute Texturfunktion, um Farben aus Texturen zu lesen, und dann werde ich sagen, „TEXTURE“ alle Kappen und „UV“ für diese aktuelle Position. Wenn die Farbe nun gleich Magenta ist, was ein Vektor 4 mit 1,0 auf dem Rot, 0,0 auf Grün und 1,0 auf Blau, 1,0 auf Alpha ist, dann möchte ich all dieses Zeug machen. Ich werde nur Control X oder Befehl X tun, um das hier auszuschneiden und einzufügen. Dann werde ich nur eine Tab-Einrückung für die Formatierung hinzufügen. Sie können sehen, dass wir jetzt unsere Grundstufe haben und Sie können sehen, dass der Globus nur auf den Bereichen erscheint, die Magenta waren. Sie könnten einen unerwünschten magentafarbenen Rand rund um den Globus der Lavalampe sehen , wie ich es momentan tue. Wenn Sie dies tun, klicken Sie auf die Registerkarte „Importieren“ in der oberen linken Ecke, stellen Sie sicher, dass Sie Lava-Lampensockel als das, was Sie importieren, ausgewählt haben, und stellen Sie dann sicher, dass sowohl Filter als auch Mipmaps deaktiviert sind. Ich habe Filter deaktiviert und ich werde auf „Wiederimportieren“ drücken. Jetzt können Sie sehen, dass diese unerwünschte magentafarbene Grenze jetzt verschwunden ist und ich habe eine perfekte Grenze zwischen dem Grau des Hintergrunds und meiner Lava-Lampe Globus. Das nächste, was ich beheben möchte, ist, dass unsere Blobs derzeit den ganzen Weg nach unten gehen können, und wir sehen sie nicht, da sie draußen gehen, wo der Globus sein soll. Um dies zu beheben und es so zu machen, dass unsere Blobs nur im Kontext dieses Globus hin und her gehen , müssen wir zwei neue Uniformen herstellen. Ich werde sagen „Uniform Float Top“ und ich werde das ungefähr 0,2 zuweisen. Es sieht so aus, als wäre das hier vielleicht 20 Prozent von oben nach unten, vielleicht sind das 20 Prozent durch, also sage ich 0,2. Dann gleichmäßig Float Boden, wenn dies 0,2 ist, vielleicht ist dies etwa 0,5 hier. Das sieht so aus, als wäre es vielleicht etwa 0,6. Ich werde sagen, 0,6 oder etwa 60 Prozent von oben nach unten. Das ist, was ich derzeit für oben und unten gehen werde, aber da sie Uniformen sind, wieder unten auf unseren Shader-Parametern, sind sie wirklich einfach anzupassen. Jetzt möchte ich sicherstellen, dass unsere oszillierende Funktion nur als y-Werte zwischen unserem oberen und unserem unteren zurückgibt. Was ich sagen werde, ist Zeiten außerhalb der Macht, ich werde sagen „mal offene Klammern, unten minus oben“. Derzeit sind diese Skalen Sinusfunktion von 0,4 und dann werde ich oben hinzufügen. Was dies derzeit tut, ist unsere Sinusfunktion um 0,4 zu skalieren und dann die Funktion nach oben zu verschieben, so dass der minimale Rückgabewert 0,2 ist. Sie können sehen, dass diese neue Funktion uns Werte zwischen 0,2 und 0,6 geben wird. Da es sich hierbei um Uniformen handelt, kann ich ihre Werte im Abschnitt Shader Parameter anpassen. Vielleicht ist Bottom eigentlich näher an, ich weiß nicht, 0,54. Dann kann ich den Boden 0,54 haben und die Blobs gehen nicht unter diese Ebene. Ich könnte auch oben erhöhen, um vielleicht in der Nähe von 0,5 zu sein, und dann können Sie sehen, dass die Blobs nicht über dieses Niveau gehen. Ich werde diese zurück auf 0,2 und 0,6 zurücksetzen, aber wissen Sie nur, dass Sie sich mit denen anlegen können, wenn Sie vielleicht eine andere Basis verwenden , um den Wert zu erhalten der die Blobs zwischen oben und unten perfekt oszilliert. Sie haben vielleicht auch bemerkt, dass unser Farbverlauf auf den Blobs die neue Ober- und Unterseite noch nicht berücksichtigt. Dieser Wert hier unten ist definitiv nicht gleich der Farbe, die wir hier für unseren Blob Boden gesetzt haben. Wenn ich dorthin gehe, wo ich über diesen Farbverlauf spreche, möchte ich die Gewichte skalieren, die wir hier für unsere gemischte Funktion verwenden. Anstatt sich nur auf den UV-Punkt y zu verlassen , der hier unten ist, möchte ich, dass einer hier ist, und ich möchte, dass Null genau hier ist. Was ich tun muss, ist die Ober- und Unterseite des Globus zu berücksichtigen. Um das zu tun, werde ich sagen „UV Punkt y minus top“. Jetzt habe ich es schon so gemacht, dass die Oberseite unserer Lampe jetzt Null ist. Sagen Sie, wenn wir hier sind und wir bei 0,2 sind, jetzt subtrahieren wir oben, was ich gesagt habe, um 0,2 zu sein, also jetzt ist das Null. Ich möchte das nach unten minus oben skalieren. Sie können sehen, dass wir jetzt den richtigen Farbverlauf haben. Der Grund dafür ist, dass ich hier an der Spitze bin, ich habe 0,2, UV Punkt y ist 0,2, 0,2 minus 0,2 ist 0, so dass dies auf Null ausgewertet wird, also sind wir völlig auf die Blob Topfarbe angewiesen. Aber wenn wir an der Unterseite sind, so ist UV derzeit 0,6, was zu einem auswertet. Sie können auch sehen, dass, wenn ich sagen würde, bewegen Sie die Unterseite höher, Ich könnte mehr und mehr von der Lampe gelb machen, oder wenn ich die obere untere, Ich kann mehr und mehr von der Lampe, die rote Farbe machen. In der nächsten Lektion exportieren wir Frames unserer Lava-Lampe in PNG-Datei. 9. Frames in PNGs exportieren: In dieser Lektion exportieren wir Rahmen unserer Lavalampe in PNGs. Stellen Sie nun sicher, dass Ihre Lava-Lampe genau so ist, wie Sie es wollen. Also fühlen Sie sich frei, alle Farben und die Ober- und Unterseite und die Stärke und all diese Arten von Dingen zu optimieren , um sicherzustellen, dass die Lava-Lampe genau so ist , wie Sie es in ein GIF exportiert werden möchten. Ich werde die maximale Stärke ein wenig verringern, weil ich das Gefühl habe, jetzt, wo ich alles zwischen 0,2 und 0,6 vollgestopft habe, gibt es nur eine Menge des Wachs im Vergleich zu vielen Hintergrundfarben. Also werde ich die maximale Stärke auf etwa 12 verringern, vielleicht ein bisschen mehr als 12. Versuchen wir es, 14. Ja, dieser Wert sieht gut aus für mich, also werde ich diesen Wert behalten und vorwärts gehen, um zu versuchen, damit ein GIF zu machen. Was ich als nächstes tun möchte, ist die Fenstergröße hier passen, diese blaue Box nach unten genau die Größe meiner Lava-Lampe zu sein. Ich kann das tun, indem ich hier auf die Textur schaue. Ich habe 512 von 1584, und ich habe derzeit eine Skala von 0,3 und 0,3. Ich werde mich an diese Zahlen erinnern, und ich gehe in der oberen linken Ecke zum Projekt und dann zu Projekteinstellungen. Scrollen Sie nach unten zu Fenster, und wo es Breite und Höhe sagt, möchte ich, dass meine Breite 512 mal 0,3 sein. Dann möchte ich auf meine Höhe 1584 mal 0,3 sein und dann schließen. Sie können sehen, dass meine blaue Box, wenn ich diese helle Auswahl aufheben, jetzt die gleiche ist wie meine Sprite Umrisse, die genau das ist, was ich will. Als nächstes gehe ich wieder in die obere linke Ecke und drücke Szene, um zur Registerkarte Szene zu wechseln. Klicken Sie auf „Mein Sprite“ und drücken Sie diese Taste, um ein neues Skript hinzuzufügen. Wir werden ein Skript schreiben, das PNG-Dateien für jeden Frame ausgibt , den wir von der Lava-Lampe rendern. Ich bin okay, dass lamp.gd der Name dieses Skripts ist, also drücke ich „Erstellen“. Also werde ich eine neue Funktion schreiben, die Frames in PNGs speichert. Denken Sie daran, dass wir jetzt in gdscript arbeiten, was nicht die gleiche Sprache ist, in der wir zuvor gearbeitet haben, also sehen die Dinge ein bisschen anders aus. Ich schreibe eine neue Funktion namens Save frame, indem ich func save_frame () sage : enter. Jetzt werden unsere Codeblöcke durch Einrückung und nicht durch geschweifte Klammern definiert. Wenn also Sparen Frame aufgerufen wird, möchte ich die Textur erfassen, die gerade im Ansichtsfenster gerendert wird, und sie als PNG speichern. Zuerst erstelle ich eine Variable, in der die Bilddaten gespeichert werden. Ich werde var image= sagen. Um dieses Bild zu erhalten, möchte ich die aktuelle Textur dessen erhalten , was in das Fenster gerendert wird. Das ist das oberste Ansichtsfenster der Godot-Spiel-Engine. Also werde ich get_tree () sagen, um den gesamten Szenenbaum zu erhalten , .get_root (), um das oberste Element oder das Ansichtsfenster zu erhalten, und dann sagen.get_texture (), um die Textur dieses Ansichtsfensters zu erhalten, und then.get_data (), um die aktuellen Bilddaten von diese Textur. Ich muss dieses Bild in ein Bild konvertieren, das Transparenz bewahrt. Ich werde eine neue Zeile machen und dann sage ich image.converge, um das Format dieses Bildes zu ändern, Bild mit einem Großbuchstaben I Punkt RGBA8. Also möchte ich dieses hier, FORMAT_RGBA8. Dieses Format wird in der Tat die Transparenz bewahren, die wir wollen. Jetzt werde ich das PNG speichern, also mache ich image.save_png. Für jetzt werde ich einfach *frame.png* als String eingeben. Jetzt möchte ich diese Funktion speichern Frame aufrufen, wenn ein neuer Frame gerendert wurde. Also in der Ready-Funktion, die aufgerufen wird, wenn der Knoten zum ersten Mal den Szenenbaum betritt, also wenn unser Spiel zum ersten Mal beginnt, werde ich Pass durch VisualServer.connect ersetzen und ich möchte dieses *frame_post_draw Signal* und ich möchte eine Verbindung zu diesem Signal zu einer Methode für dieses Objekt herstellen, also gebe ich selbst ein, und ich möchte unsere neue Spare-Frame-Methode. Also gebe ich *save_frame* als String ein. Nun, was dies tun wird, ist jedes Mal, wenn der visuelle Server uns sagt, dass er nur einen Frame gezeichnet hat, wird er die gespeicherte Frame-Methode für dieses Objekt aufrufen. Jedes Mal, wenn ein neuer Frame gezeichnet wurde, wird die gespeicherte Frame-Methode aufgerufen, wir erhalten die Textur aus dem aktuellen Ansichtsfenster und speichern sie als Bild. Speziell für frame.png. Ich drücke die Wiedergabetaste, um einen neuen Frame zu rendern. Ich schließe das Fenster, das aufgetaucht ist. Sie können sehen, dass es jetzt im Dateisystem und in der unteren linken Ecke ein neues Bild namens frame.png gibt. Ich doppelklicken Sie darauf, um eine Vorschau zu erhalten. Sie können hier rechts sehen, wir haben zwei Probleme. Erstens, der Hintergrund ist nicht transparent, es ist diese graue Farbe hier, und zwei, es wurde auf den Kopf gestellt. Lassen Sie uns zuerst das Transparenzproblem beheben. Wechseln Sie zu Projekt und dann Projekteinstellungen in der linken Ecke, und überprüfen Sie dann unter pro Pixel Transparenz auf der Registerkarte Fenster die zulässige Pixeltransparenz und die Transparenz pro Pixel. Drücken Sie dann auf „Schließen“. Dann in unserem Skript, bevor wir uns mit dem visuellen Server verbinden, müssen wir wieder unser Viewport bekommen, was genau das ist, was wir hier gemacht haben, get_tree () get_root (). Also sagen wir get_tree () .get_root () und then.set_transparent_background (true) und wir wollen das auf true setzen. Ich drücke die Play-Taste, um einen anderen Frame zu rendern, schließen Sie das Fenster, das erscheint, doppelklicken Sie auf frame.png und jetzt können Sie sehen , dass wir in der Tat einen schönen transparenten Hintergrund haben. Abhängig von Ihrem System steht Ihr vielleicht nicht auf dem Kopf, aber meins ist es. Also, nachdem ich das PNG konvertiert habe, aber bevor ich es speichere, möchte ich Bild eingeben. flip_y, und ich möchte die flip_y-Methode für das Bild aufrufen, damit es auf den Kopf kehrt. Ich drücke die Play-Taste erneut, um noch einen anderen Frame zu rendern, schließen Sie das Fenster, das angezeigt wird, und doppelklicken Sie dann auf frame.png und jetzt können Sie sehen, dass ich meinen sehr schönen Rahmen hier habe. Es ist perfekt rechts, ich habe einen Hintergrund, der transparent ist, und im Allgemeinen sieht es ziemlich gut aus. Aber was ich wirklich möchte, ist eine Menge einzelner Frames, die in ein animiertes GIF kompiliert werden. Im Moment überschreiben wir frame.png jedes Mal. Also werde ich eine neue Membervariable oben definieren, die var frame_count = 0 heißt und ich setze sie auf Null zu beginnen. Um nun die Anzahl der Frames zu steuern, die mein Ausgabe-GIF ist, werde ich den Frame nur speichern, wenn die Frame-Anzahl unter einer bestimmten Ebene liegt. Über dem Abschnitt „Member-Variablen“ werde ich eine neue Konstante definieren, die sich nicht ändert, und ich setze das auf MAX_FRAMES = 60 in allen Großbuchstaben, und ich setze das auf 60 für jetzt. Dann nach unten in unserer Save-Frame-Methode, werde ich unter Bild var image_name eingeben, und ich werde das vorerst einer leeren Zeichenfolge zuweisen. Jetzt, nur um sicherzustellen, dass unsere Ausgabe-Frames in der richtigen Reihenfolge sortiert sind, schreibe ich für i in range (), und dann werde ich die Länge der Zeichenfolge von MAX_FRAMES minus die Länge der Zeichenfolge unserer aktuellen Frame-Anzahl. Für jeden dieser möchte ich eine Null an den Anfang des Bildnamens anhängen. Dann außerhalb dieser for-Schleife mache ich image_name plus gleich der Zeichenfolge der aktuellen Frame-Anzahl und dann plus. PNG. Anstatt das Bild als frame.png zu speichern, speichere ich es als (image_name). Schließlich werde ich eine zur Frame-Anzahl hinzufügen. Plus ist gleich eins. Aber ich möchte dieses PNG nur speichern, wenn unsere aktuelle Frame-Anzahl niedriger ist als MAX FRAMES. Also mache ich das alles nur, wenn frame_count kleiner als MAX_FRAMES ist. Da wir dann mit Einrückungen arbeiten, werde ich all dies hervorheben und die Tabulatortaste drücken, um es überhaupt einzurücken. So sparen wir derzeit 60 Rahmen unserer Lava-Lampe. Aber wenn Godot 60 Frames pro Sekunde bekommt, bedeutet das, dass unser GIF nur 1 Sekunde lang ist, also wollte ich Godots Ziel-Frames pro Sekunde reduzieren. In der Ready-Funktion gebe ich Engine ein, setze Ziel-FPS und setze das auf 15. Das bedeutet, dass Godot 15 Frames pro Sekunde anvisiert und wenn wir 60 Frames speichern, bedeutet das, dass wir etwa vier Sekunden Laufzeit der Lava-Lampe haben. Ich werde tatsächlich zurückgehen und erhöhen, dass ein wenig mehr um es 120 für acht Sekunden Lava-Lampe Laufzeit zu machen. Drücken Sie dann die Play-Taste und lassen Sie das aufklappbare Fenster acht Sekunden oder länger laufen. Sobald es mindestens acht Sekunden vergangen ist, schließen Sie das Fenster aus, und Sie werden sehen, dass Godot alle unsere Frames importiert. Also, wenn ich hier in der unteren linken Ecke zu unserem Dateisystem gehe, können Sie sehen, dass wir alle 120 Frames haben, die bei 000.png beginnen und den ganzen Weg zu einer 119.png gehen. Jetzt möchten wir alle diese PNG-Dateien in eine GIF-Datei konvertieren, die animiert wird. 10. PNGs in ein GIF konvertieren: In dieser Lektion wandeln wir unsere exportierten PNGs in ein nahtloses animiertes GIF um. Öffnen Sie Ihren Webbrowser und gehen Sie zu einer Website, die animierte GIFs aus PNGs generieren kann. Ich empfehle die Verwendung von ezgift.com/maker. Sobald Sie auf der Website sind, drücken Sie „Durchsuchen“, um Ihre PNG-Bilder hochzuladen. Sobald Sie Ihre PNGs ausgewählt haben, drücken Sie „Upload and make GIF“, dann werden Sie alle Lava-Lampe PNGs hier sehen. Wenn Sie nach unten scrollen, stellen Sie sicher, dass Sie die Verzögerungszeit auf Null setzen und drücken Sie dann „Erstellen Sie ein GIF“. Sobald Ihr GIF geladen wurde, drücken Sie „Effekte“, scrollen Sie dann nach unten und wo Animationsfluss steht, aktivieren Sie das Kästchen neben Ausführen bis zum Ende und kehren Sie zurück zum Anfang. Drücken Sie dann „Auswahl anwenden“ und Ihr Ausgabe-GIF wird nahtlos verlaufen. Sobald Sie dies getan haben, drücken Sie die Schaltfläche „Speichern“ und speichern Sie Ihr neues GIF auf Ihrem Computer. Dies ist ein Projekt, das unzählige Möglichkeiten zum Experimentieren bietet. Je mehr Sie sich damit verwirren, desto besser verstehen Sie , wie Shader in der Godot Game Engine funktionieren. Ich ermutige Sie wirklich, das zu tun. In der nächsten Bonusstunde werden wir schnell darüber nachdenken, wie Sie Ihre Lava-Lampe in der Ecke Ihres Bildschirms brennen lassen können, während Sie Ihre andere Arbeit erledigen. 11. (Bonus) Füge die Lava-Lampe auf deinem Bildschirm hinzu: In dieser Bonusstunde werden wir schnell überlegen, wie Sie die Lava-Lampe in der Ecke Ihres Bildschirms laufen können , während Sie Ihre andere Arbeit erledigen. Ich werde damit beginnen, diese Verbindungslinie auszukommentieren, um sie so zu machen, dass wir unsere Rahmen nicht mehr exportieren. Ich benutze das Pfund oder das Hashtag-Symbol, um die Zeile zu kommentieren. Dann gehe ich zu Projekt, Projekteinstellungen. Blättern Sie nach unten zum Stretch-Modus Ich werde „2D“ und „Schließen“ sagen. Wenn ich nun die „Play“ -Taste drücke, kann ich die Größe meiner Lavalampe ändern. Ich kann es herumziehen, und ich kann es wieder so dimensionieren, wie ich es will. Wenn Sie die Größe des Fensters ändern, wird das Lava Lampen-Seitenverhältnis ein wenig abgeschaltet. Um dies zu beheben, gehen Sie zu Projekt, Projekteinstellungen und dann, wo unter Strecken Aspekt steht, wechseln Sie von „Aspekt ignorieren“ zu „Aspekt erweitern“. Jetzt, wenn Sie die Lava-Lampe laufen, bleibt die Lava-Lampe immer das gleiche Seitenverhältnis, aber sie kann immer noch an Größe zunehmen. Wenn ich jedoch auf die „Godot Game Engine“ oder ein anderes Fenster klicke, geht meine Lavalampe dahinter. Was ich tun werde, ist zu Projekt, Projekteinstellungen zu gehen und dann „Immer oben“ zu aktivieren. Wenn Sie nicht möchten, dass es neu skalierbar ist, können Sie „Re-Sizable“ deaktivieren, und wenn Sie möchten, dass es randlos ist, können Sie „Borderless“ aktivieren. Ich werde vorerst weitermachen und das tun. Wenn ich jetzt neu starte, können Sie sehen, dass die Lavalampe in der Mitte meines Bildschirms läuft und es hat keine der Godot-Grenzen darauf. Ich werde es stoppen, indem ich das Stoppschild drücke. Dann gehen wir zum Editor in der oberen linken Ecke, und dann Editor-Einstellungen. Wenn ich in den Editor-Einstellungen nach unten scrollen zu Ausführen und dann Fensterplatzierung, können Sie derzeit sehen, dass Rect auf Zentriert eingestellt ist, weshalb unsere Lava-Lampe in der Mitte des Bildschirms läuft. Ich kann dies auf eine benutzerdefinierte Position einstellen und dann die Größe meines Displays erhalten, die in meinem Fall 1920 x 1080 ist. Also kann ich sagen, 1920 minus der x-Koordinate auf unserer Lava-Lampe ist hell, also minus 153. Dann können wir 1080 minus 475 sagen. Ich möchte ein wenig mehr von dieser Nummer subtrahieren , nur um diesen Balken unten hier zu berücksichtigen. Also subtrahiere ich zusätzliche 20 von 605. Dann drücke ich „Schließen“, „Wiederholen“. Jetzt können Sie sehen, dass die Lavalampe läuft in der Ecke meines Bildschirms. Ich könnte sogar Godot minimieren und die Lavalampe auf meinem Desktop laufen lassen oder ich könnte Firefox öffnen. Die Liste geht weiter. Grundsätzlich bleibt die Lavalampe in der unteren rechten Ecke meines Bildschirms. Wenn ich es so machen möchte, dass ich die Lavalampe bewegen kann, gehe ich einfach zurück zu Projekt, Projekteinstellungen und deaktiviere dann „Borderless“ und starte neu. Nun, wenn ich will, kann ich die Lavalampe herumziehen, um sie überall hinzustellen, wo ich will. Aber es bleibt immer noch an der Spitze, da „Always On Top“ überprüft wird , so dass ich Godot immer noch minimieren und andere Dinge tun kann. Es ist nur so, dass ich es jetzt auch herumziehen kann, wenn es in die Quere kommt. So fügen Sie eine Lava-Lampe in der unteren rechten Ecke Ihres Bildschirms hinzu, nachdem Sie sie bereits mit der Godot Game Engine erstellt haben. Ich denke, es macht eine Menge Spaß, nur ein bisschen passiver Unterhaltung, während du deine andere Arbeit machst. Außerdem ist es eine ziemlich coole Konversation Starter, wenn Sie zufällig einen Bildschirm bei einem Zoom-Anruf oder etwas teilen. Vielen Dank, dass Sie die Bonusstunde überprüft haben. Ich sehe dich im nächsten Video für ein paar letzte Gedanken. 12. Letzte Gedanken: Danke, dass du die Klasse überprüft hast. Wenn Sie es noch nicht getan haben, stellen Sie bitte sicher, dass Sie Ihr Lava-Lampe-Geschenk in der Klassenprojekt-Galerie posten . Ich hoffe wirklich, Sie sind davon mit einem besseren Verständnis davon entfernt , wie 2D-Fragment-Shader funktionieren. Ich würde jede Rückmeldung, die Sie haben, wirklich zu schätzen wissen. Bitte überlegen Sie, eine Rezension hier auf Skillshare zu hinterlassen und folgen Sie mir, wenn Sie mehr Klassen wie diese wollen. Sie können mich auch über die Umfrage auf der Registerkarte Diskussionen oder auf meiner Profilseite informieren, was Sie als Nächstes sehen möchten . Wir sehen uns nächstes Mal.