文章目錄

• • • 一、前言
    • 二、資源準備
    • 三、制作材質球
    • 四、背景圖
    • 五、刀痕的實現，方式一：TrailRenderer
    • • 1、創建物體掛TrailRenderer組件
      • 2、編寫TrailRendererBehaviour腳本
      • 3、運行測試
    • 六、刀痕的實現，方式二：LineRenderer
    • • 1、創建物體掛LineRenderer組件
      • 2、編寫LineRendererBehaviour腳本
      • 3、運行測試

一、前言

嗨，大家好，我是新發，相信很多人都玩過水果忍者，在屏幕上滑手指頭切水果，效果如下：

這個手指頭滑來滑去的刀痕效果，如果使用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組件可以很方便地實現一個拖尾效果，我們只需控制所掛的物體的移動即可出現拖尾效果。

1、創建物體掛TrailRenderer組件

首先，在場景中創建一個空物體，重命名為trailrenderer。

掛上TrailRenderer組件。并設置一下各個參數：
Width：線段寬度；
Time：線段持續時間；
Min Vertex Distance：點與點之間的最小距離；
Color：線段顏色；
Texture Mode：線段貼圖填充模式；
Materials：材質球；

2、編寫TrailRendererBehaviour腳本

接著就是使用腳本來獲取鼠標的位置并控制物體的移動。
創建一個腳本：TrailRendererBehaviour，掛到物體上，

代碼如下：

// TrailRendererBehaviour.csusing UnityEngine;public class TrailRendererBehaviour : MonoBehaviour {public TrailRenderer trailrenderer;Transform mSelfTrans;/// <summary>/// 線段的z軸坐標/// </summary>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));}} }

3、運行測試

運行Unity，測試效果如下：

六、刀痕的實現，方式二：LineRenderer

LineRenderer組件可以很方便地實現劃線功能，不過，不像TrailRenderer那樣可以自動根據物體移動劃出拖尾痕跡，需要我們自己去計算劃痕的每個點的坐標并賦值給LineRenderer的點。

1、創建物體掛LineRenderer組件

首先，創建一個空物體，重命名為linerenderer。

掛上LineRenderer組件，并設置Positions的Size為10，即：我們使用10個點來畫線。

記得設置一下材質球：

2、編寫LineRendererBehaviour腳本

創建一個LineRendererBehaviour腳本，掛到物體上。

我們在LineRendererBehaviour腳本中去獲取鼠標移動的位置并設置給LineRenderer組件的各個點的坐標。
代碼如下，基本我都寫了清晰的注釋，大家應該能看懂。

// LineRendererBehaviour.cs using UnityEngine;public class LineRendererBehaviour : MonoBehaviour {public LineRenderer linerenderer;/// <summary>/// 線段的z軸坐標/// </summary>const float LINE_POS_Z = 10;/// <summary>/// 線段的點的數量/// </summary>const int LINE_POS_CNT = 10;/// <summary>/// 坐標點的數組/// </summary>Vector3[] mLinePosList = new Vector3[LINE_POS_CNT];/// <summary>/// 鼠標的屏幕坐標/// </summary>Vector3 mMouseScreenPos;/// <summary>/// 是否是按下/// </summary>bool mFire = false;/// <summary>/// 上一次是否是按下/// </summary>bool mFirePre = false;/// <summary>/// 是否是剛按下/// </summary>bool mFireDown = false;/// <summary>/// 是否是抬起/// </summary>bool mFireUp = false;/// <summary>/// 坐標的起始和終止坐標點/// </summary>Vector2 mStart, mEnd;/// <summary>/// 坐標點索引/// </summary>int mLinePosIndex = 0;/// <summary>/// 線段的alpha通道值/// </summary>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;}}/// <summary>/// 畫線/// </summary>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();}/// <summary>/// 添加坐標點到數組中/// </summary>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));}}/// <summary>/// 將坐標數組賦值給LineRenderer組件/// </summary>void SetLineRendererPos(){for (int i = 0; i < LINE_POS_CNT; ++i){linerenderer.SetPosition(i, mLinePosList[i]);}} }

3、運行測試

運行Unity，測試效果如下：

總結

以上是生活随笔為你收集整理的【游戏开发实战】Unity实现水果忍者切水果的刀痕效果教程（两种实现方式：TrailRenderer、LineRenderer）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。