Codelab Hilfe Teil 4 - Komplexes Beispiel

Zuletzt aktualisiert am 07.06.2023

Komplexe Effekte

Nachdem Sie nun die Grundlagen dessen, was mit einem Plugin möglich ist, verstanden haben und wissen, wie man eine Benutzeroberfläche hinzufügt, wollen wir uns nun etwas "Komplexeres" vornehmen. Es geht um die Anwendung fortgeschrittener Algorithmen.

Komplexe Effekte können so einfach oder so kompliziert sein, wie Sie wollen. Sie können sogar so viele integrierte Effekte, Anpassungen und Mischmodi verwenden, wie Sie für Ihre Aufgabe benötigen. Dies wird manchmal als Effektkomposition bezeichnet.

Wenn Sie in Paint.NET immer wieder dieselben Aktionen durchführen, ist das vielleicht ein guter Kandidat für einen komplexen Effekt. Hier finden Sie eine gute Diskussion darüber, was Sie in einem Paint.NET-Plugin tun können und was nicht.

Wie Effekte TATSÄCHLICH funktionieren

Bevor wir uns näher mit der Erstellung eines komplexen Effekts beschäftigen. Nehmen wir uns einen Moment Zeit, um zu verstehen, was Paint.NET genau tut, wenn Ihr Effekt ausgeführt wird.

Als erstes erstellt Paint.NET eine Benutzeroberfläche aus den Definitionen, die wir ihm im UICode-Block gegeben haben. Es ruft OnCreatePropertyCollection() auf, um alle UI-Steuerelemente zu erstellen, und OnCreateConfigUI(), um alle Steuerelementbeschriftungen und -regeln zuzuweisen (Dinge vom Typ "Aktiviert, wenn"). Dann wird die Funktion OnSetRenderInfo()aufgerufen, um die Werte aus den UI-Steuerelementen in die Variablen zu laden, die Ihr Code verwenden wird, wenn ein Benutzer eines der UI-Steuerelemente ändert. Als nächstes ruft OnSetRenderInfo() die PreRender()-Funktion auf - dies gibt Ihnen die Möglichkeit, alles vorzubereiten, was die Render()-Funktion benötigt, um ihre Arbeit zu erledigen. PreRender() wird in einem einzelnen Thread aufgerufen, Render() wird dann multithreaded aufgerufen. Sie sollten also den Inhalt von PreRender() minimieren, da dieser am langsamsten läuft.

Hier Beispielbild

Bis zu diesem Punkt in den Lektionen haben wir nichts in die Funktion PreRender() eingegeben. Aber das wird die Grundlage für die komplexe Effekt-Pipeline sein.

PreRender()

OK, jetzt wissen wir also, dass Paint.NET die Funktion OnSetRenderInfo() aufruft, wenn ein Benutzer eines unserer Steuerelemente anpasst (auf die wir in CodeLab keinen Zugriff haben), aber die Funktion PreRender() aufruft (auf die wir Zugriff haben). Wenn das erledigt ist, ruft Paint.NET die Funktion Render() auf, auf die wir definitiv Zugriff haben, da wir diese Funktion selbst schreiben müssen.

Damit haben wir zwei Möglichkeiten, Code zu platzieren:

PreRender() - wo wir unsere zusätzlichen Oberflächen für die Render()-Funktion vorbereiten müssen

und

Render() - wo wir unsere zusätzlichen Flächen und die Ausgangsfläche verwenden, um unser Ergebnis zu erzeugen

Wenn diese letzten 2 Abschnitte etwas verwirrend sind, machen Sie sich vorerst keine Gedanken darüber. Wenn Sie sie besser verstehen wollen, können Sie hierher zurückkehren und sie erneut lesen. Je mehr Erfahrung Sie mit der Programmierung von Effekten sammeln, desto besser verstehen Sie, wie diese funktionieren. Vielleicht werden Sie sogar besser darin, das Design Ihres Effekts zu optimieren als CodeLab. Aber für den Moment lassen wir CodeLab diese Entscheidungen für uns treffen.

Unser erster komplexer Effekt - Traum

Lassen Sie uns ein einfaches Design für unseren ersten komplexen Effekt wählen: Traum

Das Design von Traum ist einfach, weil wir nur einen integrierten Effekt (Gaußscher Weichzeichner) aufrufen und einen Mischmodus (Abdunkeln) verwenden müssen, damit er funktioniert:

Hier Beispielbild

Sie können sehen, wie dies funktioniert, indem Sie ein Bild in Paint.NET öffnen und die Ebene duplizieren. Verwenden Sie auf der obersten Ebene einen Gaußschen Weichzeichner mit einem Radius von 10. Ändern Sie dann den Mischmodus der obersten Ebene auf "Abdunkeln".

