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

好久沒來和你們交流業務（zhuangbi）水平了，最近實在是很忙，報名了小遊戲大賽，一點時間都抽不出，已經坑了。

今天抓緊時間和你們介紹一個小效果：

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

先看效果

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

1、首先讓咱們來創建基本的測試環境

創建兩個Quad

把Camera配置成這樣

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

把Quad配置成這樣

把QuadOver配置成這樣

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

看起來是這樣的

製做這樣一張png圖片

再找張背景圖，

而後給背景圖一個unlit材質，給quad

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

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

而後咱們給Quad加個腳本，讓他隨時保持全屏

2、讓鏤空區域動起來

讓鏤空區域動起來，這樣就能夠了，這個是對Uv的乘法和加法。

若是本身寫個shader，tiling 和Offset看起來應該是這樣的

不須要寫shader，咱們用默認的就能夠了。

你就能夠獲得這樣一個效果

聰明的你必定會發現問題所在，怎麼這麼多。

這裏要提一下Texture的FilterMode了，讓咱們修改一下

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

來調整一下

就獲得了

這樣的效果

3、驅動鏤空位置和大小

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

給quadover添加以下腳本

你就能夠用鼠標拖動鏤空區域了

用鼠標滾輪能夠改變鏤空區域大小