V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
CosmoX
V2EX  ›  分享创造

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

  •  
  •   CosmoX ·
    hackjutsu · 2017-03-09 14:21:49 +08:00 · 7793 次点击
    这是一个创建于 2808 天前的主题,其中的信息可能已经有所发展或是发生改变。

    类三国杀卡牌生成器

    项目介绍

    这是一款类三国杀人物卡牌生成器。和使用 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
        1
    shoaly  
       2017-03-09 14:31:58 +08:00
    赞一个, 想法真不错 对应企业文化 也可以植入.
    自己的相册也不是不可以
    shoaly
        2
    shoaly  
       2017-03-09 14:33:34 +08:00
    很早之前类似的 胸牌, 我用的是 indesign sdk....批量导出 200 多个吧.... 没想到扑克牌也是一个优良的载体
    CosmoX
        3
    CosmoX  
    OP
       2017-03-09 14:36:54 +08:00
    @shoaly 一直想做个性化的三国杀卡牌,可惜画图技术差,最后反而逼出这个方案。
    CosmoX
        4
    CosmoX  
    OP
       2017-03-09 14:39:08 +08:00
    @shoaly 扑克牌至少平时还可以拿出来玩玩,我的胸牌几乎都是用一次就扔了(泪奔)
    50vip
        5
    50vip  
       2017-03-09 16:21:20 +08:00
    顶~
    50vip
        6
    50vip  
       2017-03-09 16:29:14 +08:00
    原理难道是使用 html 模版,然后用 PhantomJS 把 html 弄成图片?

    那为啥不使用 一些图片处理的模块来直接生成图片?
    mahone3297
        7
    mahone3297  
       2017-03-09 16:32:28 +08:00
    @50vip 问的好,同问
    siknet
        8
    siknet  
       2017-03-09 17:25:28 +08:00 via iPhone
    这个必须 star !
    siknet
        9
    siknet  
       2017-03-09 22:59:02 +08:00
    @CosmoX node 下要安装哪些支持?抱歉,之前没玩过 node ,说明里面好像漏了安装 PhantomJS 这个环节?
    CosmoX
        10
    CosmoX  
    OP
       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
        11
    CosmoX  
    OP
       2017-03-10 00:36:46 +08:00
    @siknet 我已经把 phantomjs-prebuilt 列为 dependency ,应该不需要另外安装吧:)跑 npm install 时候会自己安装上。
    Jackeriss
        12
    Jackeriss  
       2017-03-10 00:40:41 +08:00
    页脚链接挂了
    CosmoX
        13
    CosmoX  
    OP
       2017-03-10 00:44:20 +08:00
    @Jackeriss 上一个回复的链接吗? V2EX 的回复原来不支持 markdown 。再贴一次:

    https://github.com/marcbachmann/node-html-pdf
    WildCat
        14
    WildCat  
       2017-03-10 06:17:22 +08:00 via iPhone
    用不着 phantom 的, canvas 直接能把 HTML 保存为图片
    CosmoX
        15
    CosmoX  
    OP
       2017-03-10 07:17:08 +08:00
    @WildCat 方法有很多嘛。你那种方法应该需要一个 browser 来 render 吧?
    Jackeriss
        16
    Jackeriss  
       2017-03-10 08:30:12 +08:00
    @CosmoX 不是, http://hackjutsu.com/HeroCardGenerator/ 这个页面最下面 footer 里跳回 Github 的地址错了。
    CosmoX
        17
    CosmoX  
    OP
       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
        18
    CosmoX  
    OP
       2017-03-10 08:59:08 +08:00
    @Jackeriss 因为懒得重新搞个 demo 了,所以用原来的。
    WildCat
        19
    WildCat  
       2017-03-10 09:06:33 +08:00 via iPhone
    对啊 所以挂到静态网页都可以做在线版: https://www.v2ex.com/t/337100#reply9
    CosmoX
        20
    CosmoX  
    OP
       2017-03-10 09:21:51 +08:00
    @WildCat

    当时并没有打算做成在线版的,所以选用 PhantomJS ,这样只需要在 commandline 里跑就行,连 GUI 都不需要。如果要做成在线版,最大的问题不是打印,而是选用的几个中文字库体积太大了...
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3705 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 10:22 · PVG 18:22 · LAX 02:22 · JFK 05:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.