Unity2D战争迷雾实战：FunkyCode光照与Spine动画联动方案

做2D项目最让人头疼的需求之一就是战争迷雾。尤其在unity2D开发里如果你打算让Spine角色跑在迷雾中还要让灯光、遮挡、探索区域都自然联动传统思路往往会翻车。我最近在一个俯视角2D项目里用FunkyCode光照系统配合Spine骨骼动画把战争迷雾效果完整串了起来踩了不少坑也积累了一套能直接复用的做法。这里把方案取舍、具体配置、代码逻辑和排查经验完整写出来给正在搞同类效果的朋友一点参考。1. 战争迷雾需求拆解与方案选型1.1 迷雾到底要表现什么在动手之前先得想清楚“战争迷雾”这四个字在不同项目里代表的东西不完全一样。最常见的需求是三类完全未知区域显示为全黑无法预览地形和敌人已探索过的区域变暗但保留轮廓能看到走过的路但看不到动态物体角色视野范围内的区域正常照亮可以识别敌人、机关和道具。还有一类策略游戏会需要视野分阵营己方可见和敌方可见互相独立。不同需求对应的技术路径差别很大。我的项目需求是前两种的组合全图有迷雾遮罩玩家角色周围有一个半径不规则的可见区域角色移动后走过的路径保留半亮状态的“记忆迷雾”但依然看不清前方的敌人。同时单位身上用的是Spine动画地图上还有大量动态光照物件比如火把、发光植物这些光照需要能穿透已探索区域但不能穿透未探索区域否则就会提前暴露敌人位置。如果只做最简单的一版可以用一张黑色半透明贴图盖在场景上面然后用Stencil或Mask挖洞把可见区域“挖空”。这么做逻辑简单性能开销也不高。但问题在于它只能得到一个硬边或软化后的光圈和光照系统完全没关系火把照亮的范围没法单独参与迷雾计算Spine动画的蒙皮边缘也无法做精细的遮挡关系整体效果会很生硬。1.2 常规方案对比Mask、Shader、光照系统既然要动态光照和迷雾联动就不能闭着眼睛乱选。我把常见的几种方案拉出来对比了一下按“能否与Spine兼容、能否动态光照联动、移动端性能、实现成本”几个维度打分方案动态光照联动Spine兼容性移动端性能实现成本纯Texture Mask 摄像机遮挡差一般需同步位置好低自定义Shader视差遮挡算法中差Spine网格不走标准Sprite渲染中高自定义Mesh多边形视野中中中高FunkyCode光照系统 迷雾层好好通过碰撞体与图层中上中纯Mask方案最大的问题是它不“懂”场景里谁是遮挡物。比如一个箱子挡住了一束光但Mask是根据角色位置画的圆不会考虑箱子遮挡视觉上就会穿帮。自定义Shader的话如果场景全是普通Sprite还好一旦引入Spine问题就来了Spine动画是一套网格变形渲染体系它的蒙皮顶点数据是动态的标准Sprite的UV和顶点着色器路径不完全适用要让Shader同时处理Spine动画和迷雾遮挡需要自己写Unity引擎的Spine管线适配成本非常高。FunkyCode这个插件的优势在于它的核心思路就是“2D动态光源 阴影”它天然支持把普通Sprite、碰撞体当成遮挡物生成实时的2D阴影。而Spine角色身上挂的碰撞体可以随骨骼移动所以它能成为光源的遮挡物也能成为迷雾边界的参与者。再配合灯光本身的“只照亮指定图层”的设置就能让光照和迷雾走同一条计算管线不用额外维护两套数据。1.3 最终技术路径我最终确定的技术路径是用FunkyCode的2DLight作为玩家的视野光源把场景中的地形、墙体等静态遮挡物挂在特定的“遮挡层”上用一张专门的迷雾Sprite层作为全屏覆盖通过混合模式把未探索区域显示为深色在角色移动时持续把视野光源覆盖过的区域写入一层半透明的“探索层”让已探索区域永久保留低亮度。这样本质上是一个“光照决定迷雾轮廓迷雾层决定最终输出”的组合方案。这个路径下Spine角色不是迷雾的计算核心它是遮挡物和被看见的目标。Spine角色的阴影可以由FunkyCode的碰撞体自动生成这样当角色走到墙后面时它的轮廓会从视野中消失而角色本身又是光源覆盖范围内的活动物体可以让它不遮挡光线避免自己把自己挡住。2. FunkyCode光照系统与Spine角色的适配细节2.1 FunkyCode工作原理解析FunkyCode是一个基于Unity的2D光照插件早期叫“2D Dynamic Lights and Shadows”。它的工作方式是把光照区域当作管理对象通过给场景里的物体挂上LightCollider组件来标记阴影遮挡体然后用自定义渲染管线把阴影和光照混合到相机画面上。理解它最关键的一点是它的阴影不是“实时光线追踪”而是基于遮挡物轮廓和多边形求交计算的。它会把每个遮挡体在光源视角下投射出的阴影多边形算出来再叠加到涂层上。所以你不需要为每个像素写复杂的算法只需要在场景中安排好遮挡物层级。和传统像素级Mask相比这种方式的最大优势是遮挡关系是动态的。也就是说角色手里拿的火把会跟着骨骼动它发出来的光遇到柱子会被柱子挡住遇到其他角色也会被挡住甚至角色的手臂横在光源面前都会形成阴影。这是静态Mask永远做不到的细节。2.2 Spine动画与光照碰撞体的关系很多人第一次接触Spine时以为动画角色就是一个Sprite挂个BoxCollider2D就够了。但Spine在Unity里是通过Spine.Unity组件驱动网格渲染的同一个GameObject上可能挂有MeshRenderer、BoneFollower等组件碰撞体和动画里的“根节点”往往是分离的。如果直接把碰撞体挂在Spine角色的根节点上你会发现角色走路时上下摆动的身体和碰撞体不匹配光照阴影穿帮。正确的方式是给Spine角色单独设置一个“阴影碰撞体物体”这个物体可以挂一个或多个胶囊碰撞体或者复合碰撞体位置和大小要跟随角色的主要骨骼。更精细的做法是直接用Spine的BoundingBox碰撞体来生成阴影比如把角色的身体骨骼绑定一个BoundingBox事件区域然后把这些碰撞体加到FunkyCode的遮挡层里。这样当角色弯腰、转身、抬手时阴影会跟着Spine骨骼动态变化效果非常自然。不过BoundingBox有一个问题它的计算复杂度比普通碰撞体高。如果你场景里同时有几十个角色在走每帧更新阴影多边形会消耗不少CPU。我的建议是普通的小怪用简单的胶囊碰撞体假装人形轮廓只有主要角色或BOSS级单位才用BoundingBox。这样在画质和性能之间取一个平衡。2.3 图层和灯光参数设置FunkyCode的灯光系统是依赖于分类层的。你需要在项目里规划好Layer背景层地形、植被、墙体作为遮挡物。道具层可以遮挡光线的物品。角色层玩家和NPC这里需要选择“是否要成为遮挡物”。玩家通常不希望自己挡住自己的视野所以我会把玩家身上的LightCollider设为“只产生阴影不接收阴影”或者直接移除它的遮挡标签。迷雾层一个专门盖在全图上的Sprite不受光照影响用于输出迷雾颜色。具体到灯光参数我建议把玩家的“视野灯光”类型设置为Spotlight2D或者自定义多边形光半径要覆盖玩家的可视范围。Collision参数选“Collider”模式这样灯光只和带了LightCollider的物体发生阴影运算。颜色可以用淡蓝色或淡黄色配合迷雾层的深色能制造出探索氛围。还需要注意一点FunkyCode的灯光渲染支持“只作用于指定Layer”的Mask选项。我可以让火把光只照亮角色层和地形层把迷雾层排除在灯光影响范围外这样火把光就不会直接把整块迷雾层照亮而是只点亮迷雾之下的物体。逻辑上就是迷雾层是独立的全屏遮罩真正决定“看得见什么”的是灯光和物体之间的阴影关系。2.4 一个容易忽视的细节灯光与相机层级Unity 2D项目的相机往往不只一台。如果项目里有多层Canvas、UI相机、场景相机FunkyCode需要指定它要照亮哪一个相机。如果你的场景相机带了后处理、或者使用了不同的清除标记很容易出现一盏灯在Scene视图中亮得刺眼切到Game视图却什么都看不到的情况。我一般会单独建一个“LightCam”标记或者直接使用默认主相机把相机的Clear Flags设成SolidColor背景色设为纯黑色。然后让FunkyCode的LightManager只绑定这一个相机。这样所有迷雾相关元素都在同一套渲染体系里不会出现UI被光照打扰的尴尬。3. 战争迷雾效果完整实现流程3.1 场景搭建与基础配置先说步骤。第一步是把场景基础搭出来不用管任何代码先把图层分好。我习惯这样建目录场景层名字叫Floor放所有固定地面。墙障层名字叫Wall放所有会遮挡视野的墙体、树木、大石块。可交互道具层叫Item道具如果体积大也参与遮挡。角色层叫Unit放玩家和敌人。特效层叫FX放粒子、飘浮物。迷雾层单独建一个空节点给它加一个足够大的SpriteRenderer显示一张全黑的纹理Sprite类型设为“Sliced”也无所谓反正会被拉伸到全屏。把玩家的相机Tag设为主相机背景色设为接近黑的深蓝色这样在视野外不至于死黑一片雾的过渡会更柔和。然后接入FunkyCode在菜单里打开Window - FunkyCode - Setup它会自动添加LightManager等必要组件。如果项目里已经有别的后处理栈要注意LightManager的排序和相机事件绑定。3.2 设置全屏迷雾遮罩全屏迷雾遮罩是我用的“深色覆盖层”思路。这里不用Shader就用一个普通的SpriteRenderer材质换成一个半透明的黑色材质。只要保证这个Sprite的Sorting Order在所有场景物体之上就可以盖住整张地图。但这里有个关键如果你直接盖全屏黑色玩家视野区域也会被盖住那就什么都看不见了。所以我们需要在迷雾层上“挖洞”。FunkyCode并没有直接提供“用灯光挖洞”的功能但它提供了一些辅助纹理和混合选项。我当时的做法是把迷雾层做成一个RenderTexture遮罩在玩家的视野灯光范围内把灯光照亮区域画到这个遮罩上产生一个alpha为0的透明区域其余地方保持黑色。具体实现可以写一个很简单的OnRenderImage或者用CommandBuffer来操作。为了不把复杂度拉太高我选了一个更省事的替代方案把迷雾层拆成两层叠加。第一层叫“未探索层”全黑。第二层叫“已探索层”是一个由灯光实时写入的透明遮罩。玩家的灯光把周围照亮已探索层的alpha就会降低。运行时最终显示的迷雾 未探索层(alpha1)与已探索层(alpha已探索度)的叠加结果。如果玩家走到一个地方附近的alpha降到0.3那就说明这个地方已经探索过但不在当前视野里。让灯光直接影响材质的alpha在Unity里可以用一个极简的自写Shader或者直接用FunkyCode自带的“Light Texture”输出通道。我更推荐使用FunkyCode的LightTexture功能它能生成一张灯光照射区域的纹理我们只需要在Update里把这张纹理的亮部转换成已探索度并写入已探索层即可。3.3 编写视野记录逻辑光靠灯光还不行因为灯光只表示“当前可见区域”不会自动记录“曾探索区域”。需要我写一个记录工具定期把灯光照射过的像素信息累积到一张持续变亮的纹理中。我写的核心逻辑类似这样using System.Collections; using System.Collections.Generic; using UnityEngine; using FunkyCode; public class FogOfWarController : MonoBehaviour { public Light2D playerLight; // 玩家视野灯光 public Material exploredMat; // 已探索层材质 public RenderTexture exploredRT; // 已探索区域累积纹理 private Texture2D fogTexture; private Color[] fogPixels; void Start() { // 初始化纹理尺寸根据迷雾精度调整 fogTexture new Texture2D(512, 512, TextureFormat.RGBA32, false); exploredRT new RenderTexture(512, 512, 0); Graphics.Blit(fogTexture, exploredRT); } void Update() { // 用相机把灯光的可见区域转到底层纹理 // 这里lightTexture是灯光渲染出来的可视化通道 Texture lightTex playerLight.GetLightTexture(); if (lightTex ! null) { Graphics.Blit(lightTex, exploredRT); // 把累积结果回读到Texture2D中用于记录 RenderTexture.active exploredRT; fogTexture.ReadPixels(new Rect(0, 0, 512, 512), 0, 0); fogTexture.Apply(); RenderTexture.active null; } } }这段代码只是骨架真正项目里不要每帧都ReadPixels很消耗性能。更好的做法是每隔0.2秒或0.5秒采样一次或者只在角色移动一定距离后采样。还有一个更巧的办法就是用双RenderTexture交替Blit利用Alpha Blend把当前灯光可见区域逐渐累积到一张已探索纹理中这样就不需要从GPU回读像素到CPU性能友好得多。我个人最终的方案是维护两张RenderTexture一张A存“已探索累积”一张B做临时缓冲。每帧把A和“当前可见灯光纹理”做一次加法混合写入B然后交换A和B。叠加的系数越小迷雾消散得越慢回访旧区域时不会一瞬间变透。3.4 Spine角色在迷雾中的正确显示Spine角色本身不是迷雾层的一部分但它必须和光照系统联动。我建议在Spine角色的骨骼层级中增加一个“LightAnchor”空物体把它绑定到角色重心骨骼上。然后在LightAnchor下挂一个LightCollider2D组件碰撞体类型选“SpriteRenderer”或“Collider”。如果你用的是简单人形可以直接用PolygonCollider2D描出角色轮廓。这里有几个常见错误第一不要直接在Spine的root节点上挂LightCollider。虽然能工作但动画播放时root节点可能会包含大量的位移和缩放信息导致阴影漂移或大小抖动。第二Spine角色的材质需要和迷雾层的材质隔离。Spine动画默认用的材质是SpineShader如果你把它的材质替换成FunkyCode的Light材质角色会直接变透明或变黑。要保持Spine材质不变只让碰撞体参与阴影计算。第三敌人单位和玩家的配置不同。玩家角色需要“不挡住自己的视野”所以它的LightCollider要设置为“ShadowOnly”且“IgnoreLayer”不包含自身层敌人则应该正常遮挡这样当敌人走到墙后时它在玩家视野内消失很有策略感。3.5 动态光照、火把和探索联动好了迷雾遮罩的动态化搞定后接着要让场景里的火把、荧光草等光源也参与进这个系统。我给场景中的发光物挂上Light2D组件类型可以是PointLight或SpriteLight然后为发光物添加一个ShadowCollider让它的光被周围墙体遮挡。这里有一个联动点未探索区域的发光物不能被玩家提前看到但因为迷雾层盖在上面自然就看不见了。可是当玩家靠近时发光物的光会穿透迷雾照亮周围区域。如果你直接用灯光亮度直接输出到已探索层那么玩家在很远的地方就能看到光照亮了一圈相当于暴露了发光物位置这就不符合“迷雾不能提前透出信息”的原则。解决办法是把火把等发光物的Light2D设置成“不对迷雾层产生光照”。具体操作是在Light2D的EventSystem或LayerMask设置中把迷雾层从光照明亮对象中去掉。这样火把光只能照亮地面和人物不会把黑色迷雾照成半透明玩家就看不到火把的位置。当玩家走近时由于视野灯光已经把这片区域标记为“已探索”迷雾层变透明火把光才自然显露出来。这一步在视觉体验上非常关键。很多新手做迷雾时把光源全开结果地图上到处是光团提前暴露玩起来像开挂。用我这个配置可以把“光源可见性”完全交给探索状态控制。4. 常见问题排查与优化心得4.1 光源边缘锯齿严重怎么处理FunkyCode生成的2D阴影边缘默认比较硬放大了看会有明显锯齿。这个问题的根源是阴影多边形没有抗锯齿且光源纹理分辨率不够高。我的处理办法有三板斧一是提高光源的TextureSize在FunkyCode的Light2D属性里把Texture Size从默认的512调到2048。缺点是内存占用会上升但对于单机场景来说完全能接受。二是开启光源的“Soft Shadow”选项。这个选项会在阴影边缘做模糊处理能极大缓解锯齿感。实测下来开启后边缘过渡柔和很多配合雾的渐变不至于出现一圈“硬纸板”剪影。三是给迷雾层材质加一个椒盐噪声或扰动的UV动画Shader。当然这是偏美术优化的路子如果你不想动Shader就建议把迷雾层的SpriteTexture画得模糊一些也能掩盖锯齿。4.2 Spine角色阴影抖动、错位这个问题几乎人人都会遇到。表现是角色走路时墙上的影子会忽大忽小或者影子位置一直和脚底对不上。排查思路先看碰撞体是不是挂在根节点上。如果是而且动画中根节点有上下浮动的变化影子就会跟着跳动。解决方法是把LightCollider挂到一个固定的空物体上这个空物体的世界坐标每帧由脚本设置为Spine角色的根骨骼位置但过滤掉Y轴浮动或者干脆只追踪脚下位置。如果影子错位还可以检查Light2D的“EventLayer”设置确保所有遮挡物都在同一LayerMask中。有时候影子内容被其他Canvas或UI相机干扰也会出现错位。另外Spine动画中的某些骨骼会瞬间翻转如果用BoundingBox作为碰撞体翻转瞬间阴影会闪一下。这个一般通过增加阴影多边形的边缘余量来解决或者在动画切换时用两个碰撞体做交叉融合。4.3 DrawCall和性能优化FunkyCode的实时阴影计算量大头在CPU多边形计算和GPU叠加渲染。如果一张地图上有几十个光源和上百个遮挡物不优化的话移动端会卡到怀疑人生。我的调优建议列表如下只对视野范围内的遮挡物启用LightCollider组件。超出玩家视野一定距离的物体会被脚本禁用碰撞体回来时再启用。把相同材质、相同尺寸的地面碎片合并成一个大Sprite或图集减少动态阴影多边形的数量。火把等小光源使用低分辨率纹理玩家主光使用高质量纹理。关闭不必要的阴影投射开关。不是所有障碍物都需要每一帧投射阴影例如很细小的野草不参与遮挡就好。将“已探索层”的更新频率降到每秒1-2次并且用双缓冲RenderTexture而不是每帧ReadPixels。我用这个策略后在普通中端安卓机上能做到同时4个角色、12个光源、150个静态遮挡物稳定运行在60帧。当然如果你的项目需要大量单位建议把Spine的BoundingBox全部换成近似胶囊体否则每一帧的物理采样和碰撞体会成为新的瓶颈。4.4 实战中积累的三条独家经验第一千万别把所有图层都放到同一层上让灯光自动处理。要让灯光能正确区分地面和障碍物最关键的是“未被迷雾覆盖时地面可以被光照亮但地面本身不能被当成遮挡物”。这个可以通过给地面加上一个LightCollider并设置它“不产生阴影”来解决。你在编辑器里会看到一个叫做“Shadow”的下拉选项默认会在LightCollider的Inspector面板中把它调成“None”地面就不会挡光了。第二已探索层的颜色不要在Shader里直接写死为黑色。我建议用脚本控制在多个颜色之间插值比如白天模式淡蓝色夜晚模式深褐色。这样既保留了迷雾的功能性又可以融入整体氛围不会让人觉得一整片地图永远是黑压压的。第三涉及到Spine的敌人和玩家时需要手动设置一个“看不见但可以被光照亮”的中间态。我经常会看到有人把敌人设置成完全不被灯光照亮那就出错觉了玩家走到面前发现敌人永远是黑的。正确的方式是让敌人受光照影响但从迷雾遮罩的角度来讲只有可见区域内的敌人才会显示出来。这个本质上是两套系统一套是光照渲染一套是迷雾遮罩。不要试图用单独一个系统的极限功能去覆盖另一个系统的需求。4.5 当动态加载资源导致迷雾失效怎么办项目里如果有 AssetBundle 或 Addressables动态加载的Spine角色和地图资源很容易造成FunkyCode灯光不识别新加载的遮挡物。原因是LightCollider的Collider引用可能还没绑定到Resource加载出来的GameObject上。解决办法是在加载完成后调用一次lightCollider.Initialize();重新初始化碰撞体。同时要检查加载出来的GameObject是否还挂在错误的Layer下如果Layer是Default而光照系统只处理“World”层那么再多光源也照不亮它。这个坑我当时花了整整半天才发现结果就是新加载的墙壁Layer是0被灯光系统自动忽略了。另外动态生成的地图如果带有瞬移功能或者地图块有缩放动画也会让阴影多边形错位。建议在迷雾区域附近不要使用大规模的Scale动画尤其是遮挡物缩放过程会让阴影多边形的轮廓忽大忽小产生闪烁。最后分享一点私家经验这套方案跑下来我最大的感受是不要试图让FunkyCode包办一切也不要让Spine去硬适配迷雾。核心思路其实就是“职责分离”灯光负责照亮碰撞体负责遮挡迷雾层负责记录和展示探索进度。三套系统各管各的通过图层和材质把它们串联起来效果反而最稳定、最好调。以后如果遇到更复杂的迷雾需求比如多阵营视野、战争迷雾上的法术范围预览我打算在这个基础上扩展把每一帧的视野数据序列化为一张独立的Texture交给策略系统做逻辑判断而不是只做视觉表现。这样视觉和玩法逻辑都共用同一套数据以后做AI寻路时也能直接用迷雾数据来限制敌方AI的感知范围对策略玩法来说价值会更大。