【实现100个unity特效之8】使用ShaderGraph实现2d贴图中指定部分局部发光效果

已于 2024-07-24 21:58:01 修改
阅读量2k 收藏 33
点赞数 42
分类专栏： # 实现100个unity特效 文章标签： unity 贴图 游戏引擎
于 2024-07-24 13:37:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36303853/article/details/140624765
版权

最终效果

寒冰法师

请添加图片描述

火焰法师

请添加图片描述

文章目录

素材

https://assetstore.unity.com/packages/2d/characters/gothicvania-church-pack-147117
在这里插入图片描述

一、功能分析

实现方法

将序列图中要发光的部位单独提取出来，进行处理完后在覆盖回原来的图片
具体的做法就是制作一张黑白的次级图片，白色的部分是对应主图片中要发光的部位，黑色部分就是背景
在这里插入图片描述

基本思路

1.让贴图中让想要发出光亮的部分使用一种更明亮的颜色
2.使用Bloom进行处理
在这里插入图片描述

Unity的Bloom后处理

是一种常用的后处理效果，可以让高亮区域的颜色逐渐扩散到周围并使得这些光源散发出更强烈的亮度，并产生柔和的光晕效果，增加视觉上的对比度和明亮感

为什么关键部位白色？

白色的RGB都是1,1乘任何数，都会变成那个数
黑色的RGB都是0,0乘任何数，都是0

在这里插入图片描述

最终结果

当我们处理完黑白次级图片后，就可以直接将其与主图片进行相加
在这里插入图片描述

二、 新建URP项目

如果你的项目默认不是URP项目，可以选择升级到URP，参考：【unity小技巧】为啥我们的模型材质显示粉色？unity普通项目升级URP项目

在这里插入图片描述

三、合并图片

这个主角素材图片默认是分开的，我们先将图片合并，方便后续抠图

在线工具：http://sjli.github.io/spritemaker_extjs/example.html

合并后的图片
在这里插入图片描述

四、使用PS制作黑白图片

方法一 手动涂鸦

可能精准但是耗时的方法，推荐用第二种

在这里插入图片描述

方法二 魔棒工具

方便快捷的点选方法

1. 拖入图片进PS，选择魔棒工具，容差设置为0，取消勾选连续，点选想要发光的区域

在这里插入图片描述

2. 如果对一些选择不满意，可以点击添加到选区，就可以连续点选不满意的区域，如果不小心点错了，可以按Ctrl+z撤回

在这里插入图片描述
最终效果
在这里插入图片描述

3. 全部选中后，点击新建图层

在这里插入图片描述

4. 将原来图层隐藏

在这里插入图片描述

5. 点击填充

在这里插入图片描述

6. 内容选白色，点击确认

在这里插入图片描述
此时我们选中的部位就被白色填充了
在这里插入图片描述

7. 点击新建选区，把原来的选择去掉

在这里插入图片描述

8. 选择填充工具，颜色选黑色，容差设为0

在这里插入图片描述

9. 导出

在这里插入图片描述

最终效果

如果你比较懒，可以选择直接使用我准备好的黑图
请添加图片描述

五、将黑白图片制作成主图片的次级纹理

配置
在这里插入图片描述
制作成主图片的次级纹理，命名为_GlowTextures
在这里插入图片描述

六、素材默认不支持光照，修改材质

人物和场景都用这个Sprite-lit-default材质，这个材质可让我们的纹理接受光源影响

在这里插入图片描述

七、接下来在场景中添加bloom进行后处理

让相机支持后处理
在这里插入图片描述

新建Global Volume全局后处理
在这里插入图片描述

添加bloom泛光效果
在这里插入图片描述
Threshold(阈值)：控制哪些亮度的像素会受到泛光效果的影响。高于阈值的像素才会产生泛光效果，低于阈值的像素将不受影响。调整阈值可以控制泛光的出现频率。一般在0-1之间。简单说就是这个值越小,就会有更多物体会亮起来,值越大亮起来的物体就越少。一般默认填0.9就可以了
Intensity(强度)：控制泛光的亮度增强程度。增加该值会使泛光更明显，减小该值会减弱泛光效果。这个值可以控制光的亮度，值越大越亮。

八、添加全局2D光源

在这里插入图片描述

调低它的强度，因为我们不想让这些地面什么的亮起来
调低强度可以让这些物体，在Boom的阈值下面，可以让它们不亮起来，这里设为0.7了
在这里插入图片描述

九、新建受到光源影响的Sprite Lit ShaderGraph

在这里插入图片描述

按这个ShaderGraph新增材质挂载主角身上，可以看到主角变成了一坨，那是因为我们ShaderGraph还没有配置材质没有MainTex纹理属性。
在这里插入图片描述

十、配置Sprite Lit ShaderGraph节点

Sample Texture 2D节点

