TRPG卡片制作完全指南：使用开源自定义工具打造专业卡牌

2026-04-10 09:45:27作者：幸俭卉

作为TRPG游戏爱好者，你是否曾为手动制作法术、物品和怪物卡片而烦恼？是否希望拥有一套风格统一、专业美观的游戏卡牌却受制于制作工具的限制？本文将介绍一款强大的开源TRPG卡片生成工具，帮助你快速解决卡牌制作难题，提升游戏体验。这款TRPG卡片生成开源工具不仅可以节省你大量的时间和精力，还能让你的卡牌设计更加专业和个性化。

快速上手：从零开始使用TRPG卡片生成工具

你是否已经准备好开始制作自己的TRPG卡片，但又不知道从何入手？别担心，按照以下步骤，你将在几分钟内就能启动并运行这个强大的工具。

环境准备与安装

要使用这款TRPG卡片生成工具，你需要确保系统满足以下要求：

环境要求	最低版本	推荐版本
Node.js	12.x	16.x 或更高
浏览器	Chrome 80+, Firefox 75+, Edge 80+	Chrome 90+, Firefox 85+, Edge 90+

安装步骤：

克隆项目仓库

git clone https://gitcode.com/gh_mirrors/rp/rpg-cards
cd rpg-cards

安装依赖包
```
npm install
```
构建项目
```
npm run build
```
启动本地服务器
```
npm start
```

注意：构建过程会将游戏图标和字体资源复制到generator/icons目录，确保卡片图标正常显示。如果构建失败，请检查Node.js版本是否符合要求。

成功启动后，在浏览器中访问http://localhost:8080即可打开TRPG卡片生成器界面。

界面功能介绍

工具界面主要分为三个区域：

左侧面板：包含全局设置和页面设置，可调整卡片尺寸、排列方式等
中间区域：卡片编辑区，可添加、删除和修改卡片属性
右侧面板：卡片预览区，实时显示当前编辑的卡片效果

核心功能解析：打造你的专属TRPG卡片

你是否想知道如何定义卡片的各种属性和内容？下面将详细介绍卡片数据结构和核心组件，让你能够轻松创建各种类型的TRPG卡片。

卡片数据结构

卡片定义采用JSON格式，每个卡片对象包含元数据和内容数组两部分。基础结构如下：

{
  "count": 1,          // 生成数量
  "color": "maroon",   // 卡片颜色
  "title": "Burning Hands", // 标题
  "icon_front": "white-book-1", // 正面图标
  "icon_back": "robe", // 背面图标
  "contents": [        // 内容数组
    "subtitle | 1st level evocation",
    "rule",            // 分隔线
    "property | Casting time | 1 action"
  ],
  "tags": ["spell", "mage", "dnd"] // 标签
}

常用内容组件

文本组件

组件类型	语法示例	效果描述
副标题	`subtitle	1st level evocation`
普通文本	`text	这是一段描述文本`
斜体文本	`italic	强调内容`
居中文本	`center	居中对齐`

结构化组件

[
  "rule",                // 水平线分隔
  "fill | 2",            // 空白填充（高度2）
  "section | Actions",   // 区块标题
  "dndstats | 8 | 14 | 10 | 10 | 8 | 8" // D&D属性值
]

高级技巧：定制化你的TRPG卡片

想要让你的卡片与众不同？以下高级技巧将帮助你实现更多个性化定制，打造独一无二的TRPG卡片。

自定义颜色方案

卡片支持CSS颜色名或十六进制值，你可以在卡片数据中直接指定颜色：

{
  "color": "#2E8B57", // 十六进制颜色
  "title": "自定义颜色卡片"
}

提示：你可以在generator/css/style.css文件中定义新的颜色类，以便在多个卡片中重复使用。

图标系统应用

项目集成了丰富的游戏图标库，你可以通过图标名称来使用它们：

{
  "icon_front": "mixed-swords", // 武器图标
  "icon_back": "treasure-chest" // 宝箱图标
}

实用技巧一：批量生成卡片

通过数组包含多个卡片对象实现批量生成：

var card_data = [
  { /* 卡片1定义 */ },
  { /* 卡片2定义 */ }
];

使用count属性设置单种卡片的生成数量，适合制作多张相同的药水或法术卡。

实用技巧二：移动端使用方法

虽然工具主要设计用于桌面浏览器，但也可以在移动设备上使用：

在移动浏览器中访问工具地址
使用双指缩放调整界面大小
点击卡片编辑区域进行内容修改
生成后通过"Save to file"保存卡片数据
在电脑上继续编辑或打印

自定义模板开发：创建专属卡片样式

想要为特定游戏系统创建专用卡片模板？以下指南将帮助你开发自定义模板，满足特殊需求。

创建新卡片尺寸

在generator/css/card-size.css中添加新尺寸定义：

.card.size-custom {
  width: 60mm;
  height: 88mm;
  margin: 5mm;
}

在卡片数据中引用新尺寸：

{
  "size": "custom",
  "title": "自定义尺寸卡片"
}

添加自定义图标

将SVG图标文件放入resources/custom-icons目录
重新执行npm run build，图标会被复制到构建目录
在卡片定义中使用图标文件名（不含扩展名）：
```
{
  "icon_front": "class-wizard"
}
```

常见问题与解决方案

遇到问题不要慌！以下是一些常见问题的解决方法，帮助你顺利使用TRPG卡片生成工具。

常见错误排查流程图

图标不显示
- 检查generator/icons目录是否存在图标文件
- 确认构建命令npm run build已成功执行
- 清除浏览器缓存后重试
卡片布局错乱
- 检查纸张大小与卡片尺寸设置是否匹配
- 减少每页卡片数量（A4纸建议最多3x3布局）
- 调整卡片边距设置
打印无背景色
- Chrome浏览器：打印设置→更多设置→勾选"背景图形"
- Firefox浏览器：页面设置→勾选"打印背景（颜色和图像）"
- Edge浏览器：打印→更多设置→背景图形→开启