剑英陪你玩转图形学(五)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添加以下脚本

你就能够用鼠标拖动镂空区域了

用鼠标滚轮能够改变镂空区域大小