[Unity]带照明效果的2D激光束

时间:2021-6-9 作者:qvyue
[Unity]带照明效果的2D激光束
[Unity]带照明效果的2D激光束

2D中激光束算是比较常见了,实现起来也较为简单,但为了让它能真正达到照明的效果还是得花些功夫,这里记录一下实现过程。

整体思路:

  • 使用Line Renderer制作激光束。
  • 使用类型为Freeform的Light 2D实现光照,通过代码动态修改光照形状。
  • 加一些特技。

制作激光

激光束的实现思路基本参考油管上一个印度小哥的教程,有一些修改。

材质

先进行连连看环节,制作激光的材质。项目使用URP,新建一个Sprite Unlit Shader Graph,取名Laser。

图形部分,对Voronoi节点在x轴上稍微拉伸,并且让它随时间在x轴上偏移,这样看起来会有一种电流的感觉:

[Unity]带照明效果的2D激光束

Speed属性控制运动速度,Scale属性控制拉伸。这里也可以根据需要使用其他的噪声图,好看就行。

激光的边缘需要有柔和渐变,通过sin(uv.y * PI)可以得到,再用指数函数控制边缘的厚度即可:

[Unity]带照明效果的2D激光束

将两者相乘,再与颜色混合得到最终效果:

[Unity]带照明效果的2D激光束
激光混合.png

颜色模式为HDR,在Bloom后处理下会有不错的效果;另外个人觉得有透明度更好些,所以顺便连接了Alpha。

Shader就做好了,以这个Shader新建一个材质Laser,调整各项参数:

[Unity]带照明效果的2D激光束

Line Renderer

场景中新建一个名为Laser的物体,添加Line Renderer组件,拖入刚才的Laser材质;Texture Mode改为Tile,以避免不同激光长度下拉伸不一致的问题。

[Unity]带照明效果的2D激光束

可以顺便在场景中新建一个Volume,开启Bloom后处理:

[Unity]带照明效果的2D激光束

临时修改一下Positions,场景中可以看到效果:

[Unity]带照明效果的2D激光束

交互

接下来让它可以随着角色施法而改变位置,这里角色使用的是Asset Store里的一个小魔女素材,自带骨骼动画和控制脚本。

[Unity]带照明效果的2D激光束

期望效果是玩家点击鼠标左键,角色举起法杖,随后激光向鼠标方向发射。编写激光脚本,并挂在Laser物体下:

Laser2D.cs

[RequireComponent(typeof(LineRenderer))]
public class Laser2D : MonoBehaviour
{
    LineRenderer line;

    void Awake()
    {
        line = GetComponent();
        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:

[Unity]带照明效果的2D激光束

做一个施法的骨骼动画,并在最后一帧添加动画事件,触发角色脚本中的OnCastAnim方法:

[Unity]带照明效果的2D激光束

修改原有的角色控制脚本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物体放到角色之下,为各个变量赋好值,可以看到初步效果:

[Unity]带照明效果的2D激光束
[Unity]带照明效果的2D激光束

光照

在Bloom效果下,这道激光看起来熠熠生辉,然而它并不能照亮周围的物体,为了让激光具有照明效果,还需要添加光源。

动态修改光照形状

给Laser物体添加一个Light 2D脚本,Light Type为Freeform,点击Edit Shape按钮可以编辑它的形状:

[Unity]带照明效果的2D激光束
[Unity]带照明效果的2D激光束

由于激光的形状会不断变化,固定的形状不能满足要求,因此需要在代码中根据激光的形状动态修改Light 2D的形状。

然而翻了一下API文档,Unity似乎并没有打算将形状属性开放给开发者修改,唯一和形状相关的属性只有一个shapePath,只允许get:

[Unity]带照明效果的2D激光束
[Unity]带照明效果的2D激光束

那么只能去Light 2D的源码中找找蛛丝马迹,在Light2DShape.cs中可以看到,shapePath被定义在Light2D的一个部分类中:

[Unity]带照明效果的2D激光束

m_ShapePath在Light2D.cs中的UpdateMesh方法中被使用:

[Unity]带照明效果的2D激光束

可以看到当光照类型为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();
        lit = GetComponent();
        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,计算出四个顶点,且按逆时针顺序排列。四个顶点形成一个矩形,运行可以看到初步效果:

[Unity]带照明效果的2D激光束

白色粗框为动态生成的形状,白色细框为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 

效果:

[Unity]带照明效果的2D激光束

处理翻转

当她转身朝向另一面时,光照显示会有错误:

[Unity]带照明效果的2D激光束

继续修改形状生成部分,加入对翻转的处理:

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 

修复后:

[Unity]带照明效果的2D激光束

加一些特技

再加上一些粒子:

[Unity]带照明效果的2D激光束

至此就基本完成了,还可以继续完善如发射时的粒子爆发、亮度变化、激光颜色设置等等。

项目中用到的素材:

Cute 2D Girl – Wizard by ClearSky

2D DarkCave Assets by Maaot

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。