这是一款类三国杀人物卡牌生成器。和使用 Photoshop 制作相比,有这些优点:
去年夏天参加了多次太阁社区的程序员线下活动,认识很多很棒的小伙伴。那时便有了用大家头像制作一副三国杀以作纪念的想法。可惜自己画图太差, 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": "当使用 [杀] 指定一名角色为目标后,可以进行判定,若结果为红色,此 [杀] 不可被闪避。"
}
]
}
网上有很多扑克牌制作网站,我就不给他们打广告了,大家自行搜索就好。
下面秀一下这个项目的成果!!要不要给你们的团队也来一副?
1
shoaly 2017-03-09 14:31:58 +08:00
赞一个, 想法真不错 对应企业文化 也可以植入.
自己的相册也不是不可以 |
2
shoaly 2017-03-09 14:33:34 +08:00
很早之前类似的 胸牌, 我用的是 indesign sdk....批量导出 200 多个吧.... 没想到扑克牌也是一个优良的载体
|
5
50vip 2017-03-09 16:21:20 +08:00
顶~
|
6
50vip 2017-03-09 16:29:14 +08:00
原理难道是使用 html 模版,然后用 PhantomJS 把 html 弄成图片?
那为啥不使用 一些图片处理的模块来直接生成图片? |
7
mahone3297 2017-03-09 16:32:28 +08:00
@50vip 问的好,同问
|
8
siknet 2017-03-09 17:25:28 +08:00 via iPhone
这个必须 star !
|
10
CosmoX OP @50vip
一开始选用这个 stack 纯属巧合,当时在给一个叫做[node-html-pdf]( https://github.com/marcbachmann/node-html-pdf)的模块发 PR ,碰巧对方用到这个技术。 后来发现,用 HTML+CSS 有个好处就是 data 和 view 分离,可以通过切换不同 template 来换主题,而且可以通过 zoom 来调节大小和 resolution 。其实还有个好处就是我可以使用很多现成的模块,不需要自己画~ |
11
CosmoX OP @siknet 我已经把 phantomjs-prebuilt 列为 dependency ,应该不需要另外安装吧:)跑 npm install 时候会自己安装上。
|
12
Jackeriss 2017-03-10 00:40:41 +08:00
页脚链接挂了
|
13
CosmoX OP |
14
WildCat 2017-03-10 06:17:22 +08:00 via iPhone
用不着 phantom 的, canvas 直接能把 HTML 保存为图片
|
16
Jackeriss 2017-03-10 08:30:12 +08:00
@CosmoX 不是, http://hackjutsu.com/HeroCardGenerator/ 这个页面最下面 footer 里跳回 Github 的地址错了。
|
17
CosmoX OP @Jackeriss 哦哦 明白了。我之前有个项目专门给太阁程序员社区做了一款《太阁杀》,这是当时的 demo 。因为原来 repo 的 commit 历史里包含了不少人的个人信息,所以我把它设为 private 。然后把里面个人信息删除后重新建立了这个新 repo 。那个 demo 页面是原来 repo 的,转跳地址也指向原来 repo ,因为设为 private 了,所以看不到。
新 repo : https://github.com/hackjutsu/HeroCards |
19
WildCat 2017-03-10 09:06:33 +08:00 via iPhone
对啊 所以挂到静态网页都可以做在线版: https://www.v2ex.com/t/337100#reply9
|