Unity案例-实现心电图效果-下

·  阅读 1766
Unity案例-实现心电图效果-下

「这是我参与11月更文挑战的第24天,活动详情查看:2021最后一次更文挑战

👉关于作者

众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!

专注于Android/Unity和各种游戏开发技巧,以及各种资源分享(网站、工具、素材、源码、游戏等)

欢迎关注公众号【空名先生】获取更多资源和交流!

👉前提

我们接着上节讲,之前我们导入过DOTween插件,现在在该粒子物体下添加DOTween Path脚本。

再来看下效果图

心电图实际效果.gif

👉实践过程

image.png

在DOTween Path脚本的下方Waypoints,里面是路径点,当然了你也可以利用快捷键创建删除,只不过这是具体的坐标点,写起来更加方便而已。

我们先创建个简单的直线心电图吧:增加一个坐标点

image.png

运行起来看看吧:

心电图1.gif

还算不错,增加点波折数据点再试试。

image.png

运行效果:

心电图2.gif

看起来有些像了,但是又不完美,那么我们回忆回忆:心电图大致应该由什么组成?

应该是由一个点带头+一个流星似的拖尾,所以我们完善下:

一个点材质:心电图_拖尾和一个拖尾材质:心电图_点,分别赋值给粒子的渲染器中材质和拖尾材质选项。

image.png

看结果

image.png 拖尾相比之前确实好了些,但是发现还是不咋地:折线看起来并不像预期那样贴合路线轨迹。

那么我们修改【粒子拖尾模块的顶点距离为0】,再看看。

image.png

这次发现确实和真实的轨迹很接近了,但是还是不对啊:明显感觉折弯出粒子重叠严重啊。

image.png

没错,出现这个的原因就是我们将【粒子拖尾模块的最小顶点距离改为0】导致的,但是不改为0效果又不是按照既定轨道再走。

经过与好友讨论思考,这个问题其实原因在于****Shader

有两种解决方式:

  1. 去掉模糊半透明效果,该为实体直线。直接将【心电图_拖尾】的Shader改为【Unlit/Color】即可。如果拖尾线条看着粗,那就在缩小下拖尾宽度。image.png恩,看起来不错嘛

  2. 保留原来的内容,只修改线条宽度,达到足够细了,进而欺骗眼睛,并不完美。

  3. 有的大佬一眼就看出了关键,实际效果取决于Shader,内置的不满足,自己动手写一个Shader就行了,但是小空这方面知识匮乏,暂无方案,欢迎大佬们留言。

总结:

利用一个带有拖尾的粒子移动来实现心电图,而移动则利用DOTween实现。实现起来操作简单,在不消耗性能下,粒子可实现的心电图色彩很丰富。

好了,整个过程就是如上了,为心电图提供了个思路,但是具体的业务肯定更复杂的,比如心电图数据不同怎么随时更新,比如心电图和心脏脉搏做同步,更多的操作就需要各位大佬们多多实践啦。

👉其他

📢作者:小空和小芝中的小空

📢转载说明-务必注明来源:芝麻粒儿 的个人主页 - 专栏 - 掘金 (juejin.cn)

📢欢迎点赞👍收藏🌟留言📝

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改