很久没来和大家交流业务(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. eyegaze

    1. eye_gaze https://github.com/iitmcvg/eye-gaze 2.deepgaze https://github.com/mpatacchiola/deepgaze ...

  2. SQL关于limit的用法

    SELECT * FROM table  LIMIT [offset,] rows | rows OFFSET offset    在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,这个时 ...

  3. oracle 创建用户和imp指定表空间

    创建用户: 1,sqlplus sys/pwd as sysdba; 2, create user username identified by password; 3, grant dba,conn ...

  4. Numpy 学习之路(1)——数组的创建

    数组是Numpy操作的主要对象,也是python数据分析的主要对象,本系列文章是本人在学习Numpy中的笔记. 文章中以下都基于以下方式的numpy导入: import numpy as np fro ...

  5. action func用法记记

    public partial class Form1 : Form { public Form1() { InitializeComponent(); } public delegate void s ...

  6. MSBuild Devenv 编译VC 工程

    Devenv "C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\devenv.exe" dap_cp ...

  7. zabbix server配置文件

    这样的错误日志,并且在web端也没有画出图来. 解决方法: ①编辑zabbix服务器端的配置文件/etc/zabbix/zabbix_server.conf找到"Timeout"把 ...

  8. C# JS 单例

    单例模式的三个特点: 1,该类只有一个实例 2,该类自行创建该实例(在该类内部创建自身的实例对象) 3,向整个系统公开这个实例接口 模式1: class Singleton { //私有,静态的类自身 ...

  9. 使用git svn clone迁移svn仓库

    使用git svn clone迁移svn仓库 clone命令可以指定很多参数,主要用到这些,你也可以使用git svn help查看完整的参数列表. git svn clone https://172 ...

  10. [UCSD白板题] Longest Common Subsequence of Three Sequences

    Problem Introduction In this problem, your goal is to compute the length of a longest common subsequ ...