最終效果

前言

本文介紹了基于Unity樣條曲線（Spline）的手牌管理系統實現方法。通過Spline插件繪制平滑路徑，結合DOTween實現卡牌動態排列效果。

系統核心功能包括：

• 按空格鍵生成新卡牌（不超過最大數量限制），
• 沿樣條曲線均勻分布卡牌，
• 并利用DOTween實現平滑移動和旋轉動畫。

重點解析了卡牌居中排列的數學計算和關鍵旋轉算法，展示了如何通過LookRotation和叉積計算實現卡牌朝向的正確調整。文章提供了完整的C#代碼實現和參數配置說明，最終效果可讓卡牌按樣條路徑絲滑排列。

實戰

1、Splines的使用

Splines插件的基礎使用具體可以參考：【unity實戰】Spline 插件讓物體沿路徑 “絲滑” 走位，實現火車沿軌道移動——Spline 插件的使用

2、繪制樣條線

修改中間點弧度，使其更加平滑

3、DOTween安裝和使用

DOTween安裝和使用，具體可以參考：【推薦100個unity插件之2】 DoTween動畫插件的安裝和使用整合（最全）

4、基于樣條曲線（Spline）的手牌管理系統

4.1 代碼實現

主要用于在游戲中實現卡牌的動態生成、排列和動畫效果。核心功能：

• 按空格鍵抽牌：每按一次空格，生成一張新卡牌（不超過最大數量）。

• 沿樣條曲線排列卡牌：所有卡牌會均勻分布在一條預定義的樣條曲線上。

• 平滑動畫過渡：使用 DOTween 實現卡牌移動和旋轉的平滑動畫。

using UnityEngine;
using DG.Tweening;
using UnityEngine.Splines;
using System.Collections.Generic;public class HandManager : MonoBehaviour
{[SerializeField] private int maxHandSize; // 手牌最大數量[SerializeField] private GameObject cardPrefab; // 卡牌預制體[SerializeField] private SplineContainer splineContainer; // 樣條曲線容器，用于卡牌排列路徑[SerializeField] private Transform spawnPoint; // 卡牌生成位置private List<GameObject> handCards = new List<GameObject>();// 當前手牌列表private void Update(){// 按空格鍵抽牌if (Input.GetKeyDown(KeyCode.Space)) DrawCard();}/// <summary>/// 抽牌方法/// </summary>private void DrawCard(){// 如果手牌已滿則返回if (handCards.Count >= maxHandSize) return;// 實例化新卡牌GameObject g = Instantiate(cardPrefab, spawnPoint.position, spawnPoint.rotation);handCards.Add(g);// 更新所有卡牌位置UpdateCardPositions();}/// <summary>/// 更新所有卡牌位置和旋轉/// </summary>private void UpdateCardPositions(){// 如果沒有手牌則返回if (handCards.Count == 0) return;// 計算卡牌間距（基于最大手牌數）float cardSpacing = 1f / maxHandSize;// 計算第一張卡牌的位置（居中排列）float firstCardPosition = 0.5f - (handCards.Count - 1) * cardSpacing / 2;// 獲取樣條曲線Spline spline = splineContainer.Spline;// 遍歷所有卡牌并設置位置和旋轉for (int i = 0; i < handCards.Count; i++){// 計算當前卡牌在曲線上的參數位置float p = firstCardPosition + i * cardSpacing;// 獲取曲線上的位置、前向向量和上向量Vector3 splinePosition = spline.EvaluatePosition(p);Vector3 forward = spline.EvaluateTangent(p);Vector3 up = spline.EvaluateUpVector(p);// 計算卡牌旋轉（使卡牌朝向正確方向）// Vector3.Cross(up, forward) 計算 up 和 forward 的 叉積，得到一個垂直于二者的方向（即“右方向”）。Quaternion rotation = Quaternion.LookRotation(up, -Vector3.Cross(up, forward).normalized);// 使用DOTween動畫平滑移動和旋轉卡牌handCards[i].transform.DOMove(splinePosition, 0.25f);handCards[i].transform.DOLocalRotateQuaternion(rotation, 0.25f);}}
}

4.2 解釋：

（1）計算第一張卡牌的位置（居中排列）

float firstCardPosition = 0.5f - (handCards.Count - 1) * cardSpacing / 2;

• 目的是讓所有卡牌以樣條曲線的中點（0.5）對稱分布。
• 例如 3 張卡牌時，第一張卡牌位置為 0.3，后續卡牌依次為 0.5、0.7。

（1）關鍵旋轉計算：

Quaternion rotation = Quaternion.LookRotation(up, -Vector3.Cross(up, forward).normalized);

我們可以查看目前曲線上點的旋轉，因為我們只取獲取曲線上點的前向向量和上向量，所以樣條線的x旋轉不重要，y和z分別是90和270

這么查看比較抽象，我們可以新建一個空物體模擬曲線點的旋轉，y和z分別設置成90和270度，看xyz軸具體對應的方向。記得切換成3D模式和局部坐標下觀察

我們可以看，曲線點的x、y、z方向分別對應世界坐標的-y、-z、x軸方向。

所以我們使用LookRotation(up, -Cross(up, forward)) 可以讓卡牌的：

• Z 軸 對齊曲線的 up 方向。這里也就是世界坐標的-z軸方向。

• Y 軸 對齊曲線的“左方向”（通過叉積計算，這里取了負號）。這里也就是世界坐標的y軸方向。

（3）應用動畫

使用 DOTween 的 DOMove 和 DOLocalRotateQuaternion 實現平滑移動和旋轉。

4.3 配置參數

這里的Card預制體制作，可以參考我之前的文章：【unity實戰】在 Unity 中實現卡牌翻轉或者翻書的效果

spawnPoint卡牌生成位置，我定義在了屏幕的左上角位置

4.4 效果

按空格抽一張牌

參考

https://www.youtube.com/@thecodeotter

---

專欄推薦

地址
【unity游戲開發入門到精通——C#篇】
【unity游戲開發入門到精通——unity通用篇】
【unity游戲開發入門到精通——unity3D篇】
【unity游戲開發入門到精通——unity2D篇】
【unity實戰】
【制作100個Unity游戲】
【推薦100個unity插件】
【實現100個unity特效】
【unity框架/工具集開發】
【unity游戲開發——模型篇】
【unity游戲開發——InputSystem】
【unity游戲開發——Animator動畫】
【unity游戲開發——UGUI】
【unity游戲開發——聯網篇】
【unity游戲開發——優化篇】
【unity游戲開發——shader篇】
【unity游戲開發——編輯器擴展】
【unity游戲開發——熱更新】
【unity游戲開發——網絡】

完結

好了，我是向宇，博客地址：https://xiangyu.blog.csdn.net，如果學習過程中遇到任何問題，也歡迎你評論私信找我。

贈人玫瑰，手有余香！如果文章內容對你有所幫助，請不要吝嗇你的點贊評論和關注，你的每一次支持都是我不斷創作的最大動力。當然如果你發現了文章中存在錯誤或者有更好的解決方法，也歡迎評論私信告訴我哦！