Unity卡牌游戏UI框架设计：MVC与事件驱动架构实战

1. 项目概述：为什么需要一个专业的卡牌UI框架？

如果你正在开发一款卡牌游戏，无论是集换式卡牌、策略卡牌还是RPG卡牌，你大概率会遇到一个共同的痛点：UI界面越做越乱。初期，你可能只是简单地拖几个按钮和图片，用 OnClick 事件绑定功能。但随着卡牌数量增加、特效需求变多、交互逻辑复杂化，你会发现代码里充满了 Find 、 GetComponent ，卡牌的状态管理散落在各处，动画播放时序错乱，新功能的添加变得举步维艰。这时，一个结构清晰、职责分明的UI框架，就不再是“锦上添花”，而是“雪中送炭”的必需品。

这个“Unity卡牌UI框架”项目，其核心目标就是解决上述混乱。它不是一个教你如何用UGUI画一个卡牌图片的教程，而是一套从底层数据驱动到上层表现层、从单张卡牌到整个战场布局的完整架构设计指南。我们将深入探讨如何将卡牌的 数据（攻击力、生命值、费用） 、 状态（是否可被选中、是否已打出、是否被冻结） 和 视图（卡面、文字、特效、动画） 进行分离，并建立它们之间高效、低耦合的通信机制。最终，你将得到一个可维护、易扩展、性能可控的专业级框架，能够支撑起从简单Demo到商业级卡牌游戏的所有界面需求。

2. 框架核心设计：MVC与事件驱动的融合

在构建任何复杂UI系统时，选择一个合适的架构模式是成功的基石。对于卡牌游戏UI，我强烈推荐采用 “改良版的MVC（Model-View-Controller）模式” 并结合 “事件驱动（Event-Driven）架构” 。纯粹的MVC在Unity中有时会显得笨重，我们需要对其进行Unity风格的适配。

2.1 数据层：卡牌模型的设计

数据层是框架的心脏，它只关心“是什么”，不关心“怎么显示”。一个健壮的卡牌模型类（例如 CardData 或 CardModel ）应该包含所有核心属性。

[System.Serializable]
public class CardData
{
    public string InstanceID; // 卡牌唯一实例ID，用于区分同名卡牌
    public string CardID; // 配置表ID，用于读取静态数据
    public int CurrentManaCost; // 当前费用（可能被效果修改）
    public int BaseAttack;
    public int CurrentAttack; // 当前攻击力
    public int BaseHealth;
    public int CurrentHealth; // 当前生命值
    public CardLocation Location; // 位置：手牌、战场、牌库、墓地
    public bool CanPlay; // 当前是否可打出
    public List<CardEffect> AppliedEffects; // 当前附加的效果列表
    // ... 其他业务属性
}

public enum CardLocation
{
    Deck,
    Hand,
    Battlefield,
    Graveyard,
    Exile
}

设计要点 ：这里的关键是区分“基础属性”和“当前属性”。 BaseAttack 来自卡牌配置表，是固定值； CurrentAttack 是经过场上各种增益、减益效果计算后的实时值，所有UI显示都应基于 Current 值。 InstanceID 至关重要，它确保了在战场上有多张同名卡牌时，我们能精确地定位和操作每一张。

2.2 视图层：卡牌表现器的职责

视图层负责将数据层的信息“画”到屏幕上，并响应用户输入。我习惯称之为 CardView 或 CardPresenter 。

public class CardView : MonoBehaviour
{
    [SerializeField] private Image cardImage;
    [SerializeField] private TextMeshProUGUI attackText;
    [SerializeField] private TextMeshProUGUI healthText;
    [SerializeField] private TextMeshProUGUI manaCostText;
    [SerializeField] private GameObject highlightFrame; // 高亮框
    [SerializeField] private GameObject freezeEffect; // 冻结特效
    // ... 其他UI组件引用

    private string _boundCardID; // 当前绑定的卡牌实例ID

    public void BindData(CardData data)
    {
        if (_boundCardID == data.InstanceID) return; // 避免重复绑定
        _boundCardID = data.InstanceID;

        // 更新UI显示
        attackText.text = data.CurrentAttack.ToString();
        healthText.text = data.CurrentHealth.ToString();
        manaCostText.text = data.CurrentManaCost.ToString();

        // 根据状态显示/隐藏特效
        freezeEffect.SetActive(IsCardFrozen(data));
        // ... 加载卡面图片等
    }

