很久没来和大家交流业务(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添加如下脚本

你就可以用鼠标拖动镂空区域了

用鼠标滚轮可以改变镂空区域大小

剑英陪你玩转图形学(五)focus的更多相关文章

  1. 辛巴学院-Unity-剑英陪你零基础学c#系列(一)Hello World

    这不是草稿 辛巴学院:正大光明的不务正业.辛巴学院:攻城狮与荣耀石. 剑英陪你系列又来啦.剑英是一个有大爱的人,热爱每一个程序员,尤其是年轻漂亮的女程序.最近组织朋友们玩了一次即兴团体诗创作,无论怎么 ...

  2. (转载)李剑英的CSLight入门指南结合NGUI热更新

    原地址:http://www.xuanyusong.com/archives/3075 李剑英的CSLight入门指南文档撰写者:GraphicQQ: 1065147807 一. CSLIGHT 作者 ...

  3. 用前端姿势玩docker【五】快速构建中类Unix系统与Windows系统的差异化处理

    目录 用前端姿势玩docker[一]Docker通俗理解常用功能汇总与操作埋坑 用前端姿势玩docker[二]dockerfile定制镜像初体验 用前端姿势玩docker[三]基于nvm的前端环境构建 ...

  4. 【剑指Offer】简单部分每日五题 - Day 1

    今天开始更新leetcode上<剑指Offer>的题解,先从简单难度开始.预计按下列顺序更新: 简单难度:每日5题 中等难度:每日3题 困难难度:每日1题 17 - 打印从1到最大的n位数 ...

  5. 【Microsoft Azure 的1024种玩法】五、基于Azure Cloud Shell 一站式创建Linux VM

    [文章简介] Azure Cloud Shell 是一个用于管理 Azure 资源的.可通过浏览器访问的交互式经验证 shell. 它使用户能够灵活选择最适合自己工作方式的 shell 体验,无论是 ...

  6. 辛巴学院-Unity-剑英陪你零基础学c#系列(四)函数和封装

    辛巴学院:正大光明的不务正业. 国庆长假结束了,我的心情是这样的: 你总是起不早,起不早独自一个人沉睡到天亮你无怨无悔的梦着那副本我知道你根本就不想上班你总是起不早,起不早放假总是短暂,上班太难请个病 ...

  7. 辛巴学院-Unity-剑英陪你零基础学c#系列(三)计算与类型

    辛巴学院:正大光明的不务正业. 中秋节快乐,每逢佳节倍思亲,尤其是那素未谋面的老婆,对吧,屌丝们.   今天我们来探索一下C#里面奇怪的计算,奇怪的类型. 奇怪的计算 当我刚刚接触计算机编程的时候,一 ...

  8. 辛巴学院-Unity-剑英陪你零基础学c#系列(二)顺序

    这不是草稿 辛巴学院:正大光明的不务正业.   上一次的教程写出来之后,反馈还是挺多的,有很多都做了修改,也有一些让人崩溃,不得不说上几句.有些人有些很奇怪的地方,你写篇东西,被看了以后不说他感觉怎么 ...

  9. 玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)

    关于运动速度的参数与真实速度有点差距,大家可以自行调整 <!DOCTYPE html> <html> <head> <meta http-equiv=&quo ...

随机推荐

  1. BZOJ 1026: [SCOI2009]windy数

    题目 人生中的第一道数位dp,很有趣,虽然我很快推出了结构,但是过程却迟迟没有写出来,最后看别人的题解才恍然大悟 d[i][j]表示数位为i,最高位为j的方案数 DpInit非常简单,复杂度应该是O( ...

  2. 【转】简易smtp调用类

    用PHP发邮件的一个类,无需验证SMTP主机,类代码你可以不用管,只要按照后面的使用方法操作就行,这个类要先保存成一个php文件,文件名就叫smtp.php吧,下面是该文件代码: <?php c ...

  3. JS-concat

    var arr1 = [ 1,2,3 ];var arr2 = [ 4,5,6 ];var arr3 = [ 7,8,9 ];alert( arr1.concat( arr2, arr3 ) );

  4. JSP/Servlet相关

    1 简介 JSP(Java Server Page)和Servlet是JavaEE规范的两个基本成员,是JavaWeb开发的重点. JSP的本质是Servlet,当用户向指定的Servlet发送请求时 ...

  5. Jade之Plain Text

    Plain Text jade提供了3种得到纯文本的方法. Piped Text 添加纯文本的一个最简单的方法就是在文本最前面加|符号即可. jade: p | It must always be o ...

  6. ArcGIS10.1 api for Flex开发用于ArcGIS 9.3时QueryTask 'Error #2032'错误的解决方案

    因客户GIS软件需求,将应用降级到低版本ArcGIS9.3,不仅数据有些样式.配色.字符有些问题,API也要相应“降级”,解决如下: 利用9.3+flex做QueryTask时候出现了[RPC Fau ...

  7. MQL4程序:一个号称成功率100%的EA程序 .mq4

    用​m​t​4​平​台​所​提​供​的​m​q​l​4​语​言​编​写​.​风​险​与​利​润​同​在​,​高​风​险​可​博​得​高​利​润​.​自​己​把​握​.​已​经​测​试​通​过​,​下​ ...

  8. 【Android UI】Android Layout XML属性

    Layout对于迅速的搭建界面和提高界面在不同分辨率的屏幕上的适应性具有很大的作用.这里简要介绍Android的Layout和研究一下它的实现. Android有Layout:FrameLayout, ...

  9. Autolayout(VFL)

    Autolayout(VFL) 1.NSLayoutConstraint + (NSArray *)constraintsWithVisualFormat:(NSString *)format opt ...

  10. centos 清理内存缓存

    读写文件时,Linux内核为了提高读写效率与速度,会将文件在内存中进行缓存,这就是Cache Memory(缓存内存).即使程序运行结束后,Cache Memory也不会自动释放.这就会导致程序频繁读 ...