Cocos3.8 2D残影拖影效果

CocosCreator3.8 2D残影拖影特效

  • Creator 版本:3.8.6

【Cocos开发者福音】零门槛打造华丽视觉盛宴!《ShadowEffect》残影特效震撼上线!

CocosStore : (还在上架审核中,稍后更新链接)

如果你想要的是这种效果,那你就来对地方了。这里要介绍给大家的是一个新研发的ShadowEffect,争取做到零门槛,灵活且易使用,易二次开发的目的。
也可以来bilibili观看细节效果- 传送门


或者


背景

其实也是最近自研开发中的游戏想要加一些酷炫的残影拖影效果才开始研究的。我想要实现的是类似于这种,


或者这种

还有类似这种飞剑残影的效果
refer

参考了不少牛人之前的文章与思路,以下是我总结的他人一些好的思路,总共有两种思路:

  1. 预先复制n个目标节点,放到某个node下,然后通过滞后传递目标节点的位置,缩放和角度,来实现残影。最典型的例子是这个(水煮肉片饭的帖子)。是一个很不错的思路,但是,透明度还处于统一管理,而且不能通过缓动函数实现想要的渐变效果。
  2. 利用投影机投影到多个画布,比较典型的例子是这个(异名的帖子)。这种思路也很不错,可以更加动态捕捉残影,对于动作类残影还是很有优势的。不过对于摄像机以及节点layer有一点限制,而且性能开销可能相对大些。

不过,对于使用者,感觉还是没有那种可以开箱即用,符合我想要风格的残影拖影特效。

实现思路

考虑到我的目标(易操作,引入缓动函数,运行时动态调整残影强弱,方便开发者定位残影位置),于是我的思路是

  • 采用定时根据制定残影样式与位置生成残影,并给残影启动缓动动画,控制透明度,缩放大小的缓动效果
  • 当动画结束,及时清理残影node
  • 结合UI操作的易用性,抽象了两个元素,分别是残影样式,与残影位置,方便开发者在使用时可以灵活配置。
  • 考虑到大量生成销毁node会GC,引发性能问题,所以引入了NodePool的概念来管理生成与销毁,该销毁的只是从parent上移除,下次可以直接从Pool中获取,这样提高了node的利用率,减少GC。

使用方法

三步极简操作

  • 一拖:将ShadowEffect脚本拖拽到目标节点
    • 在这里给一个sprite node拓展ShadowEffect脚本,就可以在属性面板中看到影子相关的设置了
  • 二设:设置残影样式与位置
    • 设置残影样式: ShadowEffect组件只支持prefab形式的残影样式,并且已经内置了3中常见的残影样式(圆形,方形,粒子),开发者可以根据自己的需求,自定义残影prefab样式
      • 这里选择内置的prefab,这里就是将ellipse圆形残影设置到了残影样式中
    • 设置残影位置:
      • 为目标节点添加一个空的子节点,通过拖拽来快速设置残影位置
      • 将空的子节点拖拽到ShadowEffect组件的位置列表中
  • 三控:通过控制以下参数来实现理想中的拖影残影效果,当然这是参数都是运行时可动态修改的,可以配合游戏营造各种特效。
    • ShadowEffect提供了以下多种控制参数
      • 生成间隔
      • 持续时间
      • 起始缩放比率
      • 结束缩放比率
      • 起始透明度
      • 结束透明度
      • 缓动函数
      • 拖影父节点(可选,只为了Pannel整洁,将临时产生的残影放到一个node中)

通过以上三步就完成了残影效果的配置,如果想查看效果,切记还要让目标节点运动起来,为此可以直接使用内置的rotate或者move组件。于是,你就可以得到类似于上面的残影效果了。

Demo

在项目中,包含了4中类型的Demo以及源码效果,方便使用者快速上手

  • 旋转拖影

  • 移动拖影

  • 自定义拖影运动

  • Spine拖影

写在最后

拖影残影还是对性能有一定的影响,考虑到此。

  • 拖影残影数量不要太多
  • 拖影残影样式不要太复杂
  • 拖影生成间隔不要太小
4赞

:cow::beer:,这些残影能合批吗?

你还是先说卖多少吧

必须的!支持动态合批
在如此配置时,大概同时会有10个左右的sprite shadow,drawcall为11


调整2倍后,大概同时会有20个左右的sprite shadow,drawcall依然为11

1赞

一根雪糕的钱 :smiley:

1赞

:+1::+1::+1::+1:祝大卖

1赞

适合低速运动

还是复杂了点,up有没有更简单点的

其实真实使用还是很简单的,今天会在bilibili出一个视频使用教程,到时可以看看

高速也可以试试,参数调整到你想要的效果就好

感谢分享 :smile:

1赞

审核不是早就过了吗 也不知道更新store地址 营业一点也不积极啊

1赞

已上架到了CocosStore商店

基础教程视频高级视频教程 都已经上传到了Bilibili 网站上了

有兴趣可以先看看

嗨,才发现,这不是赶紧过来更新下!
感谢提醒

就是生成的有点多。多年前我 Egret 用这个方案做过球类拖尾

66666。

可以动态合批,其实还好,drawcall不变的,而且控件里用了资源池,不会反复创建新node,循环利用,充分减少GC。


我购买了你的插件,运行时发现存在内存泄漏的问题。希望你能更新修复下这个问题.微信联系不上你

我使用的是3.8.7的版本运行的

如果需要高性能,可以走 shader 实现:https://juejin.cn/post/7530473370342916159

1赞