Unity 2D Spine 外发光实现思路

这篇具有很好参考价值的文章主要介绍了Unity 2D Spine 外发光实现思路。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Unity 2D Spine 外发光实现思路


前言

对于3D骨骼,要做外发光可以之间通过向法线方向延申来实现。

但是对于2D骨骼,各顶点的法线没有向3D骨骼那样拥有垂直于面的特性,那我们如何做2D骨骼的外发光效果呢?

理论基础

我们要知道,要实现外发光效果,首先得先实现外描边效果。对于2D图片的描边实现有很多种方案。

内描边:

思路:对于任意像素,如果其四周存在透明像素,则说明是边缘。

简单实现的效果如下图:

spine发光特效 如何做,Unity3D技术分享,unity,spine,游戏引擎,图形渲染

这样的边缘会非常锯齿化,因为这样做非常绝对地判断了是或不是边缘来进行上色。

如果我们不那么绝对,采取以下这种策略来进行上色:

对于任意像素,其四周的像素alpha值之积越小,则说明越靠近边缘。根据计算出的积,来使原像素颜色和边缘颜色做个线性插值(Lerp函数),以作为最后的输出颜色。

简单实现的效果如下图:

spine发光特效 如何做,Unity3D技术分享,unity,spine,游戏引擎,图形渲染

这样的边缘会比上面的更加柔和。

可以看得出来,这样的策略会占用图片的非透明像素,也就是人们所说的内描边。

外描边:

思路:对于透明像素,如果四周存在不透明像素,则说明是边缘。

spine发光特效 如何做,Unity3D技术分享,unity,spine,游戏引擎,图形渲染

和内描边一样,如果采用非常绝对的边缘判断方式,那么绘制出来的边缘就会非常锯齿化。

这里我们可以采用另一种思路:对于透明像素,如果四周像素的alpha之和越小,则说明离边缘越远。最终的边缘像素的alpha为周围像素alpha的平均值。

简单实现的效果如下图:

spine发光特效 如何做,Unity3D技术分享,unity,spine,游戏引擎,图形渲染

这样绘制出来的边缘,离原图像内容越远,越透明。有了alpha的渐变,也就有了初步的外发光效果了。

可以看得出来,这样的策略不会占用图片的非透明像素,也就是人们所说的外描边。但是却会受到图片本身绘制区域大小的影响。

图像膨胀和腐蚀:

实际上,上面的外描边和内描边的思想,就是图像的膨胀和腐蚀。

外描边说高深了,就是图像膨胀;内描边说高深了,就是图像腐蚀。

这里做个简单的科普介绍,感兴趣的小伙伴自行深入研究。

膨胀算法:

所谓膨胀算法,即使用一个n*n的矩阵去扫描图像中的每一个像素。用矩阵每一个值与其覆盖的周围一圈像素值做“与”操作,只要有任意1,那么该像素值为1。(“与”操作中都是1才是1)

膨胀之后,图像边界会向外扩大。

例子:

原图像:

0 0 0 0 0
0 0 0 0 0
0 0 1 0 0
0 0 0 0 0
0 0 0 0 0

膨胀算子:

0 1 0
1 1 1
0 1 0

最终结果:

0 0 0 0 0
0 0 1 0 0
0 1 1 1 0
0 0 1 0 0
0 0 0 0 0

腐蚀算法:

所谓腐蚀算法,即使用一个n*n的矩阵去扫描图像中的每一个像素。矩阵每一个值与其覆盖的周围一圈像素值做“或”操作,只要有任意0,那么该像素值为0。(“或”操作中都是0才是0)

腐蚀之后,图像边界会向内收缩。

腐蚀算子例子:

1 0 1
0 0 0
1 0 1
卷积:

具体定义请参考百度百科 - 卷积,这里做个简单的科普介绍,感兴趣的小伙伴自行深入研究。

简单来说就是分别乘加,最终输出各乘积之和。

实际上,上面说到的对周围像素的alpha求和取平均和后面会说到的模糊效果,说高深了都是卷积的思想。图像领域常用的边缘检测方式还包括利用Sobel算子对图像进行卷积。

spine发光特效 如何做,Unity3D技术分享,unity,spine,游戏引擎,图形渲染

上图就是4x4的矩阵应用3x3的卷积核,在步长为1的情况下,不做边缘扩展策略,最终输出为2x2的矩阵。具体计算原理及过程过程可参考Convolutional Neural Networks - Basics · Machine Learning Notebook。

遇到问题