    public void UpdateStats(CardData data)
    {
        // 仅更新数值类UI，比完全重绑高效
        attackText.text = data.CurrentAttack.ToString();
        // ...
    }

    public void PlayHoverAnimation() { /* 鼠标悬停动画 */ }
    public void PlayDrawAnimation() { /* 抽牌动画 */ }
    public void PlayDeathAnimation() { /* 死亡动画 */ }
}

核心技巧 ： CardView 应该对游戏逻辑一无所知。它只做两件事：1. 根据传入的数据更新UI组件；2. 播放动画。它不应该直接去查询“当前玩家法力值够不够”，这类逻辑判断应由控制器负责。

2.3 控制层与事件总线：粘合剂与通信中枢

控制器负责处理业务逻辑，是连接数据和视图的桥梁。但在一个多模块、多交互的卡牌游戏中，让控制器直接持有所有 CardView 的引用会导致紧耦合。这时， 事件总线 就成为了架构的“神经系统”。

我们可以创建一个全局的、简易的事件管理器：

public static class EventBus
{
    // 定义事件：卡牌数据改变
    public static Action<string> OnCardDataChanged; // 参数为卡牌InstanceID
    // 定义事件：卡牌被点击
    public static Action<string> OnCardClicked; // 参数为卡牌InstanceID
    // 定义事件：回合阶段改变
    public static Action<GamePhase> OnGamePhaseChanged;
    // ... 更多事件
}

// 在数据层（CardData）中，当属性改变时触发事件
public class CardData
{
    private int _currentHealth;
    public int CurrentHealth
    {
        get => _currentHealth;
        set
        {
            if (_currentHealth != value)
            {
                _currentHealth = value;
                EventBus.OnCardDataChanged?.Invoke(this.InstanceID);
            }
        }
    }
}

// 在视图层（CardView）中，订阅关心的事件
public class CardView : MonoBehaviour
{
    private void OnEnable()
    {
        EventBus.OnCardDataChanged += HandleCardDataChanged;
    }

    private void OnDisable()
    {
        EventBus.OnCardDataChanged -= HandleCardDataChanged;
    }

    private void HandleCardDataChanged(string cardInstanceID)
    {
        if (cardInstanceID == _boundCardID)
        {
            // 从中央数据中心（如GameManager）获取最新的CardData并更新视图
            var newData = CardManager.Instance.GetCardData(cardInstanceID);
            UpdateStats(newData);
        }
    }
}

// 在控制器（如HandController）中，响应卡牌点击事件，执行逻辑
public class HandController : MonoBehaviour
{
    private void OnEnable()
    {
        EventBus.OnCardClicked += HandleCardClick;
    }

    private void HandleCardClick(string clickedCardID)
    {
        CardData card = CardManager.Instance.GetCardData(clickedCardID);
        if (card.Location == CardLocation.Hand && card.CanPlay)
        {
            // 执行出牌逻辑：扣除法力、移动到战场、触发效果等
            PlayCard(card);
        }
    }
}

这种设计的巨大优势 在于解耦。 CardView 不知道谁修改了数据，它只监听“数据变了”这个事件。 CardData 不知道自己被谁显示，它只负责在变化时发出通知。控制器只在自己关心的时机（如卡牌被点击时）介入逻辑。添加新功能（比如一个显示卡牌历史的面板）只需让新面板监听 OnCardDataChanged 事件即可，无需修改现有代码。

3. 核心模块实现详解

有了顶层架构，我们来深入实现几个卡牌游戏中最关键、也最容易出问题的模块。

3.1 手牌管理系统：布局、交互与动画

手牌管理是UI框架中的“重灾区”，难点在于动态布局、流畅动画和复杂的输入交互。

动态布局 ：不建议手动计算位置。UGUI的 Horizontal Layout Group 或更高级的第三方插件（如 EnhancedScroller 用于超多手牌）是基础。但对于卡牌重叠、扇形展开等效果，需要自定义布局逻辑。一个经典方法是写一个 HandLayout 脚本：

public class HandLayout : MonoBehaviour
{
    public float maxArcAngle = 30f; // 最大扇形角度
    public float radius = 500f; // 弧形半径
    public float cardWidth = 150f;

