本編はこちらになります。
「ぼくがNES.cssから学んだこと(前編)」
「ぼくがNES.cssから学んだこと(後編)」
前回までの記事をアップした後...
NES.cssの作者であるダーシノさんよりコメントを頂きまして、以下記事を紹介してくれました。
box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる
box-shadowを使った描画の仕組みを詳細に解説していたり、ジェネレータコンテンツやアニメーションと幅広く網羅しているのでこちら参考になります。
ドット絵をCSS手打ちで書くこと
A 「ドッド絵を作れる人がいるんですよ...」
B 「なぁーにーぃ、やっちゃまったなぁ!!」
A 「漢は黙って」
B 「点描ぉぉっ!!」
A 「気が狂いそうだよぉ...」
と、地道にCSS手打ちで書くのもありますが、作りたいドット絵が細かかったりすると位置がずれたりとかして、それなら最初から画像として作りたくなりそうです。
そこで、描いた絵をCSSスタイルとして変換してくれるツールを作りました。
その名も「Shadow Paint Generator」になります。
ダーシノさんもDotGen.cssというジェネレータ系のツールを作っていますので、二番煎じ感になってそうですが後学として自ら作ってみた次第です。
DEMO
Shadow Paint Generator
※Chrome推奨、スマホは未対応です。
このツールには、2つのモードがあります。
- お絵かきツールのようにCanvas上に描いたものを、
colorやbox-shadow等上述の仕組みを使ってスタイルに変換する**[Paint]**モード - 既存のドット絵画像をアップロードして、それらをドット絵調にしつつCSSスタイルに変換する**[Capture]**モード
後者の機能は、既存のドット絵や画像を取り込んでCSSとして扱う、もしくはそこからPaintモードで編集するケースも考えられそうだったので用意しました。
ちなみにボタンのUI、ホバーした時に四隅に角のついたラインもbox-shadow, colorで作っています。
細かいテストはしていないため動作や出力系で調整が必要そうではありますが、1からCSS手打ちで作る労力は省けそうではあります。