嗨,大家好,我是新发,相信很多人都玩过水果忍者,在屏幕上滑手指头切水果,效果如下:
这个手指头滑来滑去的刀痕效果,如果使用Unity
如何实现呢?
今天我就来讲讲两种实现方式:
方式一:TrailRenderer
;
方式二:LineRenderer
。
最终两种方式的效果如下。
本Demo
工程我已上传到GitHub
,感兴趣的同学可以自行下载学习(注:我使用的Unity
版本为:2019.4.17f1c1
)
GitHub
地址:https://github.com/linxinfa/UnityLineRendererAndTrailRendererDemo
先把必要的资源导入到Unity
工程中。一张背景图、两张刀痕素材图。
(注:两种刀痕素材图会分别用作用于下文中要说的TrailRenderer
和LineRenderer
)。
如下,
注意图片设置勾选Alpha Is Transparency
。
创建三个材质球:bg
、trail
、trail_2
。
其中bg
材质球使用的shader
为Unlit/Texture
。
trail
和trail_2
材质球使用的shader
为Mobile/Particles/Additive
。
先在场景中创建一个平面,赋值bg
材质球,这样背景的显示就完成了。
TrailRenderer
组件可以很方便地实现一个拖尾效果,我们只需控制所挂的物体的移动即可出现拖尾效果。
首先,在场景中创建一个空物体,重命名为trailrenderer
。
挂上TrailRenderer
组件。并设置一下各个参数:
Width
:线段宽度;
Time
:线段持续时间;
Min Vertex Distance
:点与点之间的最小距离;
Color
:线段颜色;
Texture Mode
:线段贴图填充模式;
Materials
:材质球;
接着就是使用脚本来获取鼠标的位置并控制物体的移动。
创建一个脚本:TrailRendererBehaviour
,挂到物体上,
代码如下:
// TrailRendererBehaviour.cs
using UnityEngine;
public class TrailRendererBehaviour : MonoBehaviour
{
public TrailRenderer trailrenderer;
Transform mSelfTrans;
///
/// 线段的z轴坐标
///
const float LINE_POS_Z = 10;
void Awake()
{
mSelfTrans = transform;
}
void Update()
{
if(Input.GetMouseButtonDown(0))
{
// 停止划线,防止坐标瞬移导致出现一个拖尾
trailrenderer.emitting = false;
var mousPos = Input.mousePosition;
mSelfTrans.position = Camera.main.ScreenToWorldPoint(new Vector3(mousPos.x, mousPos.y, LINE_POS_Z));
return;
}
if(Input.GetMouseButton(0))
{
trailrenderer.emitting = true;
var mousPos = Input.mousePosition;
mSelfTrans.position = Camera.main.ScreenToWorldPoint(new Vector3(mousPos.x, mousPos.y, LINE_POS_Z));
}
}
}
LineRenderer
组件可以很方便地实现划线功能,不过,不像TrailRenderer
那样可以自动根据物体移动划出拖尾痕迹,需要我们自己去计算划痕的每个点的坐标并赋值给LineRenderer
的点。
首先,创建一个空物体,重命名为linerenderer
。
挂上LineRenderer
组件,并设置Positions
的Size
为10
,即:我们使用10
个点来画线。
记得设置一下材质球:
创建一个LineRendererBehaviour
脚本,挂到物体上。
我们在LineRendererBehaviour
脚本中去获取鼠标移动的位置并设置给LineRenderer
组件的各个点的坐标。
代码如下,基本我都写了清晰的注释,大家应该能看懂。
// LineRendererBehaviour.cs
using UnityEngine;
public class LineRendererBehaviour : MonoBehaviour
{
public LineRenderer linerenderer;
///
/// 线段的z轴坐标
///
const float LINE_POS_Z = 10;
///
/// 线段的点的数量
///
const int LINE_POS_CNT = 10;
///
/// 坐标点的数组
///
Vector3[] mLinePosList = new Vector3[LINE_POS_CNT];
///
/// 鼠标的屏幕坐标
///
Vector3 mMouseScreenPos;
///
/// 是否是按下
///
bool mFire = false;
///
/// 上一次是否是按下
///
bool mFirePre = false;
///
/// 是否是刚按下
///
bool mFireDown = false;
///
/// 是否是抬起
///
bool mFireUp = false;
///
/// 坐标的起始和终止坐标点
///
Vector2 mStart, mEnd;
///
/// 坐标点索引
///
int mLinePosIndex = 0;
///
/// 线段的alpha通道值
///
float mTrailAlpha = 0f;
void Update()
{
// 鼠标的位置
mMouseScreenPos = Input.mousePosition;
mFireDown = false;
mFireUp = false;
mFire = Input.GetMouseButton(0);
if (mFire && !mFirePre) mFireDown = true;
if (!mFire && mFirePre) mFireUp = true;
mFirePre = mFire;
// 画线
DrawLine();
// 设置线段颜色,主要是设置alpha值,慢慢变淡
SetLineColor();
}
void SetLineColor()
{
if (mTrailAlpha > 0)
{
// 黄色
linerenderer.startColor = new Color(1, 1, 0, mTrailAlpha);
// 红色
linerenderer.endColor = new Color(1, 0, 0, mTrailAlpha);
// 慢慢变透明
mTrailAlpha -= Time.deltaTime * 2;
}
}
///
/// 画线
///
void DrawLine()
{
// 鼠标按下
if (mFireDown)
{
mStart = mMouseScreenPos;
mEnd = mMouseScreenPos;
mLinePosIndex = 0;
mTrailAlpha = 1;
AddTrailPoint();
}
// 鼠标滑动中
if (mFire)
{
mEnd = mMouseScreenPos;
var pos1 = Camera.main.ScreenToWorldPoint(new Vector3(mStart.x, mStart.y, LINE_POS_Z));
var pos2 = Camera.main.ScreenToWorldPoint(new Vector3(mEnd.x, mEnd.y, LINE_POS_Z));
// 滑动距离超过0.1才算作一次有效的滑动
if (Vector3.Distance(pos1, pos2) > 0.01f)
{
mTrailAlpha = 1;
++mLinePosIndex;
// 添加坐标点到数组中
AddTrailPoint();
}
mStart = mMouseScreenPos;
}
// 将坐标数组赋值给LineRenderer组件
SetLineRendererPos();
}
///
/// 添加坐标点到数组中
///
void AddTrailPoint()
{
if (mLinePosIndex < LINE_POS_CNT)
{
for (int i = mLinePosIndex; i < LINE_POS_CNT; ++i)
{
mLinePosList[i] = Camera.main.ScreenToWorldPoint(new Vector3(mEnd.x, mEnd.y, LINE_POS_Z));
}
}
else
{
for (int i = 0; i < LINE_POS_CNT - 1; ++i)
{
mLinePosList[i] = mLinePosList[i + 1];
}
mLinePosList[LINE_POS_CNT - 1] = Camera.main.ScreenToWorldPoint(new Vector3(mEnd.x, mEnd.y, LINE_POS_Z));
}
}
///
/// 将坐标数组赋值给LineRenderer组件
///
void SetLineRendererPos()
{
for (int i = 0; i < LINE_POS_CNT; ++i)
{
linerenderer.SetPosition(i, mLinePosList[i]);
}
}
}