    public void UpdateLayout(List<CardView> cards)
    {
        int total = cards.Count;
        float angleStep = maxArcAngle / Mathf.Max(1, total - 1); // 每张卡的角间隔

        for (int i = 0; i < total; i++)
        {
            float angle = -maxArcAngle / 2 + angleStep * i; // 计算当前卡的角度（弧度）
            float x = Mathf.Sin(angle * Mathf.Deg2Rad) * radius;
            float y = -Mathf.Cos(angle * Mathf.Deg2Rad) * radius; // Y轴负值使弧形朝上

            cards[i].RectTransform.anchoredPosition = new Vector2(x, y);
            cards[i].RectTransform.localEulerAngles = new Vector3(0, 0, angle); // 让卡牌沿弧线旋转
            // 设置层级，中间的卡在最上
            cards[i].Transform.SetSiblingIndex(i);
        }
    }
}

卡牌交互与拖拽 ：Unity的 EventTrigger 组件虽然方便，但难以实现精细控制（如拖拽开始条件、拖拽过程中的旋转）。我推荐使用 IPointerDownHandler , IDragHandler , IPointerUpHandler 接口在 CardView 中实现：

public class CardInteraction : MonoBehaviour, IPointerDownHandler, IDragHandler, IPointerUpHandler
{
    private bool _isDragging = false;
    private Vector2 _dragOffset;

    public void OnPointerDown(PointerEventData eventData)
    {
        // 1. 检查卡牌是否可拖拽（如是否可打出）
        CardData myData = GetMyData();
        if (!myData.CanPlay) return;

        // 2. 计算点击点与卡牌中心的偏移，让拖拽更自然
        RectTransformUtility.ScreenPointToLocalPointInRectangle(
            transform.parent as RectTransform,
            eventData.position,
            eventData.pressEventCamera,
            out _dragOffset);
        _dragOffset = (Vector2)transform.localPosition - _dragOffset;

        // 3. 提升层级，确保拖拽时在最上层
        transform.SetAsLastSibling();
        _isDragging = true;
        EventBus.OnCardDragStart?.Invoke(GetMyData().InstanceID);
    }

    public void OnDrag(PointerEventData eventData)
    {
        if (!_isDragging) return;

        Vector2 localPos;
        if (RectTransformUtility.ScreenPointToLocalPointInRectangle(
            transform.parent as RectTransform,
            eventData.position,
            eventData.pressEventCamera,
            out localPos))
        {
            transform.localPosition = localPos + _dragOffset;
        }
        // 可以在这里添加拖拽到战场区域的视觉反馈
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        if (!_isDragging) return;
        _isDragging = false;

        // 判断释放位置
        if (IsOverBattlefieldArea(eventData.position))
        {
            // 触发出牌逻辑
            EventBus.OnCardClicked?.Invoke(GetMyData().InstanceID);
        }
        else
        {
            // 返回手牌，播放归位动画
            StartCoroutine(SmoothReturnToHand());
        }
        EventBus.OnCardDragEnd?.Invoke(GetMyData().InstanceID);
    }
}

避坑指南：拖拽与UI遮挡 。一个常见问题是，当卡牌被拖拽到其他UI元素（如按钮）上方时， OnPointerUp 可能会被那些元素拦截，导致卡牌无法正确响应释放。解决方案是：在拖拽开始时，可以临时将一个全屏的、透明的 Image （作为拖拽层）设置为 Canvas 的最高子物体，并捕获所有输入，直到拖拽结束。这能确保拖拽事件不会被意外打断。

3.2 状态驱动UI与动画系统

卡牌的状态（选中、可打出、冻结、死亡）应该直接驱动UI表现和动画，而不是散落在各处用 if-else 控制。

状态可视化 ：为 CardView 创建一个 UpdateVisualState 方法，它根据绑定的 CardData 中的状态字段，统一控制所有视觉元素。

public void UpdateVisualState(CardData data)
{
    // 高亮框：卡牌被选中时显示
    highlightFrame.SetActive(SelectionManager.Instance.SelectedCardID == data.InstanceID);

    // 卡牌颜色/灰度：是否可打出
    float alpha = data.CanPlay ? 1.0f : 0.5f;
    cardImage.color = new Color(1, 1, 1, alpha);

    // 冻结特效
    freezeEffect.SetActive(data.AppliedEffects.Exists(e => e.Type == EffectType.Freeze));

    // 濒死闪烁（当生命值低于阈值）
    if (data.CurrentHealth <= 2 && data.CurrentHealth > 0)
    {
        if (!IsInvoking(nameof(FlashHealthText)))
            InvokeRepeating(nameof(FlashHealthText), 0, 0.5f);
    }
    else
    {
        CancelInvoke(nameof(FlashHealthText));
        healthText.color = Color.white;
    }
}

