劍英陪你玩轉圖形學(五)focus


很久沒來和大家交流業務(zhuangbi)水平了,最近實在是很忙,報名了小游戲大賽,一點時間都抽不出,已經坑了。

今天抓緊時間和大家介紹一個小效果:

新手引導的時候,我們會需要一種全屏幕黑掉,只有一個區域亮起的效果

先看效果

http://lightszero.github.io/focuswin/focuswin.html

一、首先讓我們來建立基本的測試環境

建立兩個Quad

把Camera配置成這樣

用正交相機,尺寸設置0.5,這樣quad不縮放剛好高度滿屏

把Quad配置成這樣

把QuadOver配置成這樣

這時候Quad就在屏幕中心,和屏幕看起來一樣高

看起來是這樣的

制作這樣一張png圖片

再找張背景圖,

然后給背景圖一個unlit材質,給quad

給quadover一個 unlit 透明材質,給quadover

看起來就是這樣的,如果你沒有弄錯這個樣子,回頭再來一遍。

然后我們給Quad加個腳本,讓他隨時保持全屏

二、讓鏤空區域動起來

讓鏤空區域動起來,這樣就可以了,這個是對Uv的乘法和加法。

如果自己寫個shader,tiling 和Offset看起來應該是這樣的

不需要寫shader,我們用默認的就可以了。

你就可以得到這樣一個效果

聰明的你一定會發現問題所在,怎么這么多。

這里要提一下Texture的FilterMode了,讓我們修改一下

這個地方Unity又弄錯了,這個Clamp其實是Border,也就是當uv超出0~1范圍時取貼圖的邊緣顏色。

來調整一下

就得到了

這樣的效果

三、驅動鏤空位置和大小

接下來我們就是去做一個轉換,根據我們想要的區域,計算出對應的tiling和offset

給quadover添加如下腳本

你就可以用鼠標拖動鏤空區域了

用鼠標滾輪可以改變鏤空區域大小


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2026 CODEPRJ.COM