作者meowyih (meowyih)
看板GameDesign
標題[程式] 超新手 shader language 教學文 (三)
時間Mon Sep 27 14:08:44 2021
畫一條雷射光
下面程式會在畫面中間畫出一道雷射光,
原理 (只有一行) 請看 code 裡面的說明。
code
https://i.imgur.com/BFoKfEo.jpg
效果
https://i.imgur.com/zSovp0B.png
朝中心縮小的雷射光
接下來加點變化,
我們更改 laser_coeff,
讓該值越靠近中間就越細。
方法就是直接乘 abs(uv.x),
因為 uv.x 越中間就越接近 0。
code
https://i.imgur.com/ypU7t9Y.jpg
效果
https://i.imgur.com/bF6Tglb.png
日出感覺雷射光
我們也可以反過來,
讓雷射越靠中間就越粗,
看起來也很像日出效果了。
code
https://i.imgur.com/uSJM8Vz.jpg
效果
https://i.imgur.com/ru1N2NI.png
變成一支光箭
把右邊變短,左邊變長,讓它看起來像一支光箭。
code
https://i.imgur.com/u2WY39O.jpg
效果
https://i.imgur.com/8ibgccT.png
讓光箭射出去
從左邊射到右邊,
只需要用 iTime 改變 uv.x 的值就好。
iTime 是 ShaderToy 提供的參數,
就是左邊撥放器看到的撥放時間 (秒)。
這個程式只會射一次,
要再看一次需要點重頭開始的按鈕。
code
https://i.imgur.com/7fV0t2x.jpg
Godot 作法
在 Godot 上,
時間參數是執行時從 Script 提供的。
shader code
https://i.imgur.com/VEqQJWN.jpg
GDScript code
https://i.imgur.com/PKSC9o0.jpg
用 mod 和 sin/cos 讓光箭扭來扭去一直射
最後,讓直線的移動變成曲線,只要加一行改變 uv.y 就好。
code
https://i.imgur.com/5aV3IIJ.jpg
效果
https://www.youtube.com/watch?v=EjFOMY3xuxA
--
寫這比想像中花時間,
所以寫個三篇就好,
"萬一" 真的有人在看我再寫吧 XD。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.228.97.156 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/GameDesign/M.1632722926.A.564.html
※ 編輯: meowyih (61.228.97.156 臺灣), 09/27/2021 14:10:25
推 peien0312: 推推,很難得看到中文的教學,感謝分享 09/27 14:14
推 nicetw20xx: 推大大分享,感覺滿有趣的 09/27 23:45
推 louisalflame: 推教學 09/28 09:01
→ CarpeDiemAL: 推推! 09/28 15:53
推 leonardo0917: 推推,從頭照著做一次,受益良多,謝謝教學。 09/29 14:03