接收一个Texture2d类型的输入，输出这个Texture2d的RGBA
在这里插入图片描述

保存可以看到人物纹理已经渲染了
在这里插入图片描述
有同学就会有疑问了，我明明还没有配置主绝纹理，为啥主角就正常了。其实Unity它会自动根据这个reference上的值，从我们的精灵中尝试找到对应的纹理，而我们的主纹理里名称就是这个MainTex，就会自动找到主纹理，但是为了方便测试看到效果，这里我们还是手动配置一下主纹理
在这里插入图片描述
添加次级纹理，注意名称要对应，这样unity就会自动去查找到对应次级纹理，记得名称不需要下划线
在这里插入图片描述

为了方便演示，我们还是一样手动赋值一个纹理
在这里插入图片描述

add节点

add节点可以将两个纹理进行相加

我们的主纹理中有部分是透明的，而我们的这个黑白纹理中都是不透明的，虽然我们黑色的部分它的RGB都是O，但它的A是1，当我们直接使用这个（黑白纹理的）RGBA和主纹理（的RGBA)进行相加时，它的A会把主纹理的A给覆盖了，这样就会导致主纹理中的透明度都设为1了，透明部分都被覆盖了
在这里插入图片描述
我们只想取这个次级纹理的RGB，有一个简单的方法，就是直接使用其中任何一个通道，这里我们直接使用R通道。
当我们使用add的时候，Unity会自动进行转换，比如我们R是0，Unity会自动把它转换成RGBA都是0的值，而我们R是1的时候，Unity就会自动转换成RGBA都是1的值
在这里插入图片描述

保存，人物项链和攻击波已经亮起来了
在这里插入图片描述
这是因为白色是个很明亮的颜色，它已经达到了bloom能够处理的阈值，所以它就被bloom进行后处理了，赋予了光源

Multiply节点相乘

接下来我们添加一个color，使其可以修改我们的光源颜色，将黑白纹理和一个颜色进行相乘，达到修改白色部分的效果，颜色相乘，在Unity中叫做Multiply
在这里插入图片描述

可以修改颜色模式为HDR，这样就可以修改亮度
在这里插入图片描述
保存，效果
在这里插入图片描述

可以通过修改材质配置，修改颜色和亮度
在这里插入图片描述

效果
在这里插入图片描述

One Minus节点取反

颜色误差问题

细心的同学可能会发现，我设置的颜色和显示的颜色总是有点误差，显示的颜色总是偏浅。
在这里插入图片描述

因为修改颜色的原理大致就是修改要发光部位的底色，而最后加法的最终结果会受到底色的影响所以是有误差的
在这里插入图片描述

修复

不过这个问题其实可以通过将次级纹理（如果有多个次级纹理就使用Add节点把他们加起来之后）使用One Minus节点得到反相图，然后和主纹理通过Multiply节点相乘代替主纹理就可以避免掉这个问题了。
在这里插入图片描述
效果
在这里插入图片描述

Split节点 分裂

如果不想Alpha连线太长
在这里插入图片描述

可以在最后添加Split节点，把图片重新拆分RGBA，再连接
在这里插入图片描述

十一、多个次级纹理

如果有其他次级纹理，比如剑光和盾防纹理也是类似配置
在这里插入图片描述

然后使用Add把他们相加，最后应用到主纹理上
在这里插入图片描述

最终效果

shaderGraph最终连线图

在这里插入图片描述

寒冰法师

在这里插入图片描述

请添加图片描述

火焰法师

在这里插入图片描述

请添加图片描述

参考

www.youtube.com/watch?v=WiDVoj5VQ4c
https://www.youtube.com/watch?v=Tm0rRX8GnFk
https://www.bilibili.com/video/BV17x4y1d7om/

源码

整理好了我再放上来

完结

赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，以便我第一时间收到反馈，你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法，也欢迎评论私信告诉我哦！

好了，我是向宇，https://xiangyu.blog.csdn.net

一位在小公司默默奋斗的开发者，出于兴趣爱好，最近开始自学unity，闲暇之余，边学习边记录分享，站在巨人的肩膀上，通过学习前辈们的经验总是会给我很多帮助和启发！php是工作，unity是生活！如果你遇到任何问题，也欢迎你评论私信找我， 虽然有些问题我也不一定会，但是我会查阅各方资料，争取给出最好的建议，希望可以帮助更多想学编程的人，共勉~
在这里插入图片描述