动画序列管理 ：卡牌游戏充满动画：抽牌、打出、攻击、死亡。使用协程 Coroutine 管理简单序列可行，但复杂动画（如抽牌+手牌布局更新+特效）容易变成“回调地狱”。Unity的 DOTween 插件或 Unity Timeline 是更好的选择。对于程序化动画，我更喜欢 DOTween 的链式调用：

public void PlayDrawCardSequence(CardView cardView, Vector2 fromDeckPos)
{
    // 1. 卡牌从牌库位置飞入
    cardView.RectTransform.anchoredPosition = fromDeckPos;
    cardView.RectTransform.DOAnchorPos(Vector2.zero, 0.3f).SetEase(Ease.OutBack)
        .OnComplete(() =>
        {
            // 2. 播放一个“抽到牌”的缩放特效
            cardView.RectTransform.DOPunchScale(Vector3.one * 0.2f, 0.2f);
            // 3. 通知手牌管理器更新布局
            EventBus.OnCardAddedToHand?.Invoke(cardView.CardInstanceID);
        });
}

经验之谈：动画性能 。避免在同一帧内同时播放大量 DOTween 动画或触发大量 SetActive ，这可能导致性能卡顿。对于手牌中多张卡牌的入场动画，可以使用 DOTween 的 SetDelay 进行错峰播放，营造出依次抽卡的效果，同时分散CPU压力。

3.3 数据绑定与高效更新

当战场上有几十个随从，每个随从的属性都可能被法术实时影响时，如何高效更新UI是关键。我们之前提到的事件总线模式已经解决了“何时更新”的问题。现在要解决“如何高效更新”。

脏标记系统 ：不是每次收到 OnCardDataChanged 事件都去全量刷新UI。可以在 CardData 中引入一个脏标记（Dirty Flag）。

public class CardData
{
    // ... 属性
    private int _dirtyFlags = 0; // 用位掩码表示哪些部分脏了
    public const int DIRTY_STATS = 1 << 0; // 1
    public const int DIRTY_STATUS = 1 << 1; // 2
    public const int DIRTY_ALL = ~0; // -1

    public void MarkDirty(int flag) { _dirtyFlags |= flag; }
    public void ClearDirty(int flag) { _dirtyFlags &= ~flag; }
    public bool IsDirty(int flag) { return (_dirtyFlags & flag) != 0; }

    public int CurrentHealth
    {
        get => _currentHealth;
        set
        {
            if (_currentHealth != value)
            {
                _currentHealth = value;
                MarkDirty(DIRTY_STATS); // 标记“数值”脏了
                EventBus.OnCardDataChanged?.Invoke(this.InstanceID);
            }
        }
    }
}

在 CardView 的更新方法中，可以根据脏标记进行增量更新：

public void RefreshIfNeeded(CardData data)
{
    if (data.IsDirty(CardData.DIRTY_STATS))
    {
        UpdateStats(data); // 只更新数值文本
        data.ClearDirty(CardData.DIRTY_STATS);
    }
    if (data.IsDirty(CardData.DIRTY_STATUS))
    {
        UpdateVisualState(data); // 只更新状态特效
        data.ClearDirty(CardData.DIRTY_STATUS);
    }
}

对象池管理 ：卡牌 GameObject 的频繁实例化（Instantiate）和销毁（Destroy）是性能杀手。必须使用对象池。Unity 2021后自带了 ObjectPool ，也可以自己实现一个简单的：

public class CardViewPool : MonoBehaviour
{
    public CardView cardViewPrefab;
    private Queue<CardView> _pool = new Queue<CardView>();

    public CardView GetCardView()
    {
        if (_pool.Count > 0)
        {
            CardView view = _pool.Dequeue();
            view.gameObject.SetActive(true);
            return view;
        }
        return Instantiate(cardViewPrefab, transform);
    }

    public void ReturnCardView(CardView view)
    {
        view.gameObject.SetActive(false);
        view.UnbindData(); // 重要：清理旧数据绑定
        _pool.Enqueue(view);
    }
}

4. 高级特性与性能优化

当基础框架稳固后，可以引入一些高级特性来提升游戏品质和开发效率。

