今天小菜给大家分享下实现残影、拖尾效果的几种实现思路,或者叫固定套路,保准大家认真看完后,以后再也不怕实现残影、拖尾效果了。
本文字数比较多,且部分内容需要阅读代码加以思考,预计阅读10-15分钟。(画外音:小菜好不容易总结的,客官读完有收获再走呀,😂)
残影
啥是残影?小菜直接上图说明。
封面图
游戏人物挥剑动作
游戏人物冲刺动作
李小龙经典镜头
我们经常在影视剧、游戏中,看到残影的镜头。有武器特效方面的,也有人物动作方面的。看到这里想必大家应该了解到了什么是残影了吧。
小菜用白话描述下:
有一个运动的物体,在一段时间内,从这个位置运动到了那个位置,在我们看到的某个画面时间点上,却展示了物体在前一小段时间内的物体运动位置轨迹,这些轨迹往往以半透明的方式展现出来(还有其他表现形势,如上面的游戏中人物冲刺动作的残影),营造出视觉残留效果,起到不错的观赏效果。
拖尾
拖尾又是啥?顾名思义,拖动尾巴,尾巴跟随的效果,拖尾常常可以和残影一起说,因为残影效果往往伴随着拖尾,就是物体运动着,在之前历史时间点的位置轨迹也会展现出来,不断的消失,不断的跟随。
但拖尾也可以单独拎出来说,不说残影效果,只说尾巴的跟随效果。我们今天的例子也会讲到。
拖尾效果1
https://www.bilibili.com/video/BV1gB4y1u7th/
拖尾效果2
https://www.bilibili.com/video/BV1oh411Y75a/
常用套路
下面我们用 Processing 来实现残影、拖尾效果,分析下如何实现。小菜将套路总结成三个:
1)半透明叠加法
2)生命流逝法
3)中学生班级晨跑法
套路1-半透明叠加法
void setup() {
size(800, 800);
background(0);
noStroke();
}
void draw() {
fill(0, 20);
rect(0, 0, width, height);
fill(30, 255, 255);
circle(mouseX, mouseY, 50);
}
我们运行下看下效果
代码简单的不能再简单了,但却能实现了一种残影拖尾效果。是不是很神奇?
我们来分析下这个残影的实现原理:
1)黑色的画布背景
2)一个跟随鼠标运动的圆,填充色RGB为30,255,255
3)每一次 draw 绘制时,都会在画布上画一层和画布背景颜色的一样,但具有一定透明度的长方形(一般和画布大小一致)
如果去掉了第三步,效果是什么样?
void draw() {
fill(30, 255