[Godot] Sprite Sheet 使用以及HDR Glow 發光效果
前言
由於我想在Godot中實現2D的Glow效果，所以試著用出來。
注意:我的版本是 4.1.1 的Net版本，我有發現到目前使用 「相容」(Compatibility) 會出現
"Godot environment is not supported when using the GL compatibility backend yet"
的錯誤，所以這個範例只好使用 前向渲染 (Forward+)
準備素材:
要使用 Sprite Sheet 一張
我是用Aseprite直接畫的，大家也可以自己試著畫畫看，只要透過灰階就可描繪出你想要的亮暗變化
Godot操作
這裡使用的是 Forward+ Render引擎
1. 世界環境
在主要節點下添加一個 WorldEnvironment節點
並新增環境
2.設定背景
在世界環境的屬性面板將Background的模式設成 畫布(Canvas)
3.設定Glow
首先要打開Glow，請Enable它
再來將混合模式測定成疊加 會比較明顯 (用預設的柔光也可喔，只是數值要激進一點)
接下來調整HDR閾值理論上就會有效果了
HDR Threshold
當 HDR Threshold，是用來判定當哪些光源亮度超過一個特定值時，會應用到Glow效果，所以如果你會發現當你設成0.9或其他小於1的值時，畫面上開始有發光效果了，這就代表你原本場頸上所有的亮度都低於1，所以當閾值為1時，看起來才沒有什麼效果
HDR Scale
HDR Scale會影響 HDR閾值與實際亮度之間的差距，所以當你將其數值調小時，亮度的尺度會被壓縮，就更輕易地超過了HDR閾值，所以也會有更亮的效果
最後我是調成如圖，但是你也可以隨意抓效果
4. Sprite動畫
a. 建立動畫2D精靈圖
新增一個AnimatedSprite2D節點
b. 新增Sprite Frames
在屬性中的Animation欄位內的Sprite Frames 指定或是新增你要的精靈圖幀
c. 編輯 Sprite Frames
點兩下 剛剛指定的資源
d. 匯入 SpriteSheet
還記得有準備SpriteSheet的圖檔嗎，這裡就要匯入了。
點選那個像是網格的Icon來匯入檔案
e. 選擇影格
這裡要調整每個影格的大小，由於我原圖設定60*60px，所以在此我也這樣設定，並且將垂直方向設為1，代表縱向只有這一列
並且依序選擇動畫的順序
f.完成動畫準備
在Godot中，單單放在場上的Sprite動畫是不會自動執行與Loop的，如果想要在遊戲開始的時候就有這兩個效果可以Enable以下選項
- 自動播放
e.編寫Shader
將以下Shader 打上
shader_type canvas_item;
uniform sampler2D emission_texture;
uniform vec4 glow_color :source_color = vec4(1.0);
void fragment() {
vec4 current_color = texture(TEXTURE,UV);
vec4 emission_color =texture(emission_texture,UV);
if(emission_color.b>0.1f)
COLOR = current_color+emission_color*0.1+glow_color;
}
第一行的 shader_type canvas_item; 表示此Shader為一個canvas_item shader， 主要用於2D渲染
Shader type :
- spatial : 3D渲染
- canvas_item : 2D 渲染
- particles : 粒子系統
第二與第三行 代表我 宣告了兩個對外的屬性
1. Sampler2D 代表2D紋理採樣器，宣告用途是用來導入Emission貼圖的
2. 宣告標籤為source_color的4分量向量(vec4)的用途是讓開發者可以選擇要附加甚麼樣的顏色
fragment()方法是Shader的主函數，用來對每個像素進行控制
vec4 current_color = texture(TEXTURE,UV);
vec4 emission_color =texture(emission_texture,UV);
texture(sampler2D_type s,vec2 uv,[float bias])
方法用來重紋理中讀取像素顏色
- TEXTURE 是內部變數，代表 目前主材質
- UV 也是內部變數，代表目前向素的UV座標
if(emission_color.b>0.1f)
COLOR = current_color+emission_color*0.1+glow_color;
這段Code就是指
當我的Emission有像素的B分量大於0.1時，就依照Emission貼圖的灰階度再加上原本的顏色最後再加上可以給開發者調整的顏色glow_color
由於Emission 貼圖是用灰階而不亮的地方是全黑的，所以如果你試著將條件改成r或是g，會發現效果其實是一樣的，除非你在做灰階的時候是有偏一點的(像是一點點藍的灰)
而 *0.1 僅僅是為了讓Emission Texture不要影響的太過頭
d. 指定參數
點開Shader Parameters
並指定想要的Glow顏色和你的Emission Texure
留言
張貼留言