4.1 可视化配置与编辑器扩展

为了让策划和美术能更方便地配置卡牌，我们可以为 CardData 创建自定义的 PropertyDrawer ，或在编辑器下创建一个卡牌配置窗口。

#if UNITY_EDITOR
[CustomEditor(typeof(CardDataSO))] // CardDataSO是一个ScriptableObject资源
public class CardDataSOEditor : Editor
{
    public override void OnInspectorGUI()
    {
        serializedObject.Update();
        // 绘制基础属性
        EditorGUILayout.PropertyField(serializedObject.FindProperty("cardName"));
        EditorGUILayout.PropertyField(serializedObject.FindProperty("baseManaCost"));
        // ... 更多属性

        // 提供一个按钮，预览卡牌UI效果
        if (GUILayout.Button("Preview in UI"))
        {
            CardPreviewWindow.ShowWindow((CardDataSO)target);
        }
        serializedObject.ApplyModifiedProperties();
    }
}
#endif

你甚至可以创建一个 CardEditorWindow ，允许拖拽卡面图、设置数值、关联特效预制体，并实时在编辑器内看到卡牌UI的预览效果。这能极大减少策划、美术和程序之间的沟通成本。

4.2 性能监控与优化策略

卡牌UI的性能瓶颈通常在于 Draw Call 和 Canvas重建 。

Draw Call合并 ：确保所有卡牌使用的图片资源尽可能合并到同一张图集（Atlas）中。Unity的UGUI默认会尝试合批，但如果卡牌UI元素分散在不同的 Canvas 下，或使用了过多的 Mask 组件，合批就会失效。一个最佳实践是： 为所有动态更新的卡牌UI元素（如手牌、战场）使用一个单独的 Canvas ，而为静态背景UI使用另一个 Canvas 。同时，谨慎使用 Mask 组件，考虑用 RectMask2D 替代，因为它性能更好。

Canvas重建优化 ：UGUI的 Canvas 在检测到其下任何UI元素发生变化（位置、颜色、文本等）时，会进行“重建”，这是一个比较耗时的操作。优化策略包括：

1. 分离动态和静态元素 ：将频繁变化的文本（如攻击力）和静态的背景图片放在不同的子 Canvas 或层级中，可以限制重建的范围。
2. 使用TextMeshPro ：Unity原生的 Text 组件在文本变化时重建开销较大。 TextMeshPro（TMP） 在文本渲染和更新性能上通常更优，且效果更美观。但请注意，TMP的字体图集如果管理不当（如动态添加了大量字符），也可能引起卡顿。
3. 避免每帧更改布局 ：手牌布局更新应在卡牌 添加/移除 时触发，而不是在 Update 中持续计算。使用 LayoutRebuilder.MarkLayoutForRebuild 进行手动、精准的重建标记。

内存与资源管理 ：使用 Addressables 或 AssetBundle 系统来加载和卸载卡牌资源（卡面图、特效预制体）。当一局游戏结束或卡牌进入墓地时，及时释放不再需要的资源。对于卡牌描述文本、图标等小资源，可以常驻内存以提高响应速度。

4.3 网络同步与预测回滚（针对网络卡牌游戏）

对于在线对战卡牌游戏，UI还需要处理网络延迟带来的问题。核心思想是 客户端预测与服务器权威验证 。

1. 预测执行 ：当玩家点击打出卡牌时，UI立即在本地执行出牌效果（扣除法力、播放动画、更新战场），给玩家即时反馈。同时，将操作发送给服务器。
2. 服务器验证 ：服务器验证操作合法性（法力是否真的够、目标是否有效等）。
3. 结果同步 ：服务器将验证后的游戏状态广播给所有客户端。
4. 回滚与修正 ：如果客户端预测的状态与服务器最终状态不一致（比如服务器判定卡牌被对手的奥秘反制了），客户端需要 回滚 到上一个一致的状态，然后根据服务器数据重新演算并更新UI。这要求你的 CardData 和游戏逻辑是 确定性的 ，并且有保存关键帧（快照）的能力。

实现这一套非常复杂，通常需要专门的网络同步框架（如Mirror、Fish-Networking）的支持。在UI层面，你需要为所有可能被预测修改的UI状态（如法力水晶、随从血量）设计平滑的过渡动画，以掩盖回滚时的突兀感。

5. 常见问题与调试技巧