有了上述的理论基础之后,我们再来看如何实现2D骨骼外发光,以及实现过程中需要注意和会面临的问题。

  1. 2D骨骼是由多张图片组成的,这意味着每张图片骨骼在渲染流程中会分别进行绘制,并且每张图片都存在绘制区域的限制。
  2. 要达到美术的发光效果,不仅要有描边,还要有光晕效果。
  3. 对每个像素进行操作,需要时刻考虑计算量,性能和美术效果会存在制衡。

初步方案

一开始打算在Shader直接实现外发光效果。

对于上述问题1,分别绘制的图片骨骼来说,我们可以采用多个Pass来避免对每个图片骨骼都进行了描边。

但是受困于每张图片骨骼存在绘制区域限制,导致最终效果光晕无法延展过长,不然会出现被图片大小截断的现象。

于是,为了扩展绘制区域,解决该问题,我们尝试使用后处理。

中间方案

既然采用图像后处理,那么肯定就需要先获得渲染出来的图像,之后再对图像逐像素进行先前的策略。

一开始想到的是用相机单独渲染目标,然后获取其渲染的RenderTexture,对它进行逐像素处理。

这里没有使用Shader,而是直接在C#中读取像素,并修改颜色。关键代码如下:

private Sprite ProcessTexture()
{
    tempColors = tempTexture.GetPixels(); // 读取像素,这一步操作非常耗时,尽可能减少像素数量
    for (i=0;i<textureSize;i++) 
    {
        if (tempColors[i].a <= ALPHA_LIMIT)
        {
            showColors[i] = new Color(0.95f, 1f, 0.17f, GetAlpha(tempColors, i));
        }
        else
        {
            showColors[i] = tempColors[i];
        }

    }
    tempTexture.SetPixels(showColors); // 设置像素颜色
    tempTexture.Apply();
    return Sprite.Create(tempTexture, rect, new Vector2(0.5f, 0.5f));
}

private float GetAlpha(Color[] colors, int index)
{
    alpha = 0;
    num = 0;
    for (p = -LENGTH; p <= LENGTH; p++) // 步长过长计算量也会非常大,非常耗时,但是效果会更好
    {
        for (q = -LENGTH; q <= LENGTH; q++)
        {
            thisIndex = index + p + (int)rect.width * q;
            if (thisIndex >= 0 && thisIndex < textureSize)
            {
                alpha += colors[thisIndex].a;
                num++;
            }
        }
    }
    alpha /= num;
    return alpha;
}

这种方式是使用Texture2D的接口来进行像素遍历,虽然能实现想要的效果,但是如果要每帧都渲染的话,计算会非常非常非常耗!最终简单实现效果图如下:

spine发光特效 如何做,Unity3D技术分享,unity,spine,游戏引擎,图形渲染

进阶方案

后来我发现可以使用Shader做一个后处理,把相机渲染出来的图像再经过这个后处理的Shader渲染一次,把结果绘制在最终的屏幕上。

使用了Shader之后,考虑到更好的光晕效果,我们可以很轻易地利用多个Pass对外描边做一个Bloom处理。

Bloom的原理是什么?

本质上就是渲染两张图。首先,我们在第一张图里像平常一样正常地渲染场景。然后,把明亮的区域渲染到第二张图里。在这之后我们把第二张图模糊,并且加到第一张图上,就得到了最终的结果。

具体实现思路,就是先绘制出外描边部分,然后对外描边部分做一个模糊效果,这样就得到了一个Bloom图。把这个Bloom图和原图进行叠加,得到最后的效果图。

下面是后处理C#部分的关键代码:

void OnRenderImage(RenderTexture source, RenderTexture dest)
{
    RenderTexture rtTemp = RenderTexture.GetTemporary(1000, 1000, 0); // 中间RenderTexture
    rtTemp.filterMode = FilterMode.Bilinear;

    Graphics.Blit(source, rtTemp, bloomMaterial, 0); // 第一个Pass,绘制外描边

    bloomMaterial.SetTexture("_BloomTex", rtTemp); // 把渲染出的外描边传到第二个Pass中
    Graphics.Blit(source, dest, bloomMaterial, 1); // 第二个Pass,Bloom效果以及最终成像

    RenderTexture.ReleaseTemporary(rtTemp);

    img.texture = dest;
}

后处理Shader第一个Pass的片段着色器:

fixed4 frag(OutoutVertex i) : COLOR
{
    fixed4 col = tex2D(_MainTex, i.uv);
    float alphaAdd = 0;

    // 采样周围8个点
    float2 up_uv = i.uv + float2(0, 1) * _lineWidth * _MainTex_TexelSize.xy;
    float2 down_uv = i.uv + float2(0, -1) * _lineWidth * _MainTex_TexelSize.xy;
    float2 left_uv = i.uv + float2(-1, 0) * _lineWidth * _MainTex_TexelSize.xy;
    float2 right_uv = i.uv + float2(1, 0) * _lineWidth * _MainTex_TexelSize.xy;
    float2 upleft_uv = i.uv + float2(-1, 1) * _lineWidth * _MainTex_TexelSize.xy;
    float2 upright_uv = i.uv + float2(1, 1) * _lineWidth * _MainTex_TexelSize.xy;
    float2 downleft_uv = i.uv + float2(-1, -1) * _lineWidth * _MainTex_TexelSize.xy;
    float2 downright_uv = i.uv + float2(1, -1) * _lineWidth * _MainTex_TexelSize.xy;

    // 累加alpha
    alphaAdd += tex2D(_MainTex, up_uv).a + tex2D(_MainTex, down_uv).a + tex2D(_MainTex, left_uv).a + tex2D(_MainTex, right_uv).a
        + tex2D(_MainTex, upleft_uv).a + tex2D(_MainTex, upright_uv).a + tex2D(_MainTex, downleft_uv).a + tex2D(_MainTex, downright_uv).a
        + col.a;


    if (alphaAdd > 0 && col.a <= _alphaThreshold) // 只要周围存在非透明像素,且自身透明度小于阈值
    {
        col.rgb = _lineColor;
        col.a = 1;
    }
    else
    {
        col = float4(0, 0, 0 ,0); // 这个Pass只需要获得描边
    }

    return col;
}

第一个Pass的作用是为了绘制描边,渲染出来的图如下:

spine发光特效 如何做,Unity3D技术分享,unity,spine,游戏引擎,图形渲染

后处理Shader第二个Pass的片段着色器:

fixed4 frag(OutoutVertex i) : COLOR
{
    fixed4 col = tex2D(_MainTex, i.uv);
    fixed4 bloomCol = tex2D(_BloomTex, i.uv); // 上一个Pass传入的_BloomTex

    // 采样周围8个点
    float2 up_uv = i.uv + float2(0, 1) * _bloomWidth * _MainTex_TexelSize.xy;
    float2 down_uv = i.uv + float2(0, -1) * _bloomWidth * _MainTex_TexelSize.xy;
    float2 left_uv = i.uv + float2(-1, 0) * _bloomWidth * _MainTex_TexelSize.xy;
    float2 right_uv = i.uv + float2(1, 0) * _bloomWidth * _MainTex_TexelSize.xy;
    float2 upleft_uv = i.uv + float2(-1, 1) * _bloomWidth * _MainTex_TexelSize.xy;
    float2 upright_uv = i.uv + float2(1, 1) * _bloomWidth * _MainTex_TexelSize.xy;
    float2 downleft_uv = i.uv + float2(-1, -1) * _bloomWidth * _MainTex_TexelSize.xy;
    float2 downright_uv = i.uv + float2(1, -1) * _bloomWidth * _MainTex_TexelSize.xy;

    fixed4 color = tex2D(_BloomTex, up_uv) + tex2D(_BloomTex, down_uv) + tex2D(_BloomTex, left_uv) + tex2D(_BloomTex, right_uv) +
        tex2D(_BloomTex, upleft_uv) + tex2D(_BloomTex, upright_uv) + tex2D(_BloomTex, downleft_uv) + tex2D(_BloomTex, downright_uv) +
        bloomCol;

    color /= 9; // 均值模糊

    return bloomCol + color + col * _weight; // 模糊结果与原像素一定比例求和
}

第二个Pass对之前获得的描边做了一次简单的模糊,之后再与原图像颜色进行叠加,就实现了一个简单的描边Bloom效果。渲染出来的图如下:

spine发光特效 如何做,Unity3D技术分享,unity,spine,游戏引擎,图形渲染

颜色叠加之后,最终效果如下图:

spine发光特效 如何做,Unity3D技术分享,unity,spine,游戏引擎,图形渲染
spine发光特效 如何做,Unity3D技术分享,unity,spine,游戏引擎,图形渲染

这种策略在开销相对较小的情况下实现了较好的效果,整体性价比比较高。如果想要更宽的光晕效果,而且还要做到合理不穿帮,可以增加计算量或者优化策略。

小结

总的来说,上面提到的几种方式,并不是一套完完整整的项目代码,只是一系列解决问题的思路和策略,相当于是抛砖引玉,一旦带入到项目中就需要具体问题具体分析了。当然,肯定还有各种各样的优化方法,以及一些更好计算方法。但无论采用何种策略,最终都会是性能和美术效果的平衡。

参考

Convolutional Neural Networks - Basics · Machine Learning Notebook

百度百科 - 卷积

【Unity学习心得】Sprite外发光的制作

