游戏开发实战Unity实现类似GitHub地球射线的效果(LineRenderer | 贝塞尔曲线)

Posted 林新发

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了游戏开发实战Unity实现类似GitHub地球射线的效果(LineRenderer | 贝塞尔曲线)相关的知识,希望对你有一定的参考价值。

文章目录

一、前言

嗨,大家伙,我是新发。
好久不见,这是2022年第一篇博客,今天有同学私信我,问我在Unity中如何实现这种地球辐射线的效果,

这一看,我就想到了GitHub主页的地球射线,

那么,今天就来讲讲如何实现这个效果吧~
本文最终效果如下:

本文工程源码见文章末尾~

二、实现思路

我们先把问题进行拆解,

现在挨个问题进行思考与解答。

1、曲线的本质是什么?

一条曲线,它本质上是由N条直线段组成的,当N足够大的时候,曲线就会看起来很平滑,我用Blender给大家演示一下,

2、如何绘制曲线?

我在之前的一些篇文章中有讲过使用LineRenderer来绘制曲线,这里我们是用LineRenderer来实现就好啦。
往期相关文章:
《【游戏开发解答】教你在Unity中使用LineRenderer制作行军蚂蚁线(行军 | 虚线 | 路径 | 线段)》

《【游戏开发实战】Unity实现水果忍者切水果的刀痕效果教程(两种实现方式:TrailRenderer、LineRenderer)》

《【游戏开发实战】TapTap物理画线游戏,教你使用Unity实现2D物理画线功能》

3、如何构造曲线的点?

上面我们说使用LineRenderer来绘制曲线,而LineRenderer需要我们告诉它点的坐标,那么我们如何来构造曲线的点坐标呢?常用的曲线有B样条、贝塞尔曲线等,关于贝塞尔曲线,我之前也有专门写过文章,
《【游戏开发进阶】玩转贝塞尔曲线,教你在Unity中画Bezier贝塞尔曲线(二阶、三阶),手把手教你推导公式》

这里我们就用贝塞尔曲线即可,这里我打算使用三阶贝塞尔曲线,三阶贝塞尔曲线需要知道四个点坐标,现在问题变成了我们如何确定这四个点的坐标,其中起始点和终止点是在球的表面选取,中间两个点我们通过一些几何运算来获得,现在问题变成了如何在球的表面获取两个点。

4、如何在球的表面选取两个点?

这是一个几何问题,我们已知球的球心坐标,想要在球的表面随机选取两个点,我们只需要在球心处随机两个方向向量,然后从球心出发,分别沿着这两个方向走一个半径长度的距离即可到达球的表面,画个图方便大家理解,

写成代码大概是这样子:

// 球心坐标
Vector3 centerPos = Vector3.zero;
// 球半径
float radius = 1;
// 随机一个单位向量作为方向向量
Vector3 randomDir = new Vector3(Random.Range(-1f, 1f), 
						Random.Range(-1f, 1f), 
						Random.Range(-1f, 1f)).normalized;
// 球表面的点				
Vector pos = centerPos + randomDir * radius;

我们使用上面的方法分别取到球表面的两个点即可。

上面我们说使用三阶贝塞尔曲线,现在还差中间两个控制点的坐标,我们可以用下面这样的方法来计算控制点的坐标:先求出球表面两个点的连线的中点,然后从球心指向这个中点,得到一个方向向量,再分别从点1点2朝这这个方向向量走一段距离,得到控制点1控制点2的坐标,如下

5、如何让曲线有动画效果?

我们可以看到曲线是有一个从起始点飞向目标点的效果的,

这个我们可以在脚本中动态设置LineRenderer的点来达到这个效果。

三、具体实操

讲完了理论,下面我们就来具体实操吧~

1、创建Unity工程

工程名就叫UnityEarthRay好了,工程模板使用3D,点击创建,

2、制作宇宙天空盒

2.1、天空盒贴图

我们先去找6张宇宙天空盒的图片,导入到工程目录中,如下

2.2、天空盒材质球

创建一个材质球,重命名为Skybox,如下

设置材质球的ShaderSkybox/6 Sided,并设置六个面的贴图,如下,

2.3、设置场景天空盒

Skybox材质球拖入Scene窗口中,
我们也可以通过点击菜单Window / Rendering / Lighting

然后点击Environment标签页,设置Skybox Material来设置天空盒,

如果想改回原来的天空盒,只需把Skybox Material设置为默认的天空盒材质即可,如下

3、制作地球

3.1、创建球体

Hierarchy窗口空白处右键鼠标,点击菜单3D Object / Sphere,创建一个球体,

重命名为Earth,作为地球的外形,

如下

3.2、地球贴图

去找一下地球的贴图,导入工程目录中,我找了云层贴图、地球贴图、灯光贴图,如下

3.3、制作地球材质球

创建一个材质球,重命名为Earth

设置材质球的ShaderStandard,设置Albedo贴图,调节Matallic(金属度)和Smoothness(光滑度),开启Emission(自发光),并设置发光贴图,设置发光颜色为橘黄色,如下

