創作內容

4 GP

[教學????] - 方格轉場Shader

作者:◎曉柴│2021-02-02 02:11:01│贊助:8│人氣:69
安安,今天在改造轉場,改得差不多了。
所以就打算來弄個有點廢的教學

這篇教學是建立在這個Shader的基礎之上的
不過該篇教學使用的引擎是Godot,
而Godot的Shader語言跟Unity不一樣,
再加上我實作的時候缺一堆東西,所以就當作翻譯跟補足

首先,最基本的
先建立材質跟Shader
Create → Shader → Image Effect Shader
因為我們要做的東西是2D的轉場,用Image Effect Shader就夠了

首先我們會需要可以調整的數值
所以先進 Properties
Properties
 {
  _Color("Tint", Color) = (1, 1, 1, 1)
  _Step("Step", Range(0,1)) = 0
  _EffectSize("EffectSize", float) = 10
    }

_Color是我們之後上顏色要用的
_Step就是我們最後要隨著場景轉換而變動的數值
_EffectSize則是我們想要的轉場特效大小,單位是px(在這個場合是方塊)

設好Properties之後,不要忘記在SubShader裡宣告變數

現在應該會長這樣
Properties
{
 _Color("Tint", Color) = (1, 1, 1, 1)
 _Step("Step", Range(0,1)) = 0
 _EffectSize("EffectSize", float) = 10
}

sampler2D _MainTex; //其實你可以刪掉這行
fixed4 _Color;
float _Step;
float _EffectSize;

fixed4 frag(v2f i) : SV_Target
{
 //原始的代碼
}

好,再來我們要來動程式了
處理Shader運算的地方在 fixed4 frag(v2f i) : SV_Target 底下的大括號裡

因為我們要先切畫面,所以用取小數(frac)來切他
取畫面座標也有不少方法,不過我這邊是用最直接的方式:
i.uv * _ScreenParams /  _ScreenParams.xy

_ScreenParams 是float4的內建數值,你可以直接用
它的x跟y分別代表畫面的寬跟高

只要在frag裡面把上述算式丟進去就好了
像這樣
fixed4 frag(v2f i) : SV_Target
{
 float2 pos = (i.uv * _ScreenParams / _ScreenParams.xy);
 float xFraction = frac(pos.x * (_ScreenParams.x / _EffectSize));
 float yFraction = frac(pos.y * (_ScreenParams.y / _EffectSize));
 return fixed4(_Color.rgba);  //把顏色設成回傳數值,這樣可以順便換顏色
}

再來,要開始畫啦
如果我們把xFraction跟 yFraction相加,根據座標不同,最多會加到2
因為要做漸變的動畫,所以我們把他跟_Step(最大值1) * 2比較
像這樣
fixed4 frag(v2f i) : SV_Target
{
 float2 pos = (i.uv * _ScreenParams / _ScreenParams.xy);
 float xFraction = frac(pos.x * (_ScreenParams.x / _EffectSize));
 float yFraction  = frac(pos.y * (_ScreenParams.y / _EffectSize));
 if (xFraction + yFraction > _Step * 2)
 {
  discard;
 }
//剩下的東西
}
discard就是「不要算這個像素」的意思,所以只要是滿足 if 的區域,通通會是透明的。
這時候我們去拉滑桿會有這種效果

你可以看到現在是三角形,而由於先前的設定,
每一個三角形的邊都是10px(雖然圖中是40px就是)
放到1920的螢幕上在臨床上有機會產生頭暈及嘔吐等症狀,所以你之後可以把他調大一點。

再來要讓它變方形,不過你知道的,方形是由三角形組成的
而只要讓Fraction的值對稱(?),就能讓他變成方形了

所以我們要用絕對值
像這樣
fixed4 frag(v2f i) : SV_Target
{
 float2 pos = (i.uv * _ScreenParams / _ScreenParams.xy);
 float xFraction = frac(pos.x * (_ScreenParams.x / _EffectSize));
 float yFraction  = frac(pos.y * (_ScreenParams.y / _EffectSize));

 float xDistance = abs(xFraction - 0.5);
 float yDistance = abs(yFraction - 0.5);
 if (xDistance + yDistance > _Step * 2f)
 {
  discard;
 }
//剩下的東西
}
現在我們去拉滑桿會有這種效果
你可以清楚看到在滑桿拉到一半的時候就全黑了
因為我們把Fraction的結果砍了一半,兩邊的最大值剩下0.5
所以只要在 if (xDistance + yDistance > _Step * 2) 的部分修正成 > _Step * 1即可

恭喜,基礎的方格(菱形)轉場Shader完成啦!

參考的原文有如何讓它有滑動效果的說明
基本上只要在 if 裡面把 i.uv.x 和 i.uv.y 加進條件式裡算就好了,當然Step的條件也得修正

如果你很懂幾何圖形的數學算法,也許你可以弄出
或是

我自己用試誤法拼出來的結果是這個

反正原理是相似的

有錯誤或是有其他建議也歡迎提出
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=5059504
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:Shader|Unity

留言共 0 篇留言

我要留言提醒:您尚未登入,請先登入再留言

4喜歡★noogaibb 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:[繪圖] - 比基尼裝甲... 後一篇:[遊戲製作:原型勇者] ...

追蹤私訊切換新版閱覽

作品資料夾

sakima55模型少女4/20序號
windsooo https://home.gamer.com.tw/artwork.php?sn=5125237看更多我要大聲說昨天12:19


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】