ピクセルアート、いわゆるドット絵は昔から変わらず人気があります。今のゲーム機ではほとんど見られなくなりましたが、Webやスマートフォンアプリでは使われていたりします。 そんなドット絵を作るためのエディタがPixel Art to CSSです。特徴はReactJSで作られていること、さらにCSSで出力できることです。

Pixel Art to CSSの使い方

Pixel Art to CSSのデモ画面です。右側がパレットおよび線種を選ぶ機能になります。

例えばこんな感じに絵を描きます。

画像として出力したパターンです。

さらにスタイルシートで出力。これを指定すれば同じ絵が描かれます。

ドット絵のキャンバスは大きさが変えられます。

Pixel Art to CSSはまさにドット絵エディタとして十分な機能を備えています。ReactJSを使ったアプリケーションの例としてみても面白いです。データがスタイルシートになるのもユニークです。

Pixel Art to CSSはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

Pixel Art to CSS jvalen/pixel-art-react: Pixel art drawing web app powered by ReactJS