1. 项目概述与核心思路最近在复刻《杀戮尖塔》的战斗体验第一个想啃的硬骨头就是它那套极具辨识度的出牌效果。当你手牌不多时卡牌会扇形展开鼠标悬停时对应卡牌会微微抬起点击后流畅打出整个过程手感扎实、反馈清晰。这种效果远不是简单排个队就能实现的它涉及到UI布局的动态计算、精准的交互响应以及流畅的动画衔接。今天我们就来深度拆解如何用Unity实现这套“扇形开牌”效果我会把从数学计算到代码实现的每一步都讲透并分享我趟过的坑和优化技巧。这个功能的核心价值在于提升卡牌游戏的操控质感和沉浸感。它不仅仅是视觉上的花哨更是一套符合人体工学的交互设计卡牌根据数量自动调整间距和弧度确保每张牌都有足够的可点击区域悬停高亮引导玩家注意力点击后的动画则给予明确的操作反馈。无论是做独立卡牌游戏、战棋游戏还是任何需要“手牌管理”的UI模块这套思路都能直接复用。实现它我们主要会用到Unity的UI系统特别是RectTransform、基础的三角函数进行位置计算以及UnityEngine.EventSystems来处理悬停和点击事件。整个思路可以概括为“以屏幕底边中点为虚拟圆心根据手牌数量动态计算每张牌的目标位置角度和半径然后通过动画让卡牌从聚集状态运动到扇形位置并绑定交互事件。”下面我们就进入正题。2. 核心数学原理扇形布局的计算实现扇形展开本质上是一个数学问题如何将N个物体均匀地分布在一段圆弧上。这里我们选择以屏幕下方中央为虚拟圆心向上展开一个扇形区域。2.1 关键参数定义首先我们需要定义几个核心参数它们将决定扇形的形态圆心 (Pivot Point) 我们将其固定在屏幕底边中点。假设屏幕宽度为Screen.width那么圆心坐标可以是(Screen.width / 2, 0)。但在UI系统中我们更常使用基于Canvas的局部坐标或锚点来定位。半径 (Radius) 指卡牌中心到圆心的距离。这个值直接影响卡牌离屏幕底边的高度。半径越大扇形越高。总张角 (Total Angle) 整个扇形区域覆盖的角度范围。例如120度意味着扇形从左到右横跨120度。这个角度决定了扇形的“开阔程度”。卡牌数量 (Card Count) 当前手牌的数量记为n。2.2 位置计算推导我们的目标是让n张卡牌均匀分布在总张角覆盖的圆弧上。如果只有一张牌我们通常让它位于扇形的正中央即角度为0度垂直向上的位置。当有n张牌 (n 1) 时计算步骤如下计算间隔角 (Delta Angle) 相邻两张牌之间的角度间隔。公式为间隔角 总张角 / (n - 1)。之所以除以(n-1)而不是n是因为我们有n个点它们之间只有n-1个间隔。这确保了第一张牌和最后一张牌刚好落在总张角的两端。计算起始角 (Start Angle) 第一张牌的角度。为了让扇形关于垂直中线对称起始角是负的总张角的一半。公式为起始角 -总张角 / 2。遍历计算每张牌的位置 对于第i张牌i从0开始其角度θ为θ 起始角 i * 间隔角。从极坐标转换到直角坐标 已知半径r和角度θ卡牌中心相对于圆心的目标位置(x, y)为x r * Mathf.Sin(θ * Mathf.Deg2Rad)y r * Mathf.Cos(θ * Mathf.Deg2Rad)注意这里使用Sin和Cos计算x和y是因为我们定义的角度θ是从y轴正方向向上开始顺时针或逆时针计算。这是Unity中常见的处理方式。Mathf.Deg2Rad是将角度转换为弧度因为C#的三角函数使用弧度制。2.3 参数的经验值设置根据《杀戮尖塔》的视觉效果和实际屏幕适配经验我推荐一组初始参数你可以在自己的项目中微调半径 对于1080p屏幕可以设置为300-400像素。可以通过CanvasScaler的参考分辨率来动态缩放。总张角 设置在90度到120度之间比较舒适。角度太小显得拥挤太大则卡牌过于水平不利于查看牌面信息。我常用100度。卡牌锚点 为了方便计算最好将卡牌预制体Prefab的RectTransform的轴心点Pivot设置为(0.5, 0)即底部中心。这样卡牌的“底部”就对齐了我们计算出的中心点旋转也更自然。3. Unity场景搭建与组件设计理论清晰后我们开始在Unity中搭建环境。3.1 UI层级结构一个清晰合理的UI层级是后续编码顺利的基础。我建议的Canvas结构如下Canvas (Render Mode: Screen Space - Overlay) ├── HandCardArea (空GameObject作为手牌容器) │ └── (动态生成的卡牌会放在这里) └── Other UI Elements...HandCardArea 这是一个空的GameObject添加RectTransform组件。它的作用是作为所有手牌UI的父节点。我们将它的锚点Anchors设置为底部拉伸Bottom-Stretch这样它的宽度会自适应屏幕并且底边对齐屏幕底部。然后将其高度设为0或者一个很小的值因为它本身只是容器不显示内容。卡牌预制体 (CardPrefab) 创建一个包含卡牌所有视觉元素背景、文字、图标等的UI预制体。确保其根节点的RectTransform轴心点Pivot设为(0.5, 0)如上文所述。3.2 核心脚本HandCardManager我们需要一个核心管理器脚本来统筹一切。创建一个名为HandCardManager的C#脚本并将其挂载到HandCardArea或一个更上层的管理节点上。这个脚本将负责持有卡牌预制体的引用。管理当前手牌列表ListCardUI。包含扇形布局计算的方法。控制卡牌的生成、添加、移除。驱动布局更新和动画。首先定义必要的变量和引用using System.Collections.Generic; using UnityEngine; public class HandCardManager : MonoBehaviour { [Header(布局参数)] [SerializeField] private float radius 350f; // 扇形半径 [SerializeField] private float totalAngle 100f; // 总扇形角度 [SerializeField] private float cardWidth 120f; // 卡牌宽度用于碰撞检测或间距微调 [Header(引用)] [SerializeField] private GameObject cardPrefab; // 卡牌预制体 [SerializeField] private Transform cardsContainer; // 卡牌父节点通常就是this.transform [Header(动画参数)] [SerializeField] private float layoutDuration 0.2f; // 布局动画时长 private ListCardUI currentCards new ListCardUI(); // 当前手牌列表 // ... 其他方法和逻辑 }3.3 卡牌UI脚本CardUI每张卡牌也应该有自己的脚本CardUI用于管理自身状态、动画和交互事件。using UnityEngine; using UnityEngine.EventSystems; using UnityEngine.UI; public class CardUI : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerClickHandler { private RectTransform rectTransform; private Vector2 targetPosition; // 目标局部坐标相对于HandCardArea private float targetRotation; // 目标旋转角度可选让卡牌微微朝向圆心 private bool isHovered false; [SerializeField] private float hoverYOffset 20f; // 悬停时上浮的高度 [SerializeField] private float hoverScale 1.05f; // 悬停时放大的比例 private void Awake() { rectTransform GetComponentRectTransform(); } // 由HandCardManager调用设置这张牌的目标状态 public void SetTargetPosition(Vector2 pos, float rotation 0) { targetPosition pos; targetRotation rotation; // 可以在这里触发一个平滑移动的动画 } // 鼠标进入事件 public void OnPointerEnter(PointerEventData eventData) { isHovered true; // 触发悬停动画上浮、放大、可能改变颜色 // 例如StartCoroutine(HoverAnimation(true)); } // 鼠标离开事件 public void OnPointerExit(PointerEventData eventData) { isHovered false; // 触发取消悬停动画回到目标位置 // 例如StartCoroutine(HoverAnimation(false)); } // 鼠标点击事件 public void OnPointerClick(PointerEventData eventData) { Debug.Log($Card {name} Clicked!); // 通知游戏逻辑打出这张牌 // 例如GameManager.Instance.PlayCard(this); // 然后HandCardManager会从currentCards中移除它并重新布局 } // 每帧更新用于平滑动画也可以使用Dotween等插件 private void Update() { if (rectTransform null) return; // 简单的线性插值移动 rectTransform.anchoredPosition Vector2.Lerp(rectTransform.anchoredPosition, targetPosition, Time.deltaTime * 10f); // 旋转插值如果需要 float currentRot rectTransform.localEulerAngles.z; // 处理角度插值的环绕问题 float delta Mathf.DeltaAngle(currentRot, targetRotation); rectTransform.localEulerAngles new Vector3(0, 0, currentRot delta * Time.deltaTime * 10f); } }4. 核心功能实现详解有了基础框架我们来填充HandCardManager中最核心的布局逻辑。4.1 扇形位置计算函数在HandCardManager中添加一个方法根据卡牌索引计算其目标位置和旋转。private (Vector2 position, float rotation) CalculateCardPosition(int cardIndex, int totalCards) { if (totalCards 0) return (Vector2.zero, 0f); if (totalCards 1) return (new Vector2(0, radius), 0f); // 只有一张牌放在圆心正上方 // 1. 计算间隔角和起始角 float deltaAngle totalAngle / (totalCards - 1); float startAngle -totalAngle / 2; // 2. 计算当前牌的角度 float currentAngle startAngle cardIndex * deltaAngle; float angleInRad currentAngle * Mathf.Deg2Rad; // 3. 计算位置 (以容器中心为原点) float x radius * Mathf.Sin(angleInRad); float y radius * Mathf.Cos(angleInRad); // 4. 可选计算卡牌朝向圆心的旋转 // 让卡牌稍微向内旋转视觉效果更贴合圆弧。旋转角度与位置角度相反。 float cardRotation -currentAngle * 0.3f; // 系数可以调整0.3意味着旋转角度是位置角度的30% return (new Vector2(x, y), cardRotation); }4.2 更新所有卡牌布局创建一个公共方法当手牌数量变化抽牌、打牌、弃牌时调用重新计算所有卡牌的位置。public void UpdateCardLayout() { int cardCount currentCards.Count; for (int i 0; i cardCount; i) { var card currentCards[i]; if (card null) continue; var (pos, rot) CalculateCardPosition(i, cardCount); card.SetTargetPosition(pos, rot); } }4.3 添加与移除卡牌我们需要模拟手牌的变化来触发布局更新。// 添加一张新卡到手牌 public CardUI AddCardToHand(CardData data) // 假设CardData是卡牌数据 { if (cardPrefab null || cardsContainer null) { Debug.LogError(CardPrefab or CardsContainer is not assigned!); return null; } GameObject cardObj Instantiate(cardPrefab, cardsContainer); cardObj.name $Card_{data.cardName}_{currentCards.Count}; CardUI cardUI cardObj.GetComponentCardUI(); if (cardUI null) { cardUI cardObj.AddComponentCardUI(); } // 初始化卡牌UI例如设置文字、图标等 // cardUI.Initialize(data); // 先将新卡牌放在一个初始位置比如屏幕外底部 cardUI.GetComponentRectTransform().anchoredPosition new Vector2(0, -100); currentCards.Add(cardUI); // 短暂延迟后更新布局让添加有序列感 StartCoroutine(UpdateLayoutAfterDelay(0.05f)); // 或者立即更新 // UpdateCardLayout(); return cardUI; } private System.Collections.IEnumerator UpdateLayoutAfterDelay(float delay) { yield return new WaitForSeconds(delay); UpdateCardLayout(); } // 从手牌中移除一张卡 public void RemoveCardFromHand(CardUI card) { if (card null || !currentCards.Contains(card)) return; // 可以在这里播放一个打出或销毁的动画 // card.PlayDiscardAnimation(); currentCards.Remove(card); Destroy(card.gameObject, 0.5f); // 延迟销毁让动画播完 // 重新布局剩余的卡牌 UpdateCardLayout(); }4.4 悬停交互优化在CardUI的悬停逻辑中我们不仅要改变当前牌的状态最好还能让相邻的牌做出避让反应这在《杀戮尖塔》中也有体现能极大提升交互层次感。修改HandCardManager提供一个方法当某张牌被悬停时通知其他牌public void OnCardHovered(CardUI hoveredCard) { int hoveredIndex currentCards.IndexOf(hoveredCard); if (hoveredIndex 0) return; for (int i 0; i currentCards.Count; i) { var card currentCards[i]; if (card hoveredCard) continue; // 计算一个基于距离的偏移量离被悬停牌越近偏移越小或反向 int indexDiff Mathf.Abs(i - hoveredIndex); float offsetFactor Mathf.Clamp01(1.0f - indexDiff * 0.3f); // 系数可调 // 获取该牌原始目标位置 var (originalPos, originalRot) CalculateCardPosition(i, currentCards.Count); Vector2 adjustedPos originalPos; // 让非悬停牌在Y轴上稍微下沉突出悬停牌 adjustedPos.y - offsetFactor * 10f; // 下沉10个像素以内 card.SetTargetPosition(adjustedPos, originalRot); } } public void OnCardUnhovered() { // 悬停结束所有牌回归原始布局 UpdateCardLayout(); }然后在CardUI的OnPointerEnter和OnPointerExit中调用这两个方法。5. 动画与性能优化实战直接瞬移卡牌会很生硬我们需要平滑的动画。这里提供两种主流方案。5.1 使用协程实现线性插值动画在CardUI中我们可以用协程来实现平滑移动替代Update中的简单插值这样更容易控制时长和曲线。private Coroutine moveCoroutine; private Coroutine rotateCoroutine; public void SetTargetPosition(Vector2 pos, float rotation) { targetPosition pos; targetRotation rotation; if (moveCoroutine ! null) StopCoroutine(moveCoroutine); moveCoroutine StartCoroutine(MoveToPosition(pos, layoutDuration)); if (rotateCoroutine ! null) StopCoroutine(rotateCoroutine); rotateCoroutine StartCoroutine(RotateToAngle(rotation, layoutDuration)); } private System.Collections.IEnumerator MoveToPosition(Vector2 targetPos, float duration) { Vector2 startPos rectTransform.anchoredPosition; float timeElapsed 0f; while (timeElapsed duration) { float t timeElapsed / duration; // 使用平滑的插值曲线如SmoothStep t t * t * (3f - 2f * t); rectTransform.anchoredPosition Vector2.Lerp(startPos, targetPos, t); timeElapsed Time.deltaTime; yield return null; } rectTransform.anchoredPosition targetPos; moveCoroutine null; } private System.Collections.IEnumerator RotateToAngle(float targetAngle, float duration) { float startRot rectTransform.localEulerAngles.z; float timeElapsed 0f; while (timeElapsed duration) { float t timeElapsed / duration; float currentAngle Mathf.LerpAngle(startRot, targetAngle, t); rectTransform.localEulerAngles new Vector3(0, 0, currentAngle); timeElapsed Time.deltaTime; yield return null; } rectTransform.localEulerAngles new Vector3(0, 0, targetAngle); rotateCoroutine null; }5.2 使用DoTween插件推荐对于更复杂、更高效的动画序列我强烈推荐使用 DoTween 插件。它语法简洁性能优秀功能强大。安装DoTween后SetTargetPosition方法可以简化为using DG.Tweening; // 引入DoTween命名空间 public void SetTargetPosition(Vector2 pos, float rotation) { // 终止之前的动画 rectTransform.DOKill(true); // 并行执行移动和旋转动画 rectTransform.DOAnchorPos(pos, layoutDuration).SetEase(Ease.OutBack); rectTransform.DOLocalRotate(new Vector3(0, 0, rotation), layoutDuration).SetEase(Ease.OutBack); }一行代码就能实现带弹性效果的平滑动画SetEase可以更换各种缓动函数让动画手感更佳。5.3 性能优化要点手牌UI可能会频繁更新尤其是悬停交互时性能需要注意。对象池管理卡牌 频繁实例化(Instantiate)和销毁(Destroy)卡牌预制体会产生GC垃圾回收压力。应该使用对象池。Unity 2021版后自带ObjectPool也可以自己实现一个简单的。// 简化的对象池示例 private QueueCardUI cardPool new QueueCardUI(); private CardUI GetCardFromPool() { if (cardPool.Count 0) { CardUI card cardPool.Dequeue(); card.gameObject.SetActive(true); return card; } return Instantiate(cardPrefab, cardsContainer).GetComponentCardUI(); } private void ReturnCardToPool(CardUI card) { card.gameObject.SetActive(false); cardPool.Enqueue(card); } // 在RemoveCardFromHand中调用ReturnCardToPool而非Destroy避免每帧调用布局计算UpdateCardLayout只在手牌数量真正变化或需要强制刷新时调用。悬停时的微调动画应只更新位置不重新计算整个扇形布局。使用Canvas组件的优化 如果卡牌数量固定且较多可以考虑将手牌所在的Canvas的Additional Shader Channels设置为TexCoord1, Normal, Tangent并启用Optimize选项。但对于动态变化的手牌更有效的是确保卡牌图片的Read/Write关闭使用合理的图集。6. 常见问题与调试技巧在实现过程中你几乎一定会遇到下面这些问题。6.1 卡牌位置错乱或重叠检查轴心点(Pivot) 这是最常见的问题。确保卡牌预制体的RectTransform的Pivot是(0.5, 0)。如果设为(0.5, 0.5)中心那么计算出的位置将是卡牌中心的位置旋转也会围绕中心看起来会很奇怪。检查坐标空间rectTransform.anchoredPosition是相对于其父节点锚点的位置。确保你的计算是基于同一个父节点HandCardArea的局部空间。在计算时将HandCardArea的中心视为(0,0)。打印调试信息 在CalculateCardPosition方法中使用Debug.Log输出计算出的角度和坐标与预期值对比。6.2 鼠标交互不灵敏或穿透卡牌碰撞体 UI的点击检测依赖于Graphic Raycaster和UI元素自身的RectTransform区域。确保卡牌根节点上有Image或MaskableGraphic之类的组件。如果卡牌有透明区域可以添加一个不可见的Image组件并设置Alpha Hit Test Minimum Threshold为0.1或者添加一个CanvasGroup并勾选Blocks Raycasts。层级遮挡 检查Canvas的排序顺序确保手牌Canvas在其他可能遮挡的UI元素之上。同时检查EventSystem是否存在且唯一。6.3 动画卡顿或不流畅避免在Update中直接修改 如果使用Update插值确保乘以Time.deltaTime。但更推荐使用协程或DoTween它们对时间的管理更精确。减少布局计算频率 在Update中频繁调用UpdateCardLayout是性能杀手。确保它只在必要时调用。使用DoTween的杀动画 在开始新动画前用DOKill()终止旧动画防止多个动画叠加造成抖动。6.4 屏幕适配问题使用Canvas Scaler 为Canvas设置合适的Canvas Scaler组件如Scale With Screen Size确保在不同分辨率下radius等像素值能按比例缩放。基于屏幕比例计算半径 更高级的做法是让radius与屏幕高度关联例如radius Screen.height * 0.3f这样在任何屏幕上扇形高度比例都一致。这套“扇形开牌”系统是实现《杀戮尖塔》式卡牌操作体验的基石。它融合了数学、UI布局和动画状态机虽然看起来复杂但拆解后每一步都有清晰的逻辑。在实际项目中你可以根据需求扩展更多功能比如为不同的卡牌类型攻击、技能、能力设置不同的悬停颜色或者添加拖拽出牌的手势支持。最关键的是理解“计算位置 - 设置目标 - 动画过渡 - 交互反馈”这个核心流程掌握了它你就能创造出各种灵动而富有响应性的UI布局。