然后把材质球赋值给模型,如下

此时效果,

3.4、制作云层

同理,我们在Earth子节点下再创建一个球体,重命名为Clouds,如下


调节Clouds的缩放,让它比Earth大一点点,

创建一个材质球,重命名为Clouds

设置材质球的ShaderStandard,设置Rendering ModeTransparent(透明),设置Albedo贴图,设置颜色值的A通道为0,调节Matallic(金属度)和Smoothness(光滑度),开启Emission(自发光),并设置发光贴图,设置发光颜色为灰色,如下

Clouds材质球赋值给Clouds节点,

此时效果

4、制作LineRenderer

4.1、创建LineRenderer

Earth节点右键鼠标,点击菜单Effects / Line,创建一个LineRenderer

如下

此时可以看到场景中多了一条粗粗的白色短线,它就是LineRenderer本君了,

4.2、调节宽度

我们可以调节一下它的宽度,让它细一点,

如下

4.3、设置材质球

我们可以给他创建一个材质球,

如下

5、Line脚本:曲线逻辑

创建一个C#脚本,重命名为Line,编写曲线的逻辑代码,

首先我们封装一个三阶贝塞尔曲线的函数,如下

注:这里三阶贝塞尔曲线代码看不懂的建议先看我之前的这篇文章,《【游戏开发进阶】玩转贝塞尔曲线,教你在Unity中画Bezier贝塞尔曲线(二阶、三阶),手把手教你推导公式》

// Line.cs

// 三阶贝塞尔曲线
private Vector3 cubicBezier(Vector3 a, Vector3 b, Vector3 c, Vector3 d, float t)

    Vector3 aa = a + (b - a) * t;
    Vector3 bb = b + (c - b) * t;
    Vector3 cc = c + (d - c) * t;

    Vector3 aaa = aa + (bb - aa) * t;
    Vector3 bbb = bb + (cc - bb) * t;
    return aaa + (bbb - aaa) * t;

接着我们定义曲线的最大点数,

/// <summary>
/// 曲线最大点数
/// </summary>
public int MAX_FRAG_CNT = 100;

声明一个List用于存储点坐标

private List<Vector3> posList = new List<Vector3>();

我们声明一个lineRenderer成员,并在Awake中获取它,

[RequireComponent(typeof(LineRenderer))]
public class RadiationLine : MonoBehaviour

    private LineRenderer lineRenderer;
	...
	
	void Awake()
    
        lineRenderer = GetComponent<LineRenderer>();
    
	
	...

封装一个绘制曲线的方法,如下

// Line.cs

/// <summary>
/// 绘制曲线
/// </summary>
/// <param name="fromPos">起始坐标</param>
/// <param name="ctrlPoint1">控制点1</param>
/// <param name="ctrlPoint2">控制点2</param>
/// <param name="toPos">目标坐标</param>
public void DrawRay(Vector3 fromPos, Vector3 ctrlPoint1, Vector3 ctrlPoint2, Vector3 toPos)

    posList.Clear();
    for (int i = 0; i <= MAX_FRAG_CNT; ++i)
    
        posList.Add(cubicBezier(fromPos, ctrlPoint1, ctrlPoint2, toPos, (float)i / MAX_FRAG_CNT));
        lineRenderer.positionCount = posList.Count;
    
    lineRenderer.SetPositions(posList.ToArray());

Line脚本挂到Line节点上,如下

6、Earth脚本:地球逻辑

创建一个C#脚本,重命名为Earth,编写地球逻辑代码,

代码很简单,这里就不拆开讲解了,我都有写注释,

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

/// <summary>
/// 地球逻辑
/// </summary>
public class Earth : MonoBehaviour

    private Transform selfTrans;
    // 曲线
    public Line line;


    void Start()
    
        selfTrans = transform;
        StartCoroutine(FireLine());
    

    void Update()
    
        // 地球自转
        selfTrans.Rotate(Vector3.up * Time.deltaTime, Space.Self);
    

    /// <summary>
    /// 发射辐射射线
    /// </summary>
    /// <returns></returns>
    IEnumerator FireLine()
    
        this.line.gameObject.SetActive(false);
        while (true)
        
            // 循环生成曲线,这里只是演示效果,我就不是用对象池了
            var line = Instantiate(this.line);
            line.gameObject.SetActive(true);
            line.transform.SetParent(selfTrans);

            // 半径
            var radius = selfTrans.localScale.x / 2f;

            // 在地球表面随机一个起始点
            var from = selfTrans.position + new Vector3(Random.Range(-1f, 1f), Random.Range(-1f, 1f), Random.Range(-1f, 1f)).normalized * radius;

            // 在地球表面随机一个终点
            var to = selfTrans.position + new Vector3(Random.Range(-1f, 1f), Random.Range(-1f, 1f), Random.Range(-1f, 1f)).normalized * radius;
            var center = (from + to) / 2f;
            // 控制点1
            var ctrlPoint1 = from + (center - selfTrans.position).normalized * (from - to).magnitude * 0.6f;
            // 控制点2
            var ctrlPoint2 = to + (center - selfTrans.position).normalized * (from - to).magnitude * 0.6f;

            line.DrawRay(from, ctrlPoint1, ctrlPoint2, to);
            // 随机一个时间后销毁曲线
            Destroy(line.gameObject, Random.Range(4, 7));
            // 随机等待一个事件
            yield return new WaitForSeconds(Random.Range(0.3f, 2f));
        
    

