Up to date
This page is up to date for Godot 4.2
.
If you still find outdated information, please open an issue.
Abspielen von Videos¶
Godot unterstützt die Videowiedergabe mit dem VideoStreamPlayer-Node.
Unterstützte Wiedergabeformate¶
Das einzige unterstützte Format im Kern ist Ogg Theora (nicht zu verwechseln mit Ogg Vorbis Audio). Es ist möglich, dass Extensions die Unterstützung für weitere Formate bringen, aber es gibt noch keine solchen Extensions (Stand Juli 2022).
H.264 und H.265 können im Godot-Kern nicht unterstützt werden, da sie beide durch Softwarepatente geschützt sind. AV1 ist lizenzfrei, aber die Dekodierung auf der CPU ist nach wie vor langsam, und die Unterstützung für die Hardware-Dekodierung ist noch nicht auf allen verwendeten GPUs verfügbar.
WebM wurde in Godot 3.x im Kern unterstützt, aber die Unterstützung dafür wurde in 4.0 entfernt, da sie zu fehlerhaft und schwer zu pflegen war.
Bemerkung
Sie können Videos mit den Erweiterungen .ogg
oder .ogx
finden, die allgemeine Erweiterungen für Daten innerhalb eines Ogg-Containers sind.
Die Umbenennung dieser Dateierweiterungen in .ogv
könnte es ermöglichen, die Videos in Godot zu importieren. Allerdings sind nicht alle Dateien mit den Erweiterungen .ogg
oder .ogx
Videos - einige von ihnen könnten nur Audio enthalten.
Einrichten des VideoStreamPlayers¶
Erstellen Sie einen VideoStreamPlayer-Node mit dem Dialogfeld Neuen Knoten erstellen.
Wählen Sie den VideoStreamPlayer-Node im Szenenbaum-Dock, gehen Sie zum Inspektor und laden Sie eine
.ogv
Datei in die Stream-Property.Wenn Sie Ihr Video noch nicht im Ogg Theora-Format haben, lesen Sie Empfohlene Theora-Kodierungseinstellungen.
Wenn Sie möchten, dass das Video abgespielt wird, sobald die Szene geladen ist, aktivieren Sie Autoplay im Inspektor. Wenn nicht, lassen Sie Autoplay deaktiviert und rufen Sie
play()
auf dem VideoStreamPlayer-Node in einem Skript auf, um die Wiedergabe bei Bedarf zu starten.
Handhabung von Größenänderungen und unterschiedlichen Seitenverhältnissen¶
In Godot 4.0 wird die Größe des VideoStreamPlayers standardmäßig automatisch an die Auflösung des Videos angepasst. Sie können die Größe an die übliche Control anpassen, indem Sie Expand auf dem VideoStreamPlayer-Node aktivieren.
Um die Größenanpassung des VideoStreamPlayer-Nodes in Abhängigkeit von der Fenstergröße einzustellen, passen Sie die Anker über das Menü Layout oben im Viewport des 2D-Editors an. Diese Einstellung ist jedoch möglicherweise nicht leistungsfähig genug, um alle Anwendungsfälle zu bewältigen, z. B. die Wiedergabe von Videos im Vollbildmodus ohne Verzerrung des Videos (statt mit leeren Bereichen an den Rändern). Für mehr Kontrolle können Sie einen AspectRatioContainer-Node verwenden, der für diese Art von Anwendungsfall entwickelt wurde:
Fügen Sie einen AspectRatioContainer-Node hinzu. Vergewissern Sie sich, dass dieser Node kein untergeordneter Node eines anderen Containers ist. Wählen Sie den AspectRatioContainer-Node aus, und stellen Sie sein Layout oben im 2D-Editor auf Vollständiges Rechteck ein. Stellen Sie Verhältnis im AspectRatioContainer-Node so ein, dass es dem Seitenverhältnis Ihres Videos entspricht. Sie können die mathematischen Formeln im Inspektor zur Hilfe nehmen. Achten Sie darauf, dass einer der Operanden eine Float-Zahl ist. Andernfalls wird das Ergebnis der Division immer eine ganze Zahl sein.
Nachdem Sie den AspectRatioContainer konfiguriert haben, richten Sie den VideoStreamPlayer-Node so ein, dass er ein untergeordneter Node des AspectRatioContainers ist. Stellen Sie sicher, dass Ausdehnen auf dem VideoStreamPlayer aktiviert ist. Ihr Video sollte nun automatisch so skaliert werden, dass es auf den gesamten Bildschirm passt und keine Verzerrungen aufweist.
Siehe auch
Weitere Tipps zur Unterstützung mehrerer Seitenverhältnisse in Ihrem Projekt finden Sie unter Mehrere Auflösungen.
Anzeige eines Videos auf einer 3D-Oberfläche¶
Mit einem VideoStreamPlayer-Node als Child eines SubViewport-Nodes ist es möglich, jeden 2D-Node auf einer 3D-Oberfläche darzustellen. Dies kann zum Beispiel verwendet werden, um animierte Werbetafeln anzuzeigen, wenn eine Frame-by-Frame-Animation zu viel Speicherplatz erfordern würde.
Dies kann mit den folgenden Schritten geschehen:
Erstellen Sie einen SubViewport-Node. Stellen Sie seine Größe so ein, dass sie der Größe Ihres Videos in Pixeln entspricht.
Erstellen Sie einen VideoStreamPlayer-Node als untergeordnetes Element des SubViewport-Nodes und geben Sie darin einen Videopfad an. Stellen Sie sicher, dass Ausdehnen deaktiviert ist, und aktivieren Sie Autoplay, falls erforderlich.
Erstellen Sie einen MeshInstance3D-Node mit einer PlaneMesh- oder QuadMesh-Ressource in seiner Mesh-Property. Passen Sie die Größe des Meshes an das Seitenverhältnis des Videos an (andernfalls wird es verzerrt angezeigt).
Erstellen Sie eine neue Ressource StandardMaterial3D in der Property Material-Override im Abschnitt GeometryInstance3D.
Aktivieren Sie Lokal zu Szene im Abschnitt Ressource des StandardMaterial3D (ganz unten). Dies ist erforderlich, bevor Sie eine ViewportTexture in ihrer Albedo-Textur-Property verwenden können.
Setzen Sie im StandardMaterial3D die Property Albedo > Textur auf Neue ViewportTexture. Bearbeiten Sie die neue Ressource, indem Sie darauf klicken, und geben Sie den Pfad zum SubViewport-Node in der Viewport Path-Property an.
Aktivieren Sie Albedo-Textur sRGB erzwingen im StandardMaterial3D, um zu verhindern, dass die Farben ausgewaschen werden.
Wenn das Billboard sein eigenes Licht emittieren soll, setzen Sie Shading-Modus auf kein Shading, um die Performance zu verbessern.
Siehe Verwenden von Viewports und die GUI in 3D-Demo für weitere Informationen zur Einrichtung dieser Funktion.
Looping eines Videos¶
Um ein Video in einer Loop laufen zu lassen, kann die Property Loop aktiviert werden. Dadurch wird das Video nahtlos neu gestartet, wenn es sein Ende erreicht.
Beachten Sie, dass die Projekteinstellung Videoverzögerungskompensation auf einen Wert ungleich Null gesetzt werden kann, was dazu führen kann, dass Ihre Loop nicht nahtlos ist, da die Synchronisierung von Audio und Video am Anfang jeder Loop stattfindet, wodurch gelegentlich Frames ausgelassen werden. Setzen Sie die Videoverzögerungskompensation in Ihren Projekteinstellungen auf 0, um Frame-Drop-Probleme zu vermeiden.
Videodekodierungsbedingungen und empfohlene Auflösungen¶
Die Videodekodierung wird von der CPU durchgeführt, da GPUs keine Hardware-Beschleunigung für die Dekodierung von Theora-Videos haben. Moderne Desktop-CPUs können Ogg Theora-Videos mit 1440p @ 60 FPS oder mehr dekodieren, aber Low-End-Mobil-CPUs werden wahrscheinlich Probleme mit hochauflösenden Videos haben.
Damit Ihre Videos auf verschiedenen Geräten reibungslos dekodiert werden können:
Bei der Entwicklung von Spielen für Desktop-Plattformen wird empfohlen, maximal in 1080p zu kodieren (vorzugsweise mit 30 FPS). Die meisten Menschen verwenden immer noch Bildschirme mit 1080p oder einer niedrigeren Auflösung. Die Codierung von Videos mit höherer Auflösung lohnt sich daher möglicherweise nicht wegen der erhöhten Dateigröße und der CPU-Anforderungen.
Bei der Entwicklung von Spielen für Mobil- oder Webplattformen empfiehlt es sich, höchstens in 720p zu kodieren (vorzugsweise mit 30 FPS oder noch niedriger). Der visuelle Unterschied zwischen 720p- und 1080p-Videos ist auf einem mobilen Gerät in der Regel nicht besonders auffällig.
Einschränkungen bei der Wiedergabe¶
Es gibt einige Einschränkungen bei der aktuellen Implementierung der Videowiedergabe in Godot:
Das Anspringen eines bestimmten Punkts im Video wird nicht unterstützt.
Das Ändern der Abspielgeschwindigkeit wird nicht unterstützt. Der VideoStreamPlayer folgt auch nicht Engine.time_scale.
Das Streamen eines Videos von einer URL wird nicht unterstützt.
Empfohlene Theora-Kodierungseinstellungen¶
Ein guter Rat ist, sich nicht auf die eingebauten Ogg Theora-Exporter zu verlassen (meistens). Es gibt 2 Gründe, warum Sie ein externes Programm für die Kodierung Ihres Videos bevorzugen sollten:
Einige Programme wie Blender können in Ogg Theora rendern. Allerdings sind die Standardqualitätsvorgaben nach heutigen Maßstäben meist sehr niedrig. Möglicherweise können Sie die Qualitätsoptionen in der von Ihnen verwendeten Software erhöhen, aber Sie werden feststellen, dass die Ausgabequalität nicht ideal ist (angesichts der erhöhten Dateigröße). Dies bedeutet in der Regel, dass die Software nur die Kodierung mit konstanter Bitrate (CBR) anstelle der variablen Bitrate (VBR) unterstützt. Die VBR-Kodierung sollte in den meisten Fällen bevorzugt werden, da sie ein besseres Verhältnis zwischen Qualität und Dateigröße bietet.
Einige andere Programme können überhaupt nicht in Ogg Theora rendern.
In diesem Fall können Sie das Video in ein hochwertiges Zwischenformat rendern (z. B. ein H.264-Video mit hoher Bitrate) und es dann erneut in Ogg Theora kodieren. Idealerweise sollten Sie ein verlustfreies oder unkomprimiertes Format als Zwischenformat verwenden, um die Qualität des ausgegebenen Ogg Theora-Videos zu maximieren, aber dies kann viel Speicherplatz erfordern.
HandBrake (GUI) und FFmpeg (CLI) sind beliebte Open-Source-Tools für diesen Zweck. FFmpeg hat eine steilere Lernkurve, aber es ist leistungsfähiger.
Hier ein Beispiel für FFmpeg-Befehle zur Konvertierung eines MP4-Videos in Ogg Theora. Da FFmpeg eine Vielzahl von Eingabeformaten unterstützt, sollten Sie in der Lage sein, die folgenden Befehle mit fast jedem Eingabevideoformat (AVI, MOV, WebM, ...) zu verwenden.
Bemerkung
Stellen Sie sicher, dass Ihr FFmpeg mit Unterstützung für libtheora und libvorbis kompiliert ist. Sie können dies überprüfen, indem Sie ffmpeg
ohne Argumente ausführen und dann die Zeile configuration:
in der Befehlsausgabe betrachten.
Ausbalancieren von Qualität und Dateigröße¶
Die Stufe der Videoqualität (-q:v
) muss zwischen 1
und 10
liegen. Qualität 6
ist ein guter Kompromiss zwischen Qualität und Dateigröße. Wenn Sie mit einer hohen Auflösung kodieren (z.B. 1440p oder 4K), sollten Sie -q:v
auf 5
verringern, um die Dateigröße im Rahmen zu halten. Da die Pixeldichte bei einem 1440p- oder 4K-Video höher ist, sehen Voreinstellungen mit niedrigerer Qualität bei höheren Auflösungen genauso gut oder besser aus als Videos mit niedriger Auflösung.
Die Stufe der Audioqualität (-q:a
) muss zwischen -1
und 10
liegen. Die Qualität 6
bietet einen guten Kompromiss zwischen Qualität und Dateigröße. Im Gegensatz zur Videoqualität erhöht eine höhere Audioqualität die Größe der Ausgabedatei nicht annähernd so stark. Wenn Sie also eine möglichst saubere Audioqualität wünschen, können Sie die Qualität auf 9
erhöhen, um wahrnehmbar verlustfreies Audio zu erhalten. Dies ist besonders wertvoll, wenn Ihre Eingabedatei bereits verlustbehaftete Audiokompression verwendet. Höhere Audioqualität erhöht die CPU-Auslastung des Decoders, so dass es bei hoher Systembelastung zu Audioaussetzern kommen kann. Auf dieser Seite finden Sie eine Tabelle mit den Voreinstellungen für die Ogg Vorbis-Audioqualität und ihren jeweiligen variablen Bitraten.
FFmpeg: Konvertieren unter Beibehaltung der ursprünglichen Videoauflösung¶
Der folgende Befehl konvertiert das Video unter Beibehaltung seiner ursprünglichen Auflösung. Die Bitrate von Video und Audio ist dabei variabel, um die Qualität zu maximieren und gleichzeitig Speicherplatz in Teilen des Videos/Audios zu sparen, die keine hohe Bitrate benötigen (z. B. statische Szenen).
ffmpeg -i input.mp4 -q:v 6 -q:a 6 output.ogv
FFmpeg: Ändern Sie die Größe des Videos und konvertieren Sie es dann¶
Der folgende Befehl ändert die Größe eines Videos auf 720 Pixel Höhe (720p), wobei das bestehende Seitenverhältnis beibehalten wird. Dadurch kann die Dateigröße erheblich verringert werden, wenn die Quelle mit einer höheren Auflösung als 720p aufgezeichnet wurde:
ffmpeg -i input.mp4 -vf "scale=-1:720" -q:v 6 -q:a 6 output.ogv
Chroma Key-Videos¶
Mit dem Chroma Key-Effekt, der auch als "Greenscreen"- oder "Bluescreen"-Effekt bekannt ist, können Sie eine bestimmte Farbe aus einem Bild oder Video entfernen und durch einen anderen Hintergrund ersetzen. Dieser Effekt wird in der Videoproduktion häufig verwendet, um verschiedene Elemente nahtlos zusammenzufügen.
Wir erreichen den Chroma Key-Effekt, indem wir einen benutzerdefinierten Shader in GDScript schreiben und einen VideoStreamPlayer-Node verwenden, um den Videoinhalt anzuzeigen.
Einrichten der Szene¶
Stellen Sie sicher, dass die Szene einen VideoStreamPlayer-Node zur Wiedergabe des Videos und einen Control-Node zur Aufnahme der UI-Elemente zur Steuerung des Chroma Key-Effekts enthält.
Schreiben des benutzerdefinierten Shaders¶
Gehen Sie folgendermaßen vor, um den Chroma Key-Effekt zu implementieren:
Wählen Sie den VideoStreamPlayer-Node in der Szene und gehen Sie zu seinen Propertys. Erstellen Sie unter CanvasItem > Material einen neuen Shader namens "ChromaKeyShader.gdshader".
Schreiben Sie in die Datei "ChromaKeyShader.gdshader" den benutzerdefinierten Shader-Code wie unten gezeigt:
shader_type canvas_item;
# Uniform variables for chroma key effect
uniform vec3 chroma_key_color : source_color = vec3(0.0, 1.0, 0.0);
uniform float pickup_range : hint_range(0.0, 1.0) = 0.1;
uniform float fade_amount : hint_range(0.0, 1.0) = 0.1;
void fragment() {
# Get the color from the texture at the given UV coordinates
vec4 color = texture(TEXTURE, UV);
# Calculate the distance between the current color and the chroma key color
float distance = length(color.rgb - chroma_key_color);
# If the distance is within the pickup range, discard the pixel
# the lesser the distance more likely the colors are
if (distance <= pickup_range) {
discard;
}
# Calculate the fade factor based on the pickup range and fade amount
float fade_factor = smoothstep(pickup_range, pickup_range + fade_amount, distance);
# Set the output color with the original RGB values and the calculated fade factor
COLOR = vec4(color.rgb, fade_factor);
}
Der Shader verwendet die Abstandsberechnung, um Pixel in der Nähe der Chroma Key-Farbe zu identifizieren und verwirft sie, wodurch die ausgewählte Farbe effektiv entfernt wird. Pixel, die etwas weiter von der Chroma Key-Farbe entfernt sind, werden auf der Grundlage des fade_factor ausgeblendet, so dass sie sanft mit den umgebenden Farben überblendet werden. Dieser Prozess erzeugt den gewünschten Chroma Key-Effekt, der den Eindruck erweckt, dass der Hintergrund durch ein anderes Bild oder Video ersetzt wurde.
Der obige Code stellt eine einfache Demonstration des Chroma Key-Shaders dar und kann von den Benutzern entsprechend ihren spezifischen Anforderungen angepasst werden.
UI-Steuerelemente¶
Damit die Benutzer den Chroma Key-Effekt in Echtzeit beeinflussen können, haben wir Schieberegler im Control-Node erstellt. Das Skript des Control-Nodes enthält die folgenden Funktionen:
extends Control
func _on_color_picker_button_color_changed(color):
# Update the "chroma_key_color" shader parameter of the VideoStreamPlayer's material
$VideoStreamPlayer.material.set("shader_parameter/chroma_key_color", color)
func _on_h_slider_value_changed(value):
# Update the "pickup_range" shader parameter of the VideoStreamPlayer's material
$VideoStreamPlayer.material.set("shader_parameter/pickup_range", value)
func _on_h_slider_2_value_changed(value):
# Update the "fade_amount" shader parameter of the VideoStreamPlayer's material
$VideoStreamPlayer.material.set("shader_parameter/fade_amount", value)
func _on_video_stream_player_finished():
# Restart the video playback when it's finished
$VideoStreamPlayer.play()
Vergewissern Sie sich auch, dass der Bereich der Schieberegler angemessen ist. Unsere Einstellungen sind:
Behandlung von Signalen¶
Verbinden Sie das entsprechende Signal von den UI-Elementen mit dem Skript des Control-Nodes, das Sie im Skript des Control Nodes erstellt haben, um den Chroma Key-Effekt zu steuern. Diese Signal-Handler aktualisieren die Uniform-Variablen des Shaders als Reaktion auf Benutzereingaben.
Speichern Sie die Szene und führen Sie sie aus, um den Chroma Key-Effekt in Aktion zu sehen! Mit den bereitgestellten Steuerelementen der Benutzeroberfläche können Sie jetzt die Chroma Key-Farbe, den Aufnahmebereich und den Fading-Grad in Echtzeit anpassen und so die gewünschte Chroma Key-Funktionalität für Ihre Videoinhalte erzielen.