在实际开发中，你一定会遇到各种奇怪的问题。这里记录一些我踩过的坑和解决方法。

问题1：卡牌点击无响应，尤其是快速点击时。

• 排查 ：首先检查 EventTrigger 或 IPointerXXXHandler 组件是否被禁用，卡牌的 Image 组件的 Raycast Target 是否勾选。然后，检查是否有其他全屏UI面板（如透明背景）遮挡了射线。
• 深层原因 ：可能是动画播放期间，卡牌的 RectTransform 的锚点或大小被改变，导致射线检测区域异常。或者，在拖拽结束时，归位动画协程与新的点击事件产生了冲突。
• 解决 ：为点击和拖拽逻辑添加一个“冷却期”或状态锁。例如，在 OnPointerUp 协程结束前，屏蔽新的 OnPointerDown 事件。也可以使用 CanvasGroup 的 blocksRaycasts 属性在动画期间临时禁用交互。

问题2：TextMeshPro文字描边（Outline）在运行时模糊或没有效果。

• 原因 ：这是TMP的一个常见问题。通常是因为字体材质（Material）的实例化或渲染设置问题。
• 解决 ：
  1. 在TMP的导入设置（Font Asset Creator）中，确保为SDF字体设置了合适的 Render Mode （如 Smooth ）和 Generation Settings 。
  2. 检查场景中是否有多个 Canvas ，并且它们的 Render Mode 不一致（ Screen Space - Overlay vs Screen Space - Camera vs World Space ）。不同模式下，TMP的渲染方式不同，可能导致效果异常。尽量统一 Canvas 的渲染模式。
  3. 避免在运行时动态创建TMP组件并设置描边。如果必须这样做，确保正确复制了字体材质并设置了参数。更稳妥的方式是，在预制体中预先配置好TMP组件和描边效果。

问题3：卡牌特效（粒子系统）在UI层显示异常，被其他UI遮挡。

• 原因 ：Unity的 Particle System 默认在3D空间或2D世界空间渲染，其渲染顺序由 Renderer 的 Sorting Layer 和 Order in Layer 控制，与UGUI的层级（Hierarchy顺序和Canvas Sort Order）是两套系统。
• 解决 ：对于需要与UI精确混合的特效（如卡牌发光、攻击火花），有几种方案：
  1. 使用UI粒子插件 ：如 Unity UI Particles （Package Manager中可找到），它允许粒子系统在UI渲染管线中绘制，完美遵循UI层级。
  2. 将3D粒子渲染到Render Texture ：创建一个 Render Texture ，用一个专门的相机渲染粒子，然后将这个 Render Texture 显示在一个UI RawImage 上。这样可以精确控制这个 RawImage 在UI层级中的位置。
  3. 使用Shader制作纯2D UI特效 ：对于简单的流光、波纹效果，可以考虑用 Shader Graph 编写一个片元着色器，直接应用于 Image 组件，性能最好，控制也最精准。

问题4：在低端移动设备上，手牌滑动和动画明显卡顿。

• 性能分析 ：打开Unity的 Profiler 窗口，重点观察：
  • CPU： Canvas.SendWillRenderCanvases 耗时是否过高？（Canvas重建）
  • CPU： UI.LayoutGroup 耗时是否过高？（布局计算）
  • GPU： 是否出现了大量的 Draw Call ？（合批失败）
• 针对性优化 ：
  • 简化布局计算 ：减少手牌布局更新的频率。例如，只在卡牌数量变化或回合结束时重新布局，而不是每帧。
  • 降低视觉复杂度 ：在移动端，可以考虑禁用非必要的视觉元素，如卡牌背后的复杂光影、高频率的粒子特效。为移动端制作一套简化的卡牌材质和特效。
  • 分帧加载 ：当一局游戏开始，需要加载大量卡牌资源时，不要在同一帧内全部实例化。使用协程分帧加载，每帧加载2-3张，虽然总时间变长，但避免了帧率骤降。

构建一个专业的卡牌UI框架，前期投入的架构设计时间，会在项目中后期以数十倍的效率回报给你。它让迭代变得轻松，让bug更容易定位，也让团队协作更加顺畅。记住，好的框架不是一堆炫技的设计模式堆砌，而是让代码“各司其职”，让逻辑“清晰可见”。从今天开始，尝试用数据和事件驱动你的卡牌UI，你会立刻感受到那种秩序带来的愉悦感。