Unity实现bloom效果

Created a Spine Edge Shader

https://developer.unity.cn/projects/cel-shading-trick文章来源地址https://www.toymoban.com/news/detail-836889.html

到了这里,关于Unity 2D Spine 外发光实现思路的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity3D教程:2D游戏技能特效

    在我们的2D图形游戏中不可缺少大量的光影、技能特效,像Diablo II中的魔法效果的实现,幸好我们拥有强大的CPU来为我们实现Alpha混合与色彩饱和混合,接下来让我们来讨论一下如何用这些方法来实现我们游戏中所需要的技能特效。     一、Alpha混合特效     Alpha混合可以让我

    2024年02月01日
    浏览(54)
  • Spine2D骨骼动画播放器 - 微信小程序版

    SpinePlayer 2D骨骼动画播放器 - 微信小程序版 可用于播放 Spine 导出的动画文件。支持版本: 3.8 、 4.1 (这两个版本的官方资源测试通过) 动画师:K完动画,交给领导审核。对方不在电脑边。又不想浪费时间录一大堆GIF。 动画师:动画导给开发,他代码有BUG非说我导出有问题

    2024年02月09日
    浏览(45)
  • Unity Spine 指定导入新Spine动画的默认材质

    通常在 Assets/Editor/SpineSettings.asset 配置文件对应着 Edit/Preferences/Spine 选项卡 Default Mix. 设置新导入的SkeletonDataAssets的 Default Mix Duration. Default SkeletonData Scale. 设置新导入的SkeletonDataAssets的默认 Scale 值. Default Shader. 设置新导入的skeleton atlas textures创建materials时使用的默认着色器.

    2024年02月06日
    浏览(48)
  • Unity | Spine动画记录

    https://blog.csdn.net/linshuhe1/article/details/79792432 https://blog.csdn.net/winds_tide/article/details/128925407 通常制作好的 Spine 动画导出时会有三个文件: .png 、.json 和 .atlas: skeleton-name.json 或 skeleton-name.skel.bytes,包含了skeleton和animation数据。 skeleton-name.atlas.txt,包含了texture atlas的信息。 一个

    2024年02月19日
    浏览(39)
  • Unity---Spine动画

    目录 1.介绍 2.优点 3.spine导出的unity资源 4.导入 5.导入报错的解决方案 6.使用 7.代码示例 1.加载Spine骨骼动画: 2.控制Spine动画的播放: 3.暂停和恢复动画播放: 4.监听动画事件: 5.切换皮肤(换装) 6.获取骨骼的Transform信息: 7.控制骨骼动画的混合和交叉淡入: 8.控制动画的

    2024年02月10日
    浏览(37)
  • Unity 导入spine插件

    1.首先去spine官网下载插件,地址是http://zh.esotericsoftware.com/spine-runtimes 2.选择unitypackage 3.问美术 他们的spine版本号 选择对应版本 4.下载下来后 直接导入Unity,删除案例文件夹。这样插件就导入了 5.美术给的资源,一般是三个,你在Unity新建个文件夹直接拖入,这时候会报错,说

    2024年02月02日
    浏览(59)
  • unity spine 进阶使用

    在项目实践中,我们常常遇到收集金币,钻石等这样的特效需求,最初我们也是全靠代码实现,效果总是差点,偶然和我们动画师聊天确定了一种新的实现方案。 大概流程是动画师在spine软件中实现炸金币+飞金币的过程 输出文件给到程序,程序需要在代码中动态修改节点位

    2023年04月08日
    浏览(73)
  • Unity Spine帧事件

    编辑窗口 点坐边的那个小灰点来切换 亮点代表当前动画 可以一个事件 添加多个监听 一个事件可以添加多个监听

    2024年02月12日
    浏览(42)
  • Spine(Unity)

    1.当前动画播放完毕后自动播放下一个动画 2.自动动画补偿问题 1)由于spine在切换动画的时候自动补偿,用于动画的平稳过度。但是会导致残影等bug,这时候需要在SetAnimation前调用 skeletonAnimation.skeleton.SetToSetupPose (); spineAnimationState.ClearTracks ();    或 skeletonGraphic.AnimationState

    2024年02月11日
    浏览(45)
  • 【Unity】运用CommandBuffer实现发光特效

    首先看下效果:  我们想要实现以下效果: 发光物体边缘模拟丁达尔效应,产生光芒。 可以被其它物体遮挡。 任意形状物体都可以产生以上效果。 首先确定实现的思路: 1、将发光物体单独绘制一遍,并计算在环境中的遮挡,剔除被遮挡的像素,保存绘制后的纹理。 2、将

    2024年02月02日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包