向宇it
关注
  • 42
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
UnityShader 实现2D流光效果
05-09
很多游戏Logo中都可以看到流光效果，实现方案就是对带有光条的图片uv根据时间进行移动，然后和原图进行叠加实现。
unity 2DSprite 边缘发光特效
08-31
unity 2DSprite 边缘发光特效，制作unity 2D游戏很实用！
Unity_物体轮廓外发光
最新发布
cherry_f_f的博客
04-11 4064
物体轮廓外发光shader
win桌面圣诞小插件分享
向宇
12-27 460
圣诞到了，最近有小伙伴问我有没有一些桌面圣诞小插件可以分享一下，所以我就特地去寻找了一些，感觉效果还不错，所以分享出来。
unity 2DSprite 边缘酷炫发光效果.zip
09-14
unity 2DSprite 边缘发光特效，制作unity 2D游戏很实用！很牛逼的发光效果，sprite 发光效果，点灯元
Unity 物体边缘发光 shader
08-01
放到工程文件夹里面，让物体（gameObject）的材质（material）添加这个shader，就行。
真正的边缘发光shder（unity）
07-29
可以实现边缘发光 注意设置好shader的等同于物体自身比例参数
[Unity] ShaderGraph实现Sprite图片描边/发光效果 URP
连连看爱好者
01-18 3546
[Unity] ShaderGraph实现Sprite描边发光效果。 超详细解说，内含完整连线图及下载资源。
unity用shader来实现2D涟漪/水波纹特效
04-25
在Unity游戏引擎中，2D涟漪或水波纹特效是一种常见的视觉效果，常用于模拟水面、玻璃或其他材质的动态表现。实现这种效果通常涉及到shader技术，它允许开发者自定义物体表面的渲染方式，创造出各种复杂的视觉效果。...
Unity ShaderGraph实现Sprite图片描边/发光效果 URP
01-18
本篇将详细讲解如何使用ShaderGraph实现Sprite（精灵）图片的描边和发光效果，特别针对Unity的Universal Render Pipeline (URP)。 首先，我们需要理解URP的基本概念。URP是Unity为了提供跨平台、高质量、高性能渲染...
Unity2d 动画特效
07-19
unity2动画制作插件，类似spine
unity3d无灯光下的带遮罩的边缘发光的凹凸高光材质
02-13
2个文件 1个shader 1个基础说明文件
Unity中2D特效插件
01-12
Unity中2D特效插件
Unity之ShaderGraph如何实现卡通效果
TxNet
10-18 465
今天我们来实现一下最常见的卡通效果。
Unity之ShaderGraph如何实现边缘光效果
TxNet
10-18 892
游戏中最常用的一个效果就是边缘光了，既可以做物体的高亮效果，也可以给人物皮肤表面添加光泽。
Unity3D Shader : 边缘发光
weixin_42452001的博客
06-13 1815
Shader "Custom/Test" { Properties { _MainTex ("Texture", 2D) = "white" {} _RimColor("RimColor",Color) = (1,1,1,1) _BumpMap("Bump",2D) = "bump"{} _RimPower("RimPower",Range(0.0,1.0)) = 0
Unity 让图片颜色发光发亮
cuijiahao的专栏
03-09 3735
Color color = GetComponent<SpriteRenderer>().material.color;//记录原颜色 Sequence quence_material = DOTween.Sequence(); quence_material.Append(GetComponent<SpriteRenderer>().material.DOColor(color * 1.1f, 0.1f));//让颜色乘一个系数 quence_material.Append(Ge.
unity shader-边缘发光
yiwei151的博客
12-05 3102
效果图： shader代码：Shader "Custom/BianYuanFaGuang" { Properties { _MainTex("main tex",2D) = "black"{} _RimColor("rim color",Color) = (1,1,1,1)//边缘颜色 _RimPower ("rim power"
unity Shader Graph全息效果实现
06-06
要在Unity中使用Shader Graph实现全息效果，可以按照以下步骤进行操作： 1. 创建一个新的Shader Graph材质，并将其应用于需要添加全息效果的对象上。 2. 在Shader Graph编辑器中，创建一个新的Unlit Master节点，并将其命名为“Hologram”。 3. 将这个节点的输出连接到一个新的Sub Graph节点。在这个新的子图中，创建一个新的Unlit Master节点，并将其命名为“Hologram Subgraph”。 4. 在“Hologram Subgraph”节点中，创建一个新的属性节点，用于控制全息效果的颜色和强度。 5. 创建一个新的UV节点，并将其连接到一个新的Time节点。将这些节点连接到一个新的Panner节点中，以控制全息效果的运动。将输出连接到一个新的Texture Sample节点中，用于采样全息纹理。 6. 创建一个新的Fresnel节点，并将其连接到一个新的Lerp节点中。将“Hologram Subgraph”的输出连接到lerp节点的第一个输入中，将全息纹理的输出连接到lerp节点的第二个输入中。使用“Hologram Subgraph”节点中的属性节点来控制lerp节点的混合值。 7. 将“Hologram Subgraph”的输出连接回到主Shader Graph中，以完成全息效果的创建。 通过这些步骤，你就可以使用Shader Graph在Unity中实现全息效果了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向宇it

创作不易，感谢你的鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值