spine阴影

链接

• 方案一、二：spineShadowTest.zip (525.0 KB) xxx.zip

• 方案三-商店链接: spine阴影

• 方案三-效果预览
  

方案一-复制spine改色

• 实现效果图
• 
• 存在问题：
  • 问题A: 阴影只能为黑色, 且不能为透明
  • 

    改色-问题741×245 70.7 KB
  • 问题B: 需要两个spine动作保持同步

方案二-rendertexture

• 该方案可以较好解决方案一里的问题A和问题B
• 基本原理:
  • 1.spine设置单独layer
  • 2.rendertexture
  • 3.sprite显示rendertexture，加cc.UISkew组件实现简单偏移
• 存在问题：
  • 问题C: spine在不同高度有不同的偏移表现
  • 
    • 原因: 偷懒直接用UISkew导致
    • 解决方案：sprite.x = spine.y * tan(UISkew.x)
  • 问题D: 多个spine时候依旧会有偏移表现
  • 
    • 解决方案：自行弄多个rendertexture

方案三-shader

1. 多pass，一个绘制阴影，一个还是绘制原本spine。阴影绘制，顶点进行相应偏移。要像影子，让离脚部位置越高偏移越大。关键代码：

vert:
    pos.x += dfX * a_position.y;
    pos.y *= scaleY;
frag:
    o.rgb = shadowColor.rgb;
    o.a = shadowColor.a;

2. 绘制阴影开深度测试写入，去除重叠问题。(可用于方案一中修复问题A)关键代码：

    depthStencilState:
        depthTest: true
        depthWrite: true

3. 开始测试
   • 3.8.7测试中，存在问题。同个spine如果只显示一个，spine深度测试写入像开了。而且阴影会绘制到前面。显示多个就不存在这问题……再见
   • 3.8.6启动，有问题……(￣ー￣)
   • 2.4.13启动，没问题……( ° ー ° )
   • 为啥？ 我学艺不精，还没搞懂。……
4. 3.8.7单个显示异常
   • setTimeout设置自定义材质可解决。

• 注意事项
  1. 未测试过IOS、小游戏平台
  2. 不能使用合批
  3. 性能表现、平台兼容性测试不足。

最后

• 能请我喝一杯奶茶吗？
• 商城-spine阴影

好文!!!