一、前言
中秋节将至，又到了赏月、吃月饼的时候了。
中秋节是中国的传统节日，以月之圆象征团圆之意，寄托人们思念家乡，思念亲人之情。
说起中秋节就不得不说关于中秋节的故事传说，其中最有名的就是嫦娥奔月。
我们就以嫦娥奔月为题，制作一款嫦娥奔月的小Demo吧。
效果图：
二、嫦娥奔月
实现自定义路径的嫦娥奔月动画，需要先完成画路线，然后嫦娥沿着路线移动。
画路线，需要用到GL画线，然后渲染到物体上。
然后使用DoTween的路径移动进行移动。
❤️第一步：新建项目
设置完项目的名字和路径后点击创建按钮，创建一个项目。
❤️第二步：搭建场景
先将我们的背景图和嫦娥导入到项目中：
Note：直接另存为图片下载，导入到项目中即可。
在Hierarchy视图中选择Create→3D Object→Quad命令，新建一个Quad对象，然后将背景图附上：
这样，我们的项目就搭建好了，下面需要实现画线功能。
❤️第三步：自定义画线
新建脚本PaintUI.cs，编辑脚本：
using DG.Tweening; using System.Collections; using System.Collections.Generic; using UnityEngine; public class PaintUI : MonoBehaviour { [Header("渲染Quad")] public Renderer m_rendered; [Header("颜色")] public Color m_drawColor; public GameObject m_player; private List<Vector3> m_vertexList; private void Start() { m_vertexList = new List<Vector3>(); } private void Update() { if (Input.GetMouseButtonDown(0)) { m_vertexList = new List<Vector3>(); } if (Input.GetMouseButton(0)) { //记录点位 m_vertexList.Add(Camera.main.ScreenToViewportPoint(Input.mousePosition)); } } public void OnRenderObject() { //画线 GL.Begin(GL.LINES); GL.LoadOrtho(); GL.Color(m_drawColor); for (int i = 1; i < m_vertexList.Count; i++) { GL.Vertex3(m_vertexList[i - 1].x, m_vertexList[i - 1].y, 0); GL.Vertex3(m_vertexList[i].x, m_vertexList[i].y, 0); } GL.End(); } } 复制代码
将脚本附到Quad对象上，然后将Quad对象拖到PaintUI组件的Rendered卡槽中：
运行程序，可以看到可以正常画线了：
❤️第四步：嫦娥奔月
下面有请主角嫦娥，将嫦娥的Texture Type设置为Sprite：
然后直接将嫦娥从项目区Project拖入到Hierarchy层级视图中：
设置嫦娥的大小跟位置，让嫦娥跟这个场景匹配：
导入DoTweenPro插件：
download.csdn.net/download/q7…
需要Path路径动画，所以需要导入DOTweenPro插件
先导入DOTweenPro插件，然后修改脚本PaintUI.cs：
using DG.Tweening; using System.Collections; using System.Collections.Generic; using UnityEngine; public class PaintUI : MonoBehaviour { [Header("渲染Quad")] public Renderer m_rendered; [Header("颜色")] public Color m_drawColor; public GameObject m_player; private List<Vector3> m_vertexList; private void Start() { m_vertexList = new List<Vector3>(); } private void Update() { if (Input.GetMouseButtonDown(0)) { m_vertexList = new List<Vector3>(); } if (Input.GetMouseButton(0)) { //记录点位 m_vertexList.Add(Camera.main.ScreenToViewportPoint(Input.mousePosition)); } if (Input.GetMouseButtonUp(0)) { Moonfall(); } } public void OnRenderObject() { //画线 GL.Begin(GL.LINES); GL.LoadOrtho(); GL.Color(m_drawColor); for (int i = 1; i < m_vertexList.Count; i++) { GL.Vertex3(m_vertexList[i - 1].x, m_vertexList[i - 1].y, 0); GL.Vertex3(m_vertexList[i].x, m_vertexList[i].y, 0); } GL.End(); } private void Moonfall() { Vector3[] path = m_vertexList.ToArray(); m_player.transform.DOPath(path, 3); } } 复制代码
然后等待脚本编译完后，将嫦娥拖到PaintUI组件的Player卡槽中：
运行程序：
三、后言
本篇文章使用GL进行画线，然后使用DoTweenPro插件制作了一个自定义任意路径的嫦娥奔月动画，效果图就在上面。
欢迎大家一起交流沟通。
觉得有意思记得点赞哦。
