2D中激光束算是比较常见了，实现起来也较为简单，但为了让它能真正达到照明的效果还是得花些功夫，这里记录一下实现过程。
整体思路：
- 使用Line Renderer制作激光束。
- 使用类型为Freeform的Light 2D实现光照，通过代码动态修改光照形状。
- 加一些特技。
制作激光
激光束的实现思路基本参考油管上一个印度小哥的教程，有一些修改。
材质
先进行连连看环节，制作激光的材质。项目使用URP，新建一个Sprite Unlit Shader Graph，取名Laser。
图形部分，对Voronoi节点在x轴上稍微拉伸，并且让它随时间在x轴上偏移，这样看起来会有一种电流的感觉：
Speed属性控制运动速度，Scale属性控制拉伸。这里也可以根据需要使用其他的噪声图，好看就行。
激光的边缘需要有柔和渐变，通过sin(uv.y * PI)可以得到，再用指数函数控制边缘的厚度即可：
将两者相乘，再与颜色混合得到最终效果：
颜色模式为HDR，在Bloom后处理下会有不错的效果；另外个人觉得有透明度更好些，所以顺便连接了Alpha。
Shader就做好了，以这个Shader新建一个材质Laser，调整各项参数:
Line Renderer
场景中新建一个名为Laser的物体，添加Line Renderer组件，拖入刚才的Laser材质；Texture Mode改为Tile，以避免不同激光长度下拉伸不一致的问题。
可以顺便在场景中新建一个Volume，开启Bloom后处理：
临时修改一下Positions，场景中可以看到效果：
交互
接下来让它可以随着角色施法而改变位置，这里角色使用的是Asset Store里的一个小魔女素材，自带骨骼动画和控制脚本。
期望效果是玩家点击鼠标左键，角色举起法杖，随后激光向鼠标方向发射。编写激光脚本，并挂在Laser物体下：
Laser2D.cs
[RequireComponent(typeof(LineRenderer))]
public class Laser2D : MonoBehaviour
{
LineRenderer line;
void Awake()
{
line = GetComponent<LineRenderer>();
SetEnable(false);
}
public void SetEnable(bool b)
{
line.enabled = b;
}
public void SetPositions(Vector3 start, Vector3 end)
{
line.SetPosition(0, start);
line.SetPosition(1, end);
}
}
之后将在角色控制脚本中调用这些方法。
激光发射需要一个发射起始点，找到法杖的骨骼，在法杖头上添加发射点FirePoint：
做一个施法的骨骼动画，并在最后一帧添加动画事件，触发角色脚本中的OnCastAnim方法：
修改原有的角色控制脚本SimplePlayerController.cs，加入施法相关代码：
PlayerController.cs
public class PlayerController : MonoBehaviour
{
...
public Transform firePoint;
public Laser2D laser;
public LayerMask laserBlockLayer;
...
private void Update()
{
...
if (alive)
{
...
Cast();
...
}
}
...
void Cast()
{
if (Input.GetMouseButton(0))
{
var mousePos = Camera.main.ScreenToWorldPoint(Input.mousePosition);
var direction = mousePos - firePoint.position;
var hit = Physics2D.Raycast(firePoint.position, direction, float.PositiveInfinity, laserBlockLayer);
if (hit)
{
laser.SetPositions(firePoint.position, hit.point);
anim.SetBool("isCasting", true);
}
}
else
{
laser.SetEnable(false);
anim.SetBool("isCasting", false);
}
}
public void OnCastAnim()
{
laser.SetEnable(true);
}
}
这部分比较简单就不详细说明了，总之就是先这样这样，然后再那样那样。
Laser物体放到角色之下，为各个变量赋好值，可以看到初步效果：
光照
在Bloom效果下，这道激光看起来熠熠生辉，然而它并不能照亮周围的物体，为了让激光具有照明效果，还需要添加光源。
动态修改光照形状
给Laser物体添加一个Light 2D脚本，Light Type为Freeform，点击Edit Shape按钮可以编辑它的形状：
由于激光的形状会不断变化，固定的形状不能满足要求，因此需要在代码中根据激光的形状动态修改Light 2D的形状。
然而翻了一下API文档，Unity似乎并没有打算将形状属性开放给开发者修改，唯一和形状相关的属性只有一个shapePath，只允许get：
那么只能去Light 2D的源码中找找蛛丝马迹，在Light2DShape.cs中可以看到，shapePath被定义在Light2D的一个部分类中：
m_ShapePath在Light2D.cs中的UpdateMesh方法中被使用：
可以看到当光照类型为Freeform时，它将根据m_ShapePath更新光照的mesh。
继续阅读源码可知，UpdateMesh方法在Awake、光照类型改变、Falloff改变、多边形光形状改变及Cookie的Sprite改变时会被调用，而光照类型为Freeform时形状改变的情况下不会被调用，这意味着更改m_ShapePath后，必须要手动调用UpdateMesh方法，否则光照的形状不会被更新。
回到Laser2D.cs，编写一个SetShapePath方法，之后将通过它更新Light 2D的形状：
Laser2D.cs
void SetShapePath(Light2D light, Vector3[] path)
{
var field = light.GetType().GetField("m_ShapePath", BindingFlags.NonPublic | BindingFlags.Instance);
field?.SetValue(light, path);
var method = light.GetType().GetMethod("UpdateMesh", BindingFlags.NonPublic | BindingFlags.Instance);
method?.Invoke(light, null);
}
通过反射获取到m_ShapePath，设值之后再调用UpdateMesh方法。
继续编写，加入根据起点与终点更改Light2D形状的处理：
Laser2D.cs
[RequireComponent(typeof(LineRenderer))]
public class Laser2D : MonoBehaviour
{
[Tooltip("光照半径")]
public float lightRadius = .5f;
LineRenderer line;
Light2D lit;
void Awake()
{
line = GetComponent<LineRenderer>();
lit = GetComponent<Light2D>();
SetEnable(false);
}
public void SetEnable(bool b)
{
line.enabled = b;
lit.enabled = b;
}
public void SetPositions(Vector3 start, Vector3 end)
{
line.SetPosition(0, start);
line.SetPosition(1, end);
// 更改Light2D形状
if (start != end)
{
var direction = end - start;
var localUp = Vector3.Cross(Vector3.forward, direction).normalized;
localUp = transform.InverseTransformDirection(localUp) * lightRadius;
var localStart = transform.InverseTransformPoint(start);
var localEnd = transform.InverseTransformPoint(end);
// 构造形状路径
var path = new Vector3[]
{
localStart - localUp,
localEnd - localUp,
localEnd + localUp,
localStart + localUp,
};
SetShapePath(lit, path);
}
}
...
}
这里将起点和终点转化为本地坐标（Light 2D形状使用本地坐标），分别给它们加、减一个方向相对于激光垂直向上、模长为光照半径的向量localUp，计算出四个顶点，且按逆时针顺序排列。四个顶点形成一个矩形，运行可以看到初步效果：
白色粗框为动态生成的形状，白色细框为Light 2D根据形状自动生成的Falloff区域。
完善形状
光是一个矩形还是难看了些，光照的边角看起来相当突兀。再给两边加上半圆，形成一个类似胶囊的形状。
画圆本质上是画多边形，先定义好圆的顶点数量：
Laser2D.cs
[RequireComponent(typeof(LineRenderer))]
public class Laser2D : MonoBehaviour
{
[Tooltip("圆的顶点数")]
public int circleVertices = 10;
...
删去原有构造矩形代码，改为构造胶囊形状：
Laser2D.cs
public void SetPositions(Vector3 start, Vector3 end)
{
...
// 更改Light2D形状
if (start != end)
{
var direction = end - start;
var localUp = Vector3.Cross(Vector3.forward, direction).normalized;
localUp = transform.InverseTransformDirection(localUp) * lightRadius;
var localStart = transform.InverseTransformPoint(start);
var localEnd = transform.InverseTransformPoint(end);
// 构造形状路径
Vector3[] path = new Vector3[circleVertices + 2];
float deltaAngle = 2 * Mathf.PI / circleVertices;
float axisAngleOffset = Vector2.SignedAngle(Vector2.right, direction);
// 当前圆上顶点对应角度
float theta = Mathf.PI / 2 + Mathf.Deg2Rad * axisAngleOffset;
int index = 0;
// 起点处的半圆
path[index] = localStart + localUp;
for (int i = 0; i < circleVertices / 2; i++)
{
theta += deltaAngle;
path[++index] = localStart + new Vector3(lightRadius * Mathf.Cos(theta), lightRadius * Mathf.Sin(theta), 0);
}
// 终点处的半圆
path[++index] = localEnd - localUp;
for (int i = 0; i < circleVertices / 2; i++)
{
theta += deltaAngle;
path[++index] = localEnd + new Vector3(lightRadius * Mathf.Cos(theta), lightRadius * Mathf.Sin(theta), 0);
}
SetShapePath(lit, path);
}
}
效果：
处理翻转
当她转身朝向另一面时，光照显示会有错误：
继续修改形状生成部分，加入对翻转的处理：
Laser2D.cs
public void SetPositions(Vector3 start, Vector3 end)
{
...
// 更改Light2D形状
if (start != end)
{
...
// 构造形状路径
Vector3[] path = new Vector3[circleVertices + 2];
float deltaAngle = 2 * Mathf.PI / circleVertices;
float axisAngleOffset = Vector2.SignedAngle(Vector2.right, direction);
// 处理翻转情况，改变角度计算方向
if (transform.lossyScale.x < 0)
{
deltaAngle = -deltaAngle;
axisAngleOffset = -axisAngleOffset;
}
// 当前圆上顶点对应角度
...
// 起点处的半圆
...
// 终点处的半圆
...
// 处理翻转情况，将所有顶点倒序
if (transform.lossyScale.x < 0)
System.Array.Reverse(path);
SetShapePath(lit, path);
}
}
修复后：
加一些特技
再加上一些粒子：
至此就基本完成了，还可以继续完善如发射时的粒子爆发、亮度变化、激光颜色设置等等。
项目中用到的素材：
Cute 2D Girl - Wizard by ClearSky
Demo项目地址：
2D-Laser