Da Sie nun wissen, was Sie erwartet, lassen Sie uns neu beginnen und unseren ersten komplexen Effekt erstellen.

Menüpunkt Datei Neue Vorlagen

Öffnen Sie ein Beispielbild in Paint.NET und öffnen Sie CodeLab. Wählen Sie in CodeLab Datei > Neu > Effekt, um mit dem Entwurf unseres neuen Effekts zu beginnen. Sie sehen dann den folgenden Bildschirm:

Hier Beispielbild

des Bildschirms ignorieren - ich werde diese Dinge in zukünftigen Lektionen behandeln.

In früheren Lektionen haben Sie das Standardskript von CodeLab kennengelernt. Der Zweck dieses Bildschirms ist es, ein Skript für Sie zu erstellen, das alles enthält, was Sie brauchen, um einen komplexen Effekt zu schreiben. In der großen Box in der Mitte des Bildschirms werden wir versuchen, das Design unseres Plugins Element für Element zu replizieren.

Wenn Sie sich an unseren Entwurf erinnern, müssen wir als Erstes die SRC-Fläche mit der WRK-Fläche gaußisch weichzeichnen. Dies können wir erreichen, indem wir die Spezifikationen für unser "Element" unter dem Kasten auswählen und auf die Schaltfläche [Hinzufügen] klicken. Sobald Sie das Element zu unserer Liste hinzugefügt haben, sollte es wie folgt aussehen:

Hier Beispielbild

Der nächste Schritt in unserem Entwurf besteht darin, die SRC-Ebene mit der WRK-Ebene zu mischen und die Ergebnisse in der DST-Ebene zu speichern, damit wir das Ergebnis sehen können. Ändern Sie die Kategorie auf Überblenden, wählen Sie Überblenden abdunkeln, vergewissern Sie sich, dass die Ebenen korrekt sind, und klicken Sie auf die Schaltfläche [Hinzufügen]. Ihr Bildschirm sieht nun wie folgt aus:

Hier Beispielbild

Wenn Ihr Pixelfluss gut aussieht, klicken Sie auf die Schaltfläche [Code generieren]. CodeLab wird genau dieses Skript für Sie schreiben:

Hier Beispielcode

Sobald Sie wieder im Hauptbildschirm von CodeLab sind, sollten Sie den Traumeffekt auf der ausgewählten Ebene sehen! Und fertig!

Wie in den vorangegangenen Lektionen, wenn Sie diesen Effekt zu einem dauerhaften Bestandteil Ihres Paint.NET machen wollen, folgen Sie diesen Anweisungen, um eine DLL aus Ihrem Skript zu erstellen.

Aufmerksame Schüler werden bemerkt haben, dass die x,y-Schleifen in der obigen Render()-Funktion nichts bewirken. Sie können also den folgenden Abschnitt aus Ihrem generierten Skript löschen, und es wird ein wenig schneller laufen:

Hier Beispielcode

Wann würden Sie diesen Code-Block tatsächlich benötigen? Hmmmm... mal sehen...

Zweiter komplexer Effekt - Flammen rendern

Bevor Sie mit diesem Effekt beginnen, zeichnen Sie einen Schwarz-Weiß-Farbverlauf auf Ihre Leinwand. Öffnen Sie CodeLab und verwenden Sie Datei > Neu > Effekt, um einen Renderflammen-Effekt zu erstellen:

Hier Beispielbild

Geben Sie die Elemente wie oben gezeigt ein und achten Sie darauf, dass Sie die richtigen Ebenen auswählen.

Wenn Sie alles perfekt eingegeben haben, klicken Sie auf die Schaltfläche [Code generieren]. CodeLab wird Ihr Skript für Sie schreiben und Sie sollten einige schwarz-weiße Flammen auf Ihrer Ebene sehen.

Um den Flammen etwas Farbe zu geben, müssen wir die generierte Funktion Render() wie folgt ändern:

Hier Beispielbild

Um den Flammen etwas Farbe zu geben, müssen wir für jedes Pixel, das von unserem obigen Algorithmus erzeugt wurde, ein neues Pixel mit Farbe erstellen. Dazu fügen wir den folgenden Code direkt unter der Zeile "// TODO" ein:

Hier Beispielcode

Diese Codezeile ersetzt das aus der DST-Ebene ausgelesene Pixel durch ein neues Pixel mit den Farben, die auf dem aktuellen Pixel basieren. Es ist so, als würde man die Ebene mit dem eingebauten Kurvenbefehl und den folgenden Einstellungen ändern:

Hier Beispielbild

Und wieder: fertig!

Wie in den vorangegangenen Lektionen müssen Sie, wenn Sie diesen Effekt dauerhaft in Ihr Paint.NET einbauen möchten, diese Anweisungen befolgen, um eine DLL aus Ihrem Skript zu erstellen.

Alle Seiten mit Tag Codelab

Tags: Codelab