当前位置：首页 > news >正文

【Unity 入门教程】四、如何制作一个 Perfab

news 2025/9/26 8:02:25

前言

Perfab 相当于是一个包含 UI + Logic 的基础 UI 组件，它能满足我们游戏开发中需要的基础功能，而仅需要修改不同的参数，就可以满足日常开发。

现在，那我们就开始制作一个卡牌 Perfab 吧！！

一、核心模块梳理

1. 卡牌数据结构

制作一个卡牌类的 Perfab，首先需要能记录当前卡牌的基本信息（血量、攻击力、卡牌名称等），因此，需要先定义一个卡牌数据结构。

用 ScriptableObject 或普通 C# 类存储卡牌属性。

在 Scripts/ 下新建 CardData.cs：

[CreateAssetMenu(fileName = "NewCard", menuName = "Card")]
public class CardData : ScriptableObject
{public string cardName; // 卡牌名称public int attack; // 攻击力public int health; // 血量public Sprite artwork; // 卡牌背景
}

2. 创建卡牌资源对象

在 ScriptableObjects/ 右键 → Create → Card → 填写卡牌属性（卡牌名称、攻击力、血量、背景图）。

此处，我定义了三张卡牌，名称，攻击力，血量数值分别是：

平民卡：1-1
中级卡：2-2
高级卡：3-3

3.编写卡牌脚本

在场景里构建卡牌的原型（Hierarchy）

在 Hierarchy 中选中 Canvas，右键 → UI → Image，重命名为 CardUI（这是卡牌的根节点/背景）。

RectTransform：设置 Width = 160、Height = 220（根据你的美术调整）。
Anchor 推荐用 Middle Center（便于手动布局）。
Image 组件的 Source Image 可设置为卡牌底图（或设置透明度为0）。

在 CardUI 下创建子对象：

Artwork：右键 CardUI → UI → Image。这个放卡牌插画，重命名 Artwork
- RectTransform：Anchor 设置为 Stretch（上下左右拉伸），留出上下边距（例如 Top/Botom padding）。
- 添加组件：AspectRatioFitter（Component → Layout → Aspect Ratio Fitter），Aspect Mode = Fit In Parent，这样图片按比例缩放。
NameText：右键 CardUI → UI → Text - TextMeshPro（TMP）。放在卡牌顶部居中。
- 设置 Auto Size 或固定 Font Size（例如 18），对齐居中。
AttackText：右键 CardUI → UI → Text - TextMeshPro，重命名 AttackText，放左下角。
HealthText：同上，HealthText，放右下角。

给 CardUI 根节点加一个 LayoutElement

（Component → Layout → Layout Element）
把 Preferred Width/Height 设为上面的 100 x 150（方便用 Horizontal/Vertical Layout Group 排列手牌时保持一致）。

调整每个 Text（TMP）的颜色、字体大小、对齐方式，确保在白色或底色上可见。

可以试着改 AttackText 为红色
HealthText 为绿色
名字为黑色或白色取决于背景。

4. 添加脚本（CardUI脚本）并挂载

在 Assets/Scripts/ 新建脚本 CardUI.cs

using UnityEngine;
using UnityEngine.UI;
using TMPro;public class CardUI : MonoBehaviour
{[Header("UI Elements")]public Image artworkImage;public TextMeshProUGUI nameText;public TextMeshProUGUI attackText;public TextMeshProUGUI healthText;private CardData data;public void Setup(CardData cardData){data = cardData;if (nameText != null) nameText.text = data.cardName;if (attackText != null) attackText.text = data.attack.ToString();if (healthText != null) healthText.text = data.health.ToString();if (artworkImage != null) artworkImage.sprite = data.artwork;}
}

操作：

保存脚本后回 Unity 等待编译通过（Console 无报错）。
把 CardUI.cs 拖到 CardUI（Hierarchy 根节点）上作为组件。
在 Inspector 的 CardUI (Script) 面板，把字段对应拖入：
- ArtworkImage → 拖 CardUI/Artwork 的 Image 组件
- NameText → 拖 CardUI/NameText 的 TextMeshProUGUI
- AttackText → 拖 AttackText（TMP）
- HealthText → 拖 HealthText（TMP）

注意：字段为空会导致显示不出来，所以必须绑定。