TRPG卡片制作从入门到精通：自定义模板完全指南

作为一名TRPG爱好者，你是否曾为制作精美统一的游戏卡片而烦恼？手动设计法术、物品和怪物卡片不仅耗时费力，还难以保持风格一致性。本文将带你探索一款强大的TRPG卡片生成工具，从零开始掌握自定义模板制作技巧，让你的跑团体验提升一个档次。

为什么需要专业的TRPG卡片生成工具？

想象一下这样的场景：你的冒险小队刚刚击败了一个强大的巫妖，获得了一堆魔法物品。作为DM，你需要快速为这些物品制作清晰美观的卡片，以便玩家查看属性和效果。使用普通文字处理软件制作不仅效率低下，而且难以实现专业的排版效果。

这款基于HTML/CSS/JavaScript的静态网页应用正是为解决这些痛点而生。它完全离线可用，无需后端支持，所有操作都在你的浏览器中完成。最吸引人的是其高度自定义能力，从颜色到图标，从布局到内容结构，你可以打造完全符合自己游戏风格的卡片。

快速上手：10分钟搭建你的卡片制作环境

如何在几分钟内就能开始制作专业卡片？只需简单几步：

1. 获取项目代码

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

   ⚠️ 注意：确保你的系统已安装Git工具，否则需要先进行安装。

2. 安装依赖

   npm install
   

   💡 技巧：如果安装过程中出现错误，尝试使用管理员权限运行命令或检查Node.js版本是否符合要求（需要Node.js 12+）。

3. 构建项目

   npm run build
   

   📌 要点：这一步会处理图标和字体资源，确保卡片显示正常。

4. 启动本地服务器

   npm start
   

   完成后访问http://localhost:8080即可打开生成器界面。

卡片数据结构揭秘：像搭积木一样创建内容

卡片的核心是JSON数据结构，你可以把它想象成一个装满各种积木的工具箱。每个卡片都是由不同类型的"积木"组合而成：

{
  "count": 1,          // 生成数量
  "color": "emerald",  // 卡片颜色
  "title": "火焰之手", // 标题
  "icon_front": "fireball", // 正面图标
  "icon_back": "spellbook", // 背面图标
  "contents": [        // 内容数组
    "subtitle | 1级咒法系",
    "rule",            // 分隔线
    "property | 施法时间 | 1动作",
    "property | 射程 | 15尺",
    "text | 你向60度锥形区域内的每个生物发射灼热火焰。区域内的每个生物必须进行一次敏捷豁免检定。失败则受到3d6点火焰伤害，成功则伤害减半。"
  ],
  "tags": ["法术", "法师", "元素"] // 标签
}

常用内容组件一览

• 文本组件

  • subtitle | 文本 - 小号标题文本，适合显示次要标题
  • text | 文本 - 常规段落文本，用于描述内容
  • italic | 文本 - 斜体文本，用于强调内容
  • center | 文本 - 居中对齐文本，适合重要信息

• 结构组件

  • rule - 水平线分隔线，用于区分内容区块
  • fill | 数字 - 空白填充，数字表示高度
  • section | 标题 - 区块标题，创建内容分组
  • dndstats | 数值1 | 数值2 | ... - D&D属性值显示

• 列表与表格

  • bullet | 项目 - 无序列表项
  • table_start/table_end - 表格开始/结束标记
  • table_head | 表头1 | 表头2 - 表格标题行
  • table_row | 单元格1 | 单元格2 - 表格数据行

💡 技巧：组件类型与内容之间使用竖线|分隔，多个参数也用竖线分隔。

打造专属风格：从颜色到图标全自定义

颜色系统详解

卡片颜色就像给你的卡片穿上不同颜色的衣服。系统内置了多种预设颜色，你也可以使用自定义颜色值：

/* generator/css/style.css 中的颜色定义 */
.card.emerald { background-color: #50C878; }
.card.ruby { background-color: #E0115F; }
.card.sapphire { background-color: #0F52BA; }

使用时只需在卡片数据中指定颜色名称或十六进制值：

{
  "color": "sapphire",  // 使用预设颜色
  // 或
  "color": "#FFD700",   // 使用自定义金色
  "title": "魔法装备卡片"
}

图标系统应用

项目集成了丰富的游戏图标库，就像一个魔法道具商店，你可以为不同类型的卡片选择合适的图标：

{
  "icon_front": "sword",       // 武器图标
  "icon_back": "shield",       // 盾牌图标
  // 或使用职业图标
  "icon_front": "class-wizard" // 法师职业图标
}

📌 要点：所有图标名称可以在generator/fonts/game-icons.css文件中找到，也可以通过界面中的搜索功能查找。

常见需求解决方案：从新手到专家

如何制作双面打印的卡片？

1. 在页面设置中选择"Double sided printing"选项
2. 确保为每张卡片设置了icon_back属性
3. 生成卡片后，先打印正面，然后将纸张翻面重新放入打印机打印背面

⚠️ 注意：不同打印机的进纸方向可能不同，建议先使用普通纸测试打印方向。

如何批量生成相同类型的卡片？

使用count属性可以轻松生成多张相同的卡片：

{
  "count": 5,          // 生成5张相同卡片
  "title": "治疗药水",
  "color": "ruby",
  "icon_front": "potion"
}

卡片打印出来模糊怎么办？

1. 确保在打印设置中勾选了"打印背景图像"选项
2. 调整打印缩放比例为95%左右
3. 选择较高的打印质量设置
4. 使用哑光照片纸打印可获得最佳效果

创意扩展：让你的卡片与众不同

自定义卡片尺寸

如果你不满足于默认尺寸，可以在generator/css/card-size.css中添加自定义尺寸：

/* 添加自定义卡片尺寸 */
.card.size-mini {
  width: 45mm;
  height: 65mm;
  margin: 3mm;
}

然后在卡片数据中引用：

{
  "size": "mini",
  "title": "迷你型状态卡片"
}

职业图标应用

项目提供了多种职业图标，可用于制作职业特性卡片：

• 法师职业图标：class-wizard
• 战士职业图标：class-fighter
• 盗贼职业图标：class-rogue
• 牧师职业图标：class-cleric

这些图标位于resources/custom-icons/目录下，可以直接在卡片定义中使用。

多规则系统适配

无论你玩的是D&D、Pathfinder还是其他TRPG系统，都可以通过自定义内容结构来适配：

// Pathfinder风格卡片示例
{
  "title": "炫目闪光",
  "color": "amber",
  "contents": [
    "p2e_start_trait_section",
    "p2e_trait | uncommon | 稀有",
    "p2e_trait | evocation | 塑能",
    "p2e_end_trait_section",
    "subtitle | 1级法术",
    "property | 法术学派 | 塑能",
    "property | 施法时间 | 2动作"
  ]
}

总结：释放你的创造力

这款TRPG卡片生成工具不仅仅是一个制作工具，更是你创意的画布。通过本文介绍的基础操作和进阶技巧，你已经具备了制作专业级TRPG卡片的能力。无论是为自己的游戏制作道具卡，还是为自制模组设计独特的法术卡，这个工具都能满足你的需求。

记住，最好的卡片是那些能够增强游戏体验、让规则更清晰的卡片。现在就开始探索，创造出专属于你的TRPG卡片系统吧！

官方文档：generator/documentation.html 项目说明：README.md