マーダーミステリーを作ってユナドリウム対応する時って、こういった証拠カードみたいなの必要ですよね。
こういったカード画像を作るツールを開発した、という話です。
Card Maker Kunを作りました
こういうのって凝る人は凝るけど、凝らない人は凝らずに、誰かが用意したテンプレを使いたいですよね。
そして大体凝る人はイラレなどを使うと思います。
今回は凝らない人向け、サクッと作りたい人向けのツールを作りました。
プロトタイプにも使えるかなと思います。
https://henteko.github.io/card-maker-kun/
使い方は簡単。
- 色を選択する
- 文字を入力する
- Exportする
これだけ。
色もカードデザインの装飾も、シンプルなものを選んでみました。
作った理由
初めてマーダーミステリーを作ってみました。
その中で、絶対にユナドリウム対応を行いたかったので、ユナドリウム用の画像をどうにか用意する必要がありました。
しかし普通にイラレとかで作るのはなんか違う……そもそも今クリエイティブクラウドのサブスク解約しちゃったし……。
ということで、イラレがないならHTMLで作ればいいじゃない、と思いCard Maker Kunを作りました。
HTMLって文書用の仕組みかと思いきや、画像生成ツールでもあるんですね、便利ですね。
CSSでスタイルを付けて、Canvasに変換してます
Card Maker Kunの仕組みは簡単です。
CSSでスタイルを付けて、Canvasに変換後、画像としてダウンロードするようにしています。
全てブラウザ上で完結しているので、GitHub Pagesで公開しています。
DOMをCanvasに変換するのにはhtml2canvasを使っています。
今回初めて使いましたが、便利ですね。
今回もHTML手書きです
最近謎にReactとかVueを使わずに、HTMLをそのまま書く、みたいなのにハマってます。
というかこの程度のHTML手書きじゃなくReactとか使ってたら重すぎる気もしますね。
HTMLは手書きが一番ですね。
Buildとかしなくて済むし。
まとめ
Card Maker Kunというマーダーミステリーの証拠カードを作るツールを開発した話でした。
マーダーミステリーを作った際は、ぜひ使ってみてください。