Earth脚本挂到Earth节点上,并赋值Line成员,如下

7、运行效果

运行Unity,基本的效果已经出来了,

四、动态效果

1、Line脚本:动态效果

我们要让曲线有动态的效果,把原来的DrawRay改成协程,动态设置点的坐标,如下,

// Line.cs

/// <summary>
/// 绘制曲线
/// </summary>
/// <param name="fromPos">起始坐标</param>
/// <param name="ctrlPoint1">控制点1</param>
/// <param name="ctrlPoint2">控制点2</param>
/// <param name="toPos">目标坐标</param>
public IEnumerator DrawRay(Vector3 fromPos, Vector3 handPos1, Vector3 handPos2, Vector3 toPos)

    for (int i = 0; i <= MAX_FRAG_CNT; ++i)
    
        posList.Clear();
        for (int j = 0; j <= i; ++j)
        
            posList.Add(cubicBezier(fromPos, handPos1, handPos2, toPos, (float)j / MAX_FRAG_CNT));
        
        lineRenderer.positionCount = posList.Count;
        lineRenderer.SetPositions(posList.ToArray());
        yield return new WaitForSeconds(0.02f);
    

    yield return new WaitForSeconds(2);

    for (int i = 0; i <= MAX_FRAG_CNT; ++i)
    
        posList.Clear();
        for (int j = i; j <= MAX_FRAG_CNT; ++j)
        
            posList.Add(cubicBezier(fromPos, handPos1, handPos2, toPos, (float)j / MAX_FRAG_CNT));
        
        lineRenderer.positionCount = posList.Count;
        lineRenderer.SetPositions(posList.ToArray());
        yield return new WaitForSeconds(0.001f);
    
    Destroy(gameObject);

改下Earth脚本中的调用,如下

// Earth.cs

/// <summary>
/// 发射辐射射线
/// </summary>
/// <returns></returns>
IEnumerator FireLine()

	this.line.gameObject.SetActive(false);
	while (true)
	
  		...
  		// 启动协程
        StartCoroutine(line.DrawRay(from, ctrlPoint1, ctrlPoint2, to));

        // 随机等待一个事件
        yield return new WaitForSeconds(Random.Range(0.1f, 0.5f));
   

2、运行效果

运行效果如下,可以,

五、加点粒子特效

制作个粒子效果,

包装成预设,挂到Line节点下,作为起始点和目标点的特效,如下

Line脚本中加上粒子控制的逻辑,

// Line.cs

public Transform startPoint;
public Transform endPoint;

/// <summary>
/// 绘制曲线
/// </summary>
/// <param name="fromPos">起始坐标</param>
/// <param name="ctrlPoint1">控制点1</param>
/// <param name="ctrlPoint2">控制点2</param>
/// <param name="toPos">目标坐标</param>
public IEnumerator DrawRay(Vector3 earthPos, Vector3 fromPos, Vector3 handPos1, Vector3 handPos2, Vector3 toPos)

    // 起始位置粒子
    startPoint.gameObject.SetActive(true);
    startPoint.forward = fromPos - earthPos;
    startPoint.localPosition = fromPos + startPoint.forward * 0.01f;
    for (int i = 0; i <= MAX_FRAG_CNT; ++i)
    
        posList.Clear();
        for (int j = 0; j <= i; ++j)
        
            posList.Add(cubicBezier(fromPos, handPos1, handPos2, toPos, (float)j / MAX_FRAG_CNT));
        
        lineRenderer.positionCount = posList.Count;
        lineRenderer.SetPositions(posList.ToArray());
        yield return new WaitForSeconds(0.02f);
    

    // 目标位置粒子
    endPoint.gameObject.SetActive(true);
    endPoint.forward = toPos - earthPos;
    endPoint.localPosition = toPos + endPoint.forward * 0.01f;
    yield return new WaitForSeconds(2);
    startPoint.gameObject.SetActive(false);
    for (int i = 0; i <= MAX_FRAG_CNT; ++i)
    
        posList.Clear();
        for (以上是关于游戏开发实战Unity实现类似GitHub地球射线的效果(LineRenderer | 贝塞尔曲线)的主要内容,如果未能解决你的问题,请参考以下文章

游戏开发实战Unity实现类似GitHub地球射线的效果(LineRenderer | 贝塞尔曲线)

Unity3D游戏开发实战Unity3D实现休闲类游戏《2048》——算法源代码

Unity3D游戏开发实战Unity3D实现休闲类游戏《2048》——算法源代码

unity实战:狂暴机器人游戏教程(下篇)

unity实战:狂暴机器人游戏教程(下篇)

unity实战:狂暴机器人游戏教程(下篇)