剑英陪你玩转图形学(五)focus
focus 图形学
2023-09-11 14:13:55 时间
很久没来和大家交流业务(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添加如下脚本
你就可以用鼠标拖动镂空区域了
用鼠标滚轮可以改变镂空区域大小
相关文章
- input:focus
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
- onfocus事件,onblur事件;Focus()方法,Blur()方法
- 使用 tabindex 配合 focus-within 巧妙实现父选择器
- 神奇的选择器 :focus-within
- Qt-Focus事件处理,重写qpushbutton实现背景切换鼠标样式及eventFilter的用法
- VUE input focus事件阻止冒泡 阻止父元素事件触发
- 自定义指令----focus获取焦点事件
- 专注做好一件事(转) focus---这个世界上最成功的人,他们在某一领域获得成功之后,可通过经营杠杆进入任何他们想要涉足的领域。而这都得依赖于他们曾极致的专注在做好一件事情上。
- Firefox中input元素,不能重新获取焦点函数focus()
- C# Winform设置焦点focus(textbox)和全选
- 微信6.7.4 ios12 软键盘收回时页面不回弹,导致光标位置错乱,再次点击输入框区域时无法focus
- HPE以88亿美元向Micro Focus出售大部分软件业务
- 惠普企业旗下软件业务与Mirco Focus合并
- JS实现文本框和文本域获取焦点focus()时,光标在本文的末尾