Up to date
This page is up to date for Godot 4.2
.
If you still find outdated information, please open an issue.
播放影片¶
Godot 通過 class_VideoPlayer 節點支援影片的播放。
支援所有平台。¶
核心中僅支援 Ogg Theora 格式(請勿與 Ogg Vorbis 音訊混淆)。擴充可以支援額外的格式,但是截止到 2022 年 7 月,還沒有這種擴充存在。
Godot 核心無法支援 H.264 和 H.265,因為它們都被軟體專利所限。AV1 不需要授權,但 CPU 解碼仍然很慢,也不是所有 GPU 都已支援硬體解碼。
Godot 3.x 核心中支援 WebM,但是會在 4.0 中移除支援,因為 bug 很多難以維護。因此**不推薦使用 WebM**。
備註
你的影片可能使用的是 .ogg
或者 .ogx
副檔名,這是帶有資料的 Ogg 容器的通用副檔名。
將這些檔副檔名修改為 .ogv``*可能*可以讓影片在 Godot 中匯入。不過,並不是所有 ``.ogg
或 .ogx
副檔名的檔都是影片——有些可能只包含音訊。
設定 Godot¶
該簡介是「建立新節點」對話框中唯一的描述。
在場景樹面板上選中 VideoStreamPlayer 節點,到屬性面板中為 Stream 屬性載入
.ogv
檔案。如果你還沒有把你的影片轉為 Ogg Theora 格式,請跳轉到 推薦 Theora 編碼設定。
如果你希望在場景載入時立即播放影片,請在屬性面板中勾選 Autoplay。否則,請保持 Autoplay 關閉,並在需要時在腳本中呼叫 VideoPlayer 節點的
play()
開始播放。
處理大小變化及不同的縱橫比¶
Godot 4.0 中在預設情況下,VideoPlayer 會自動調整到與影片解析度相配對的大小。你可以讓它遵循普通的 Control 大小規則,啟用 VideoPlayer 節點的 Expand 即可。
要調整 VideoPlayer 節點的大小隨視窗大小改變的方式,請通過 2D 編輯器視口頂部的**佈局**按鈕調整錨點。不過,這種設定可能不足以處理所有可能的情況,例如全屏播放影片但不造成形變(需要在邊界處留白)。要進行精確的控制,你可以使用專為處理這種情況設計的 AspectRatioContainer 節點:
新增一個 AspectRatioContainer 節點。請確保它不是任何其他容器節點的子節點。選中該 AspectRatioContainer 節點,然後在 2D 編輯器的頂部將**佈局**設定為**整個矩形**。將 AspectRatioContainer 節點的 **Ratio(比例)**設定為與你的影片的長寬比配對的比例。你可以在屬性面板裡直接輸入數學公式。請記住要將其中的一個運算元寫成浮點形式,否則會得到整數的商。
配置好 AspectRatioContainer 之後,請將你的 VideoPlayer 節點調整為該 AspectRatioContainer 節點的子節點。請確保禁用了該 VideoPlayer 的 Expand。你的影片現在應該就會自動適應到全屏的大小,不產生變形。
也參考
更多在專案中支援不同的長寬比的技巧,請參閱 多解析度。
在 3D 表面上顯示影片¶
使用 VideoPlayer 節點作為 Viewport 節點的子節點,就可以在 3D 表面上顯示任何 2D 節點。例如,可以用於顯示動態的廣告板,影格動畫可能花費太多的記憶體。
填寫下列設定:
建立一個 Viewport 節點。將其設定為與你的影片大小相配對的像素大小。
建立一個 VideoPlayer 節點*作為該 Viewport 節點的子節點*,並為其指定一個影片的路徑。請確保禁用了 Expand,需要時啟用 Autoplay。
建立一個 MeshInstance 節點,將其 Mesh 屬性設為 PlaneMesh 或 QuadMesh。將該網格的大小調整到與影片的長寬比一致(否則看上去就會變形)。
在 GeometryInstance 部分的 Material Override 屬性中新建一個 SpatialMaterial 資源。
在該 SpatialMaterial(底部)的 Resource 部分啟用 Local To Scene。這是在 Albedo Texture 屬性中使用 ViewportTexture 所*必須的*。
在該 SpatialMaterial 中,將 Albedo > Texture 屬性設定為**新建 ViewportTexture**。點擊編輯這個新的資源,在 Viewport Path 屬性中指定指向 Viewport 節點的路徑。
在該 SpatialMaterial 中啟用 Albedo Tex Force sRGB,防止顏色變化。
如果廣告板應該自發光,請啟用 Flags > Unshaded 提升渲染性能。
若欲檢視範例專案,請參考作業系統示範專案: https://github.com/godotengine/godot-demo-projects/tree/master/misc/os_test
Looping a video¶
For looping a video, the Loop property can be enabled. This will seamlessly restart the video when it reaches its end.
Note that setting the project setting Video Delay Compensation to a non-zero value might cause your loop to not be seamless, because the synchronization of audio and video takes place at the start of each loop causing occasional missed frames. Set Video Delay Compensation in your project settings to 0 to avoid frame drop issues.
影片解碼條件及推薦解析度¶
由於 GPU 在解碼 Theora 影片時沒有硬體加速,所以影片解碼是在 CPU 上執行的。現代的桌面 CPU 可以以 1440p @ 60 FPS 或更高的速度解碼 Ogg Theora 格式的影片,但低端移動 CPU 處理高解析度影片可能會比較吃力。
為了確保影片在各種硬體上都能夠順利解碼:
為桌面平臺開發遊戲時,建議最多編碼為 1080p(最好是 30 FPS)。大多數人還在使用 1080p 或者更低解析度的顯示器,所以編碼為更高解析度的影片可能不值那些增大的檔大小和 CPU 需求。
為移動和 Web 平臺開發遊戲時,建議最多編碼為 720p(最好是 30 FPS 或更低)。移動裝置上 720p 和 1080p 的影片通常很難看出區別。
限制¶
Godot 沒有使用限制
不支援將影片跳躍到特定的時間點。
不支援修改播放速度。VideoPlayer 也不會遵循 Engine.time_scale。
不支援從 URL 播放影片流。
推薦 Theora 編碼設定¶
建議是(在大多數情況下)**避免依賴內建的 Ogg Theora 匯出器**。你可能想要優先使用外部程式編碼影片的原因有 2 個:
Blender 等程式可以渲染 Ogg Theora。然而,預設的品質預設就如今的標準而言通常是非常低的。你可能可以在軟體裡提高品質選項,但輸出的品質可能仍然不理想(提升了檔大小)。這通常意味著那個軟體只支援按照固定位元速率(CBR)去進行編碼,不支援變數位元速率(VBR)。大多數場合應該都優先使用 VBR 編碼,因為在相同的檔大小下能夠提供更好的品質。
有些其他的程式根本無法渲染 Ogg Theora。
在這種情況下,你可以**將影片使用高品質格式渲染作為仲介**(例如高位元速率 H.264 影片),然後再重新編碼成 Ogg Theora。理想情況下,你應該使用無損或者未壓縮格式作為仲介格式,最大化輸出 Ogg Theora 影片的品質,不過這樣做會需要大量的磁碟空間。
`HandBrake <https://handbrake.fr/>`__(GUI)和 `FFmpeg <https://ffmpeg.org/>`__(CLI)都是這方面非常流行的開源工具。FFmpeg 的學習曲線相對陡峭,但功能也更強大。
這是將 MP4 視訊轉換為 Ogg Theora 的 FFmpeg 命令範例。因為 FFmpeg 支援很多輸入格式,幾乎任何輸入影片格式(AVI、MOV、WebM……)應該都可以使用下面的命令。
備註
請確保你的 FFmpeg 副本是啟用 libtheora 和 libvorbis 編譯的。檢查方法是不帶任何參數執行 ffmpeg
,然後查看命令輸出中的 configuration:
一行。
平衡品質與檔大小¶
**影片品質**等級(-q:v
)必須在 1
和 10
之間。將品質設為 6
是在品質和檔大小之間的一個不錯的妥協。如果要編碼較高的解析度(例如 1440p 或者 4K),你可能想要把 -q:v
降為 5
,把檔大小控制在合理的範圍內。因為 1440p 和 4K 影片的像素密度更高,相較於低解析度的影片,較低的品質預設看上去的效果是一樣甚至更好的。
** 音訊品質**等級(-q:a
)必須在 1
和 10
之間。將品質設為 6
是在品質和檔大小之間的一個不錯的妥協。與影片品質不同,提升音訊品質並不會顯著增加輸出檔的大小。因此,如果你想要盡可能清晰的音訊,可以將其設為 9
,達到*感知上無損*的音訊。在你的輸入檔使用的已經是無損音訊壓縮時尤其有用。Ogg Vorbis 音訊品質預設及其對應的變數位元速率表見`這個頁面 <https://wiki.hydrogenaud.io/index.php?title=Recommended_Ogg_Vorbis#Recommended_Encoder_Settings>`__。
FFmpeg:轉換時保持原始影片解析度¶
以下命令會在保持原始解析度的前提下對影片進行轉換。影片和音訊的位元速率會被設為可變,在最大化品質的同時在不需要高位元速率影片/音訊的時候節省空間(例如靜態場景)。
ffmpeg -i input.mp4 -q:v 6 -q:a 6 output.ogv
FFmpeg:調整影片大小並轉換¶
以下命令會在保持現有長寬比的前提下將影片調整到 720 像素高(720p)。如果原始檔解析度是大於 720p 的,就能夠顯著降低檔大小:
ffmpeg -i input.mp4 -vf "scale=-1:720" -q:v 6 -q:a 6 output.ogv
Chroma Key Videos¶
Chroma key, commonly known as the "green screen" or "blue screen" effect, allows you to remove a specific color from an image or video and replace it with another background. This effect is widely used in video production to composite different elements together seamlessly.
We will achieve the chroma key effect by writing a custom shader in GDScript and using a VideoStreamPlayer node to display the video content.
Scene Setup¶
Ensure that the scene contains a VideoStreamPlayer node to play the video and a Control node to hold the UI elements for controlling the chroma key effect.
Writing the Custom Shader¶
To implement the chroma key effect, follow these steps:
Select the VideoStreamPlayer node in the scene and go to its properties. Under CanvasItem > Material, create a new shader named "ChromaKeyShader.gdshader."
In the "ChromaKeyShader.gdshader" file, write the custom shader code as shown below:
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);
}
The shader uses the distance calculation to identify pixels close to the chroma key color and discards them, effectively removing the selected color. Pixels that are slightly further away from the chroma key color are faded based on the fade_factor, blending them smoothly with the surrounding colors. This process creates the desired chroma key effect, making it appear as if the background has been replaced with another image or video.
The code above represents a simple demonstration of the Chroma Key shader, and users can customize it according to their specific requirements.
UI Controls¶
To allow users to manipulate the chroma key effect in real-time, we created sliders in the Control node. The Control node's script contains the following functions:
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()
also make sure that the range of the sliders are appropriate, our settings are :
Signal Handling¶
Connect the appropriate signal from the UI elements to the Control node's script. you created in the Control node's script to control the chroma key effect. These signal handlers will update the shader's uniform variables in response to user input.
Save and run the scene to see the chroma key effect in action! With the provided UI controls, you can now adjust the chroma key color, pickup range, and fade amount in real-time, achieving the desired chroma key functionality for your video content.