V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2825 天前的主题，其中的信息可能已经有所发展或是发生改变。

类三国杀卡牌生成器

GitHub 网址 <--- 戳戳

项目介绍

这是一款类三国杀人物卡牌生成器。和使用 Photoshop 制作相比，有这些优点：

可以读取 JSON 批量生成卡牌，也方便批量修改（不需要在 Photoshop 一张张修改哈）
可以自行用 HTML+CSS 设计保存不同卡牌 template （类似修改 Theme ？）
自动输出一副完整的扑克牌（前提是放入至少 52 个人物信息）
可以输出 html 、 png 、 pdf 等多种各种
可以方便地调节卡牌大小和分辨率
随机分配技能（技能取自三国杀，若进行商业开发，请注意版权）
开源免费！！！支持开源社区！！！ MIT license ！！！

设计初衷

去年夏天参加了多次太阁社区的程序员线下活动，认识很多很棒的小伙伴。那时便有了用大家头像制作一副三国杀以作纪念的想法。可惜自己画图太差， Photoshop 也不熟，只好暂时把想法放一边。

后来通过一个开源项目，偶然习得了使用PhantomJS输出网页图片的方法，灵光一闪，觉得可以制作一款基于 HMTL+CSS+Node.js+PhantomJS 的卡牌制作器。经过一周折腾，便有了这个项目。（例子）

添加卡牌

在./data/中放入 zhangsanfeng.json 和 zhangsanfeng.jpg 。其中 JSON 文件的内容如下：

{
  "id": "zhangsanfeng",
  "clan": "武当",
  "blood_number": "4",
  "nickname": "一代宗师",
  "name": "张三丰",
  "skills_group": [
    {
      "title": "突袭",
      "description": "摸牌阶段，可以放弃摸牌，然后从至多两名（至少一名）角色的手牌里各抽取一张牌。"
    },
    {
      "title": "铁骑",
      "description": "当使用 [杀] 指定一名角色为目标后，可以进行判定，若结果为红色，此 [杀] 不可被闪避。"
    }
  ]
}

如何制作真实的扑克牌？

网上有很多扑克牌制作网站，我就不给他们打广告了，大家自行搜索就好。

下面秀一下这个项目的成果！！要不要给你们的团队也来一副？

卡牌

三国杀

扑克牌

生成器

20 条回复 • 2017-03-10 09:21:51 +08:00

shoaly

2017-03-09 14:31:58 +08:00

赞一个, 想法真不错对应企业文化也可以植入.
自己的相册也不是不可以

shoaly

2017-03-09 14:33:34 +08:00

很早之前类似的胸牌, 我用的是 indesign sdk....批量导出 200 多个吧.... 没想到扑克牌也是一个优良的载体

CosmoX

2017-03-09 14:36:54 +08:00

@shoaly 一直想做个性化的三国杀卡牌，可惜画图技术差，最后反而逼出这个方案。

CosmoX

2017-03-09 14:39:08 +08:00

@shoaly 扑克牌至少平时还可以拿出来玩玩，我的胸牌几乎都是用一次就扔了（泪奔）

50vip

2017-03-09 16:21:20 +08:00

顶~

50vip

2017-03-09 16:29:14 +08:00

原理难道是使用 html 模版，然后用 PhantomJS 把 html 弄成图片？

那为啥不使用一些图片处理的模块来直接生成图片？

mahone3297

2017-03-09 16:32:28 +08:00

@50vip 问的好，同问

siknet

2017-03-09 17:25:28 +08:00 via iPhone

这个必须 star ！

siknet

2017-03-09 22:59:02 +08:00

@CosmoX node 下要安装哪些支持？抱歉，之前没玩过 node ，说明里面好像漏了安装 PhantomJS 这个环节？

CosmoX

2017-03-10 00:33:45 +08:00

@50vip

一开始选用这个 stack 纯属巧合，当时在给一个叫做[node-html-pdf]( https://github.com/marcbachmann/node-html-pdf)的模块发 PR ，碰巧对方用到这个技术。

后来发现，用 HTML+CSS 有个好处就是 data 和 view 分离，可以通过切换不同 template 来换主题，而且可以通过 zoom 来调节大小和 resolution 。其实还有个好处就是我可以使用很多现成的模块，不需要自己画~

CosmoX

2017-03-10 00:36:46 +08:00

@siknet 我已经把 phantomjs-prebuilt 列为 dependency ，应该不需要另外安装吧：）跑 npm install 时候会自己安装上。

Jackeriss

2017-03-10 00:40:41 +08:00

页脚链接挂了

CosmoX

2017-03-10 00:44:20 +08:00

@Jackeriss 上一个回复的链接吗？ V2EX 的回复原来不支持 markdown 。再贴一次：

https://github.com/marcbachmann/node-html-pdf

WildCat

2017-03-10 06:17:22 +08:00 via iPhone

用不着 phantom 的， canvas 直接能把 HTML 保存为图片

CosmoX

2017-03-10 07:17:08 +08:00

@WildCat 方法有很多嘛。你那种方法应该需要一个 browser 来 render 吧？

Jackeriss

2017-03-10 08:30:12 +08:00

@CosmoX 不是， http://hackjutsu.com/HeroCardGenerator/ 这个页面最下面 footer 里跳回 Github 的地址错了。

CosmoX

2017-03-10 08:56:57 +08:00

@Jackeriss 哦哦明白了。我之前有个项目专门给太阁程序员社区做了一款《太阁杀》，这是当时的 demo 。因为原来 repo 的 commit 历史里包含了不少人的个人信息，所以我把它设为 private 。然后把里面个人信息删除后重新建立了这个新 repo 。那个 demo 页面是原来 repo 的，转跳地址也指向原来 repo ，因为设为 private 了，所以看不到。

新 repo ： https://github.com/hackjutsu/HeroCards

CosmoX

2017-03-10 08:59:08 +08:00

@Jackeriss 因为懒得重新搞个 demo 了，所以用原来的。

WildCat

2017-03-10 09:06:33 +08:00 via iPhone

对啊所以挂到静态网页都可以做在线版： https://www.v2ex.com/t/337100#reply9

CosmoX

2017-03-10 09:21:51 +08:00

@WildCat

当时并没有打算做成在线版的，所以选用 PhantomJS ，这样只需要在 commandline 里跑就行，连 GUI 都不需要。如果要做成在线版，最大的问题不是打印，而是选用的几个中文字库体积太大了...

一款开源的类三国杀卡牌生成器（ HTML+CSS+Node+PhantomJS）

类三国杀卡牌生成器

项目介绍

设计初衷

添加卡牌

如何制作真实